0%

1. 相对路径

项目小白做大作业的时候相对路径总是搞得云里雾里的,课上老师不会讲这些知识点,浅浅记录一下

  1. 引用上级文件: ../cover1.jpg
  2. 引用同级文件: cover1.jpg
  3. 引用下级文件: cover/cover1.jpg
  4. 引用上上级文件: ../../cover1.jpg
1
2
3
4
5
6
7
8
9
10
11
<!-- 1.引用上级文件,为图片中例子 -->
<img src="../cover1.jpg" alt="cover1">

<!-- 2.引用同级文件 -->
<img src="cover1.jpg" alt="cover1">

<!-- 3.引用下级文件 -->
<img src="cover/cover1.jpg" alt="cover1">

<!-- 4.引用上上级文件 -->
<img src="../../cover1.jpg" alt="cover1">

参考:相对路径和绝对路径?简洁易懂解释+实例 - 知乎 (zhihu.com)

2. 插入图片

学会如何引用相对路径以后就可以尝试在博客中插入图片了

  • 在md文件中插入图片的语法为![]()

​ 其中方括号是图片描述,圆括号是图片路径。

​ 注意:对于hexo来说它的资源文件的根目录就是source,当然你也可以修改_config.yml改变这个配置

  • 网上插入图片的方法众多,一下是我采用的方法:

在Hexo的目录source中创建一个图片文件夹,例如pic

设置路径:

1
![image-20240130114356739](../pic/pic1.png)

image-20240130114356739

测试下是否可以显示

好,可以显示

参考:Hexo 添加图片——不用插件,超简单_hexo添加图片-CSDN博客

由于我是在typora上写的博客,所以路径与参考博客不太一样,参考博客的路径在typora中无法显示图片

此外,该方法似乎有些弊端,评论区有人指出该方法到后期会遇到一个问题就是占用空间太大,Github是有项目大小限制的,如果遇到更简单的方法我也会更新。

本片记录博客主题优化,持续更新,加油把博客装扮成花里胡哨吧哈哈

背景

  1. 背景透明化

    参考文章:https://blog.csdn.net/Growing_potato/article/details/113926856

    修改source\_data\styles.styl 文件夹代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    body {
    background: url(/images/background.png);//自己喜欢的图片地址
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    }
    //博客内容透明化
    //文章内容的透明度设置
    .content-wrap {
    opacity: 0.8;
    }
    .main-inner {
    // margin-top: 60px;
    // padding: 60px 60px 60px 60px;

    background: rgba(255,255,255,0.7) none repeat scroll !important;
    }
    //侧边框的透明度设置
    .sidebar-inner {
    background: rgba(255,255,255,0.7) none repeat scroll !important;
    }

    //菜单栏的透明度设置
    .header-inner {
    background: rgba(255,255,255,0.8);
    }

    //搜索框(local-search)的透明度设置
    .popup {
    opacity: 0.8;
    }

    用以上代码以后本来透明的部分反而不透明了,我再修改下

庆祝一下自建博客成功

做博客的初衷是觉得个人博客是技术宅的标配hh

之后会在博客上分享学习记录,也希望能通过博客来提升下自己的表达能力

博客主题还在优化中。。。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment