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

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

0x00 创建自定义样式文件

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

_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
//###### 博客内容透明化 ######


//文章内容的透明度设置
.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 设置透明度足矣。