Hexo安知鱼主题修改背景折腾记录

# 前言

我一开始还觉得奇怪，安知鱼既然是基于 butterfly 修改而来的，为什么 butterfly 有背景的选择，但是安知鱼却选择将其删除掉了

后面等我修改完一切我就知道为什么这样做了 ———— 设计理念冲突

安知鱼这个主题给我的整体感官就是果味十足，高对比度设计，颜色亮度大

所以当我强行更改完后的结果就是，真的不堪入目。。。很不和谐的感觉

我这里建议想要换背景就安心去用 butterfly，不要想着给安知鱼主题强行换背景，不然到时候换完背景别怪我没提醒你。🤣

当然我也尝试更改过配色问题，但是模块太多了，很多地方也没有沿用主题配色，需要单独修改，到最后我都不想改了。。。越改越像 butterfly 了

是由于这里我就简单记录一下我修改的地方，帮助大家 DIY 主题

# 开始

# 设置背景

首先我们找到主题文件夹下\source\css\_global\index.styl文件

定位到 200 行左右的#web_bg ，也就是 web_bg 的样式

然后我们删除样式内

1
2
3

top: -50%;
left: -50%;
transform: rotate(-1deg);

并将width和height从原来的 200% 修改为 100%

然后通过查找功能找到--anzhiyu-background变量，大概在 101 行左右，这个变量的值就是主题的背景了

可以将值定义为url(你的背景图片地址)，这样就完成了背景图片的更换

最后我们找到--global-bg变量，大概在 91 行左右，将这个变量定义为透明颜色，即rgba(255,255,255,0)

这样背景替换就完成了

# 降低主页卡片透明度

首先我们找到主题文件夹下\source\css\var.styl文件

定位到$card-bg变量，大概在 48 行左右

将 $white 换为rgba(255,255,255,0.9)，自定义透明度调整最后的 0.9 参数就行了

然后找到主题文件夹下\source\css\_global\index.styl文件

定位到--anzhiyu-card-bg变量，大概在 116 行，将其设置为和$card-bg相同的值（修改过后的）即可

这样降低主页卡片透明度就完成了

# 恢复加载动画背景透明度

tips：如果你没有进行上面降低透明度操作或者没有开启安知鱼的全屏加载动画那就可以跳过本节了

当完成上面操作后我们需要调整加载动画的透明度，因为加载动画的背景也是调用的--anzhiyu-card-bg变量，而我们进行上面操作后就会导致加载动画背景透明度也跟着一起降低，无法起到遮挡的 mask 作用

找到主题文件夹下\source\css\_global\loading.styl文件

定位到大概第 7 行左右，将background修改为rgba(255,255,255,1)即可（用白色 rbg 也行）

# 给顶部导航栏增加底色

修改背景后透明的导航栏会有时候受背景影响而不容易看清，增加一点底色则会好很多

找到主题文件夹下\source\css\_layout\head.styl文件

定位到&.not-top-img下的 background，将原来的 0 修改为你想要的 rbga，我这里为了看起来正常一点便设置为rgba(255,255,255,0.5)

根据自己的喜好修改即可

# 给背景增加高斯模糊

不一定都要增加，根据自己的背景图片自行决定即可

找到主题文件夹下\source\css\_global\index.styl文件

定位到#web_bg，和上面修改主题背景一样的地方

在其中添加一行

1	filter: blur(4px);

至于模糊程度就看自己喜好了

# 解决 essay 页面背景图片过大问题

essay 页面或者称闲言碎语、即刻

找到主题文件夹下\source\css\_extra\essay_page\essay_page.css文件

定位到 10-12 行

1
2
3

body[data-type="essay"] #web_bg {
  background: var(--anzhiyu-background);
}

删除即可

说白了就是多了一个背景图片，删掉一个即可

# 额外

# 增加底部版权文字和一言的距离

找到主题文件夹下\layout\include\footer.pug文件

定位到 73 行和 76 行

1
2
3

.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By `

.copyright!= `&copy;${nowYear} By ${config.author} `

多打几个空格即可

# 后记

这还有 bug 没改完呢。。。

essay 页面的卡片透明度也要修改，首页即刻的横栏透明度也要修改，随便逛逛下面的三大坨的配色亮度也需要修改等等

反正当时我为了适配这个主题就设置了半天，再加上修改主题，感觉整个人都要被整吐了🥹

下次再也不大改主题了（确信

现在你们还想改吗（doge