Butterfly 主题魔改记录

欢迎到我的博客查看最新文章: https://blog.clouder.im

　　记录下我对 Butterfly 主题的魔改, 一方面可供参考, 另一方面可以记录下自己的修改方便查找.

　　本博客已开源! 请看 Hexo modify theme butterfly. 以下魔改部分集合到魔改主题, 部分已放弃 (不兼容或者其他原因). 如果更改失效, 可能是版本问题, 如果想要尽快使用这些魔改, 最便捷的方式是直接使用我的魔改主题. 魔改主题保留了所有原配置, 所有魔改配置均可关闭.

Mathjax 公式渲染去除滚动条

　　进入 source/css/_layout/third-party.styl , 找到如下内容

.has-jax
  overflow: auto

改成

.has-jax
  overflow: visible

设置半透明

　　效果看我博客.

　　进入source/css/_layout/page.styl 文件, 找到以下内容

.layout_page
  display: flex
  align-items: flex-start
  margin: 0 auto
  padding: 2rem 15px
  max- 1200px

后面加上 opacity:0.7 改为

.layout_page
  display: flex
  align-items: flex-start
  margin: 0 auto
  padding: 2rem 15px
  max- 1200px
  opacity:0.7

这里的 0.7 是透明度, 取值 0~1 , 越大越不透明, 越小越透明, 可以自己取值.

post 文章侧边栏去掉滚动条

　　文章有标题时, 左边就会出现侧边栏, 而侧边栏的滚动条实在是不太美观, 于是隐藏掉.

　　进入 layout/includes/sidebar.pug 看到以下内容

      if (page.encrypt == true)
        div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
      else 
        div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})

只要为侧边栏加一个 style="overflow: hidden;" 就能隐藏滚动条, 因此改为

      if (page.encrypt == true)
        div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
      else 
        div.sidebar-toc__content(style="overflow: hidden;")!=toc(page.content, {list_number: tocNumber})

就好了.

非 post 随机 banner , 网页背景, 页脚图片

页脚, banner 头图设置为透明

页脚

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

- var footer_bg = theme.footer_bg == false ? '' : bg_img

在其下面追加变成

- var footer_bg = theme.footer_bg == false ? '' : bg_img
if !is_post()
  - var footer_bg = 'background-color: transparent;'

banner 头图

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

#nav(class=isHomeClass style=bg_img)

在其上追加变成

if !is_post()
  - var bg_img = 'background-color:transparent;'
#nav(class=isHomeClass style=bg_img)

随机背景设置

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

if theme.background
  - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'

改为

- var is_photo = 'photo'

(对, 就是直接替换, 注意位置要一样, 当然你也可以把原来的代码注释掉)

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

footer#footer(style=footer_bg data-type=is_bg)
  !=partial('includes/footer', {}, {cache:theme.fragment_cache})

在其下追加变成

footer#footer(style=footer_bg data-type=is_bg)
  !=partial('includes/footer', {}, {cache:theme.fragment_cache})
if !is_post()
  script() var bg_index = Math.floor(Math.random() * #{theme.bg_num});var res = 'background-image: url("https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/' + bg_index + '-min.jpg"); background-attachment: fixed;';document.getElementById('web_bg').style = res

同时在 butterfly/_config.yml 里添加以下内容

# banner图数量
bg_num: 48

当然这只是使用我的 banner 图片, 如果要用你自己的, 还需要相应的更改, 这需要图片的 url 符合一定的格式, 即

前缀 + [从 0 开始递增序号] + 后缀

然后将内容改成

footer#footer(style=footer_bg data-type=is_bg)
  !=partial('includes/footer', {}, {cache:theme.fragment_cache})
if !is_post()
  script() var bg_index = Math.floor(Math.random() * #{theme.bg_num});var res = 'background-image: url("前缀' + bg_index + '后缀"); background-attachment: fixed;';document.getElementById('web_bg').style = res

同时将 _config.yml 刚刚添加的配置设置为你的 banner 图数量.

举个例子, 我的 banner 图 url 就是

前缀 + [从 0 开始递增序号] + -min.jpg

其中某个 banner 图就是

https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/3-min.jpg

其中 https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/ 就是我图片的 url 的前缀, 3 即是 [从 0 开始递增序号] (也就是说还有 0, 1, 2...) , -min.jpg 是图片 url 的后缀.

　　只要你的图片的 url 由这三个部分组成, 那么就可以将前缀和后缀填入代码中, 这样就可以实现使用自己的 banner 了.

footer 动态颜色

　　这里只设置 post 文章中的 (避免与 page 的魔改冲突).

　　打开 layout/includes/head.pug , 添加以下内容

if is_post()
  link(rel='stylesheet', href="footer.min.css")

就好了.

黑暗模式下 nav 处黑色浮块消除

　　打开 source/css/_mode/darkmode.styl 找到如下字段

#nav
  &:before
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    background-color: alpha($dark-black, .7)
    content: ''

去掉 background-color 改为

#nav
  &:before
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    content: ''

随机 banner

　　Butterfly 主题的 banner 大图一个页面是只有一张的, 并且主题配置里也没有多张的设置, 因此如果你想要实现 banner 能够随机显示, 那么就需要魔改主题.

2.1.0

　　在 Butterfly/layout/includes/nav.pug 文件中添加以下内容

script document.getElementById("nav").style = 'background-image: url("' + Math.floor(Math.random()*9) + '.jpg"); background-attachment: fixed;'

在以上的代码中需要将 yunwanjia-cloud 换成你自己的 github 用户名 (如果你是部署在 github 上的话). 其原理就是利用 js 生成 0-8 的随机数, 然后修改 banner 图.

　　当然仅仅加这段代码是没有用的, 还要在 Butterfly/source/img/banner/ 下 (没有文件夹就自己创建) 放你自己想用的 banner 大图, 名字限定在 [0-8].jpg. 如果要增加 banner 图片的话名字就继续递增, 同时上面的代码中的 9 改成你的 banner 图数量. 当然如果数量不足 9 张, 那么同样也要改成你的 banner 图数量.

　　这段代码还会把文章的 banner 也变为随机 banner 而不是 cover, 于是如果想要文章的 banner 还是原来的图的话, 那就再加一个条件判断.

if !is_post()
  script document.getElementById("nav").style = 'background-image: url("' + Math.floor(Math.random()*9) + '.jpg"); background-attachment: fixed;'

2.2.5

　　升级到 2.2.5 版本后, 发现原来的随机 banner 效果居然失效了! 然后查看源码才发现 nav.png 这个文件似乎被作者抛弃了, 将 banner 图的功能放在了 Butterfly/layout/includes/header/index.pug 里. 因此只要把以上代码放进这个文件里就行了, 代码的说明和上面是一样的, 至于 nav.pug 里的内容改不改都一样的.