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-width: 1200px

后面加上 opacity:0.7 改為

.layout_page
  display: flex
  align-items: flex-start
  margin: 0 auto
  padding: 2rem 15px
  max-width: 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 里的內容改不改都一樣的.