由于 Next 主题更新至 7.0+ 版本后取消了 _custom 文件夹以及 custom.styl 文件
大部分博客都是基于之前的配置，因此导致新版本不兼容
下面介绍在 Next7.0+ 版本下的背景图片设置
1.修改主题配置文件 _config.yml
打开 next 主题的 _config.yml 文件，搜索 custom_file_path，可以看到如下内容：
1
2
3
4
5
6
7
8
9
10
11
| custom_file_path:
|
修改 style 属性，即取消相应注释
2.创建 _data 文件夹并添加 styles.styl 文件
找到博客所在的根目录下的 source 文件夹，也就是存储 _post 文件夹的目录
之后，创建 _data 目录与其中的 styles.styl 文件
3.修改 styles.styl 文件
在文件中添加如下代码
1
2
3
4
5
6
7
8
9
10
| // Custom styles.
//背景图片
body {
background:url(/assets/img/background.jpg);
background-repeat: no-repeat; //是否重复出现
background-attachment:fixed; //定义背景图片随滚动轴的移动方式
background-position:50% 50%; //设置背景图像的起始位置
background-size:cover; //为可能有助于大分辨率下背景图的显示
}
|
之后，找到合适的背景图片，将其改名为 background.jpg，并将其放在 hexo/assets/img/ 路径下
如果需要使用图床上传的图片，将图片路径改为对应的 url 路径即可，例如：
1
2
3
4
5
6
7
| body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size:cover;
}
|
此处的 https://source.unsplash.com/random/1600x900 是一个提供随机图片的网站
4.修改不透明度
在 styles.styl 文件中添加如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| //透明度设置
.header-inner { //菜单栏
background: rgba(255,255,255,0.8);
}
.sidebar { //侧边栏
opacity: 0.8;
}
.content-wrap { //文章
opacity: 0.8;
}
.popup { //搜索框
opacity: 0.8;
}
|
