Hexo+Butterfly 主题美化

版本说明

Butterfly 已经更新到3.8.4， 目前采用版本为3.8.3

侧边栏电子时钟

安装依赖:

npm install hexo-butterfly-clock --save

在_config.yml中配置插件:

# electric_clock
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/loading.gif #加载动画自定义

效果如下：

image-20210914220124949

随机背景图

此处需要对源码进行修改，慎重考虑。

授人以渔

此处参考了会飞的小弋的教程，不过他的butterfly版本较低，现今源码已改变，故这里进行梳理。

通过网页的search功能基本就能锁定到背景页面的css，显然页面是用的id选择器，且id为web_bg，元素为background

#web_bg {
  position: fixed;
  z-index: -999;
  width: 100%;
  height: 100%;
  background: url("/img/banner/6.jpg");
  background-attachment: local;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

通过用js的document.getElementById('web_bg')发现并不能取到想要的值，是因为此处不是采用的行内式，不过既然知道了web_bg参数，就可以进行全局搜索

修改源码

在 butterfly/layout/includes/layout.pug 下找到如下代码：

footer#footer(style=footer_bg)
    !=partial('includes/footer', {}, {cache: true})

在其下追加变成，注意缩进，script()与上面的!=对齐

footer#footer(style=footer_bg)
    !=partial('includes/footer', {}, {cache: true})
if !is_post()
    script() var bg_index = Math.floor(Math.random() * #{theme.background_num});var res = 'background-image: url("/img/banner/' + bg_index + '.jpg"); background-attachment: fixed;';document.getElementById('web_bg').style = res

这里的if !is_post()表示文章页面不采用随机背景，如果需要随机则可以把这句话删去。文章背景色是采用主题设置中的background值

添加图片

在\source\img目录下新建banner文件夹，然后就可以把图片按照0.jpg、1.jpg、2.jpg这个顺序放入，同时在 butterfly/_config.yml 里添加以下内容

# 随机背景图banner的数量
background_num: 8