hexo博客之Butterfly主题优雅更换背景

选择如何修改

对于如何修改背景，我目前想到的方案有三种。

  1. 直接修改源文件
    也就是直接修改主题目录下的index.sty文件，这种方式简单直接。唯一的不足就是每次更新主题需要重新修改。
  2. 引入一个新的css文件
    这个是我比较推荐的做法，毕竟” 魔改一时爽，一直魔改一直爽 “。
  3. 使用js文件
    最不推荐的做法，这种做法会在一定程度上延缓网页加载的时间，并且修改方式较为复杂。
    至于为什么，请自行科普html是如何渲染。

如何选择

对于上述三种方法，我选择第二种，理由与不足如下：

方式比较优雅。

相比第一种不会因为主题更新而再次修改

引入 css 文件在渲染时不会切换引擎

引入新的文件，会造成页面多一次的请求

覆盖方式可能会需要加！important

创建层叠样式表

这里以第二个方式，css文件建立的方式有两种。
博主的 butterfly 主题为：2.3.0
在任意位置创建一个css文件，例如 background.css。（简单来说，就是创建一个 txt 文件，把名字改为 background.css 即可。注意扩展名）
打开这个css文件，开始编辑
butterfly 主题的背景div的id为web_bg，因此我们只需要重新定义这个样式即可。

1
#web_bg{}
1
2
3
4
5
6
7
8
#web_bg {
  /* 背景图像的地址（url括号里）  */
  background: url();
  /* 背景图像不重复 */
  background-repeat: no-repeat;
  /* 背景图像大小 */
  background-size: cover;
}

关于 background 更多用法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
关于 background-repeat 更多用法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat
关于 background-size 更多用法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
修改为渐变背景
例如蓝红色渐变

1
2
3
4
5
6
7
8
9
10
#web_bg {
  /* webkit内核 5.1 - 6.0 */
  background: -webkit-linear-gradient(left, red, blue);
  /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(right, red, blue);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(right, red, blue);
  /* 标准的语法 */
  background: linear-gradient(to right, red, blue);
}

纯色背景
纯色背景可以直接在配置文件修改，因此可以直接修改配置文件。

引入文件

引入文件的方式有两种：以相对路径的方式引入和以外链的方式引入。如何选择请各位博主自己斟酌。

以相对路径引入

将写好的 css 文件移动到\Butterfly\source\css\目录下。
然后修改配置文件的引入方式

以外链的方式引入

同样的可以将这个文件上传到 cdn，如七牛云、又拍云、GitHub+Jsdeliver 等。
只需要将引入地址写为你的文件外链地址即可。
例如小康博客的jsd链接

修改文章页背景及透明度

此项修改主要是修改文章页背后的颜色。默认为白色不透明。
这里我个人建议使用rgba方式，前边的rgb也就是正常的rgb颜色。最后的a代表的是透明度。

1
2
3
4
5
6
7
8
9
10
/* 文章页背景 */
.layout>div:first-child:not(.recent-posts) {
    /* 以下代表白色透明度为0.3 */
    background: rgba(255,255,255,.3);
}
/* 所有背景（包括首页卡片、文章页、页面页等） */
#recent-posts>.recent-post-item,.layout>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post{
    /* 以下代表白色透明度为0.3 */
    background: rgba(255,255,255,.3);
}
1
2
3
.layout>div:first-child:not(.recent-posts) {
    background: rgba(255,255,255,.3);
}
1
2
3
.layout>div:first-child:not(.recent-posts) {
    background: rgba(255,255,255,.5);
}
1
2
3
.layout>div:first-child:not(.recent-posts) {
    background: rgba(255,255,255,0);
}