M010K
0%

Hexo设置/Next7.0+背景的设置

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 1.8k 阅读时长 ≈ 2 分钟
介绍在next7.0+主题下设置博客背景图片的方式

Next7.0+背景的设置

由于next主题更新至7.0+版本后取消了 _custom文件夹以及custom.styl文件

大部分博客都是基于之前的配置，因此导致新版本不兼容

下面介绍在Next7.0+版本下的背景图片设置

Step 1 修改主题配置文件_config.yml

  • 打开next主题的_config.yml文件
  • 搜索custom_file_path，如下所示:
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl
  • 修改style属性，即取消相应注释
1
style: source/_data/styles.styl

Step 2 创建_data文件夹并添加styles.styl文件

注意到custom_file_path中的文件路径为source/_data/styles.styl

理所应当想到在next文件夹的source目录下添加文件，但是，这并没有用

事实上，这个source目录指的是博客所在文件夹的根目录下的source文件夹，也就是存储_post文件夹的目录

知道了路径，问题就简单了,创建styles.styl文件即可

  • 方式1：打开cmd或者终端
1
2
3
4
5
$ cd ../Blog  # Blog是你存放博客的文件夹
$ cd sourse
$ mkdir _data
$ cd _data
$ touch styles.styl

  • 方式二

    在博客文件夹的source目录新建文件夹_data并在其中创建文件styles.styl

Step 3 修改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
// 添加背景图片
body {
      background: url(/images/background.png);//自己喜欢的图片地址
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.85;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.85;
}

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

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.85;
}

注意到这里的图片文件的实际位置是：/Users/xxx/Blog/themes/next/source/images

没错就是这么坑，

注：

  • 图片的名字可以自己修改
  • 如果需要使用图床上传的图片，将图片路径改为对应的url路径即可，如
1
2
3
4
5
6
7
8
body {
      background:url(https://tva1.sinaimg.cn/large/
      00831rSTgy1gdff4utyetj318g0p0q7b.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}

以上，解决了关于在Next7.0+配置博客背景图片的问题