Hexo + NexT8主题配置透明背景过程踩坑小记

发表于 更新于 分类于 Waline： 本文字数： 798 阅读时长 ≈ 3 分钟

找了个时间，把 NexT 主题从 7.x 升级到了 8.x ，期间遇到不少问题，最麻烦的就是这个透明背景的设置了。 首先是 NexT8 把 _custom.styl 的位置进行了更换，需要在其它目录新建一个自定义的样式文件并引入。 其次，原先设置背景透明度的方法失效了，在新主题上不起作用。 更麻烦的是，照着网上大多数教程配置好透明后，在一些部件获得鼠标焦点后，会有白色色块出现并闪烁。 本人经过好一阵研究，终于完美解决，特此分享。

0x00 创建自定义样式文件

打开 站点根目录/source/ 新建文件夹 _data ，注意是站点根目录，不是主题根目录。

在 _data 文件夹下新建 styles.styl 文件。

在以下两种方法中选择一种即可。

新方法（推荐）

将以下内容填入 styles.styl：

1
2
3
4
5
//###### 博客内容透明化 ######

:root {
  --content-bg-color:#ffffffe6;
}

旧方法

将以下内容填入 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
//###### 博客内容透明化 ######


//文章内容的透明度设置
.post-block {
  background: rgba(255,255,255,0.9) none repeat scroll !important;
}

//分页(主页最下面的那一小块)
.pagination {
  background: rgba(255,255,255,0.9);
}

//菜单栏背景
.header-inner {
  background: rgba(255,255,255,0.9);
}

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

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

//评论区
.comments {
  background: rgba(255,255,255,0.9);
}

0x01 在主题配置中引入样式文件

打开主题的配置文件，比如我的是 _config.next.yml ，找到如下区段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

将其中的 #style: source/_data/styles.styl 取消注释（删掉#号），保存。

0x02 配置排除渲染

这步可能可以跳过，Hexo 似乎会自动排除渲染 _data 目录。

打开站点的配置文件，找到或者新建 skip_render 字段，在下面新增 _data/** 。

配置完差不多是这样的：

1
2
skip_render:
  - "_data/**"

至此，配置就完成了。

0x03 查看效果

重新生成下站点：

1
hexo clean && hexo s -g

然后在 locahost 就能查看效果了。

0xFF 一些异常情况分析

以下分析仅对采用“旧方法”的情况有效。

白色色块闪烁

新版 NexT 主题的文章页面似乎有一种 “背景图片” 的属性（实际是纯白），因此光是设置文章块的透明度时不够的，还需要 “取消背景”。

其中设置的关键就是在 rgba 的设置后面加上这么一句： none repeat scroll !important; 。

p.s. 如果不设置 “取消背景” ，只对 .post-block 设置透明度是无效的，文章背景还是白色不透明。

图像也变透明

这种情况一般是因为将透明的属性应用的太广了，比如说给 .main-inner 设置了透明度。如果不想要图片也变得透明，按照我的配置文件给 .post-block 设置透明度足矣。