前言

折騰了三天終於修改完畢
再次感謝 Butterfly 主題的作者 JerryC 製作出這個既簡潔漂亮又多功能的主題
各種炫酷功能的配置設定可看作者提供的文檔，很詳細，跟著設置就可以了。

以下，分享一下文檔中沒提及的、我的自定義修改：

【註】我用的是 hexo-theme-butterfly version 2.1.0

檔案樹狀結構

根目錄

Code

.
├── public        // 執行 hexo generate 後，輸出的靜態網頁
├── scaffolds     // 模板。Hexo會根據scaffold來建立新文章/新頁面
├── scripts       // 存放自定義 js 文件
├── source        
|   ├── _drafts   // 草稿文章
|   └── _posts    // 發佈文章
├── themes        // Hexo 主题文件，Butterfly 主題的樹狀結構請看下面
├── _config.yml   // 整個 Blog 的配置
└── package.json  // 已下載的掛件及其版本 version no.

Butterfly 主題目錄

Code

.
└──themes
   └── Butterfly
       ├── languages    // 主題語言字眼
       ├── layout       // pug 文件，後會渲染成 html
       ├── scripts      // js 文件
       ├── source        
       |   ├── css      // styl 文件，後會渲染成 css
       |   ├── img      // 主題配置用到的圖片
       |   └── js       // js 文件
       └── _config.yml  // Butterfly 主題配置

基本上，我修改的文件都是這幾個：

_config.yml >> 修改站點配置
.\themes\Butterfly\_config.yml >> 修改 Butterfly 主題配置、功能等
.\themes\Butterfly\source\css >> 進階修改 Butterfly 主題的 css (.styl檔)
.\themes\Butterfly\layout >> 進階修改 Butterfly 主題的 html (.pug檔)

主題顏色

如果想進階修改主題顏色的話，可到以下文件修改參數：

.\themes\Butterfly\source\css\var.styl

樣式 (css相關的項目)

如果想修改特定元素的樣式，例如字體大小、字體顏色、背景顏色、tag 外觀樣式、border style 、button、動畫效果等等，可到下面這個 folder 內找相應的 .styl 檔進行修改：

.\themes\Butterfly\source\css\_layout

=== 例子 ===
黑夜模式
如想修改黑夜模式的顏色組合，就到這裡修改： .\themes\Butterfly\source\css\_layout\z-darkmode.styl

圖片位置格式
由於我寫文章經常會加表符，所以想圖片顯示在文字後面，不要跌進新的一行。
所以我在 .\themes\Butterfly\source\css\_layout\post.styl 裡，把 img 原本的 display: block 改成 display: inline。但要注意，這樣便不能用 medium_zoom 和 fancybox 功能了，在 .\themes\Butterfly\_config.yml 要把這兩項設為 false。

主頁文章：不顯示圖片cover

在 .\themes\Butterfly\_config.yml 設定 index_post_cover: none
在 .\themes\Butterfly\source\css\_layout\page.styl ,
- 2.1 - 把 .recent-post-info 設定 width: 100%
- 2.2 - 在描述 index_post_cover 那裡添加下面三行：
  styl
  else if hexo-config('index_post_cover') == 'none'
  .post_cover
  display: none

Tags：移至文章上方

原本文章內的 tags 是顯示在版權下方，如要好像我這樣顯示在正文上方，在 .\themes\Butterfly\layout\post.pug 這個文件中，搜尋下面這段，把它移到至 block content 的下一行插入。

Code

.tag_share
  if (theme.post_meta.tags)
    .post-meta__tag-list
      each item, index in page.tags.data
        a(href=url_for(item.path)).post-meta__tags #[=item.name]

版權框內的字句

在 .\themes\Butterfly\languages 這裡面的 yml 檔裡。

為文章加密

在 GitBash 輸入以下（參考）

bash

npm install --save hexo-blog-encrypt

使用方法
例如，我這篇加密文章，在文章頭加上 password 和 message (optional):

Markdown

---
title: 測試 - 為文章加密
date: 2020/02/16 13：50
tags:
    - Hexo
    - 架站
categories: [架站記錄,技巧]
password: test123
message: 試試加密，這篇的密碼是 test123
---

---

恭喜成功解密！

這裡是文章內容。

為單篇文章加密的方法教學，請到[這篇文章](https://ouoholly.github.io/post/my-custom-config-on-hexo-butterfly-theme/#為文章加密)看。

---

右下角按鈕：改為默認顯示，按才隱藏

右下角的 黑夜模式、繁簡轉換 、字體大小 按鈕原本是默認隱藏的，要按那個轉轉的設置按鈕才會彈出來。
我想把這些功能按鈕改成默認顯示，按那個轉轉設置按鈕就收起來，再按再彈出來這樣和原本反過來的效果。
於是把 .\themes\Butterfly\source\css\_layout\rightside.styl 裡改成下面這樣：

styl

#rightside
  position: fixed
  right: -38px
  bottom: 40px
  opacity: 0
  transition: all .5s

  #rightside-config-hide
    transform: translate(0, 0)

  .rightside-in
    animation: rightsideIn .3s

  .rightside-out
    animation: rightsideOut .3s
    transform: translate(30px, 0) !important

  & > div
    & > i,
    & > a,
    & > div
      display: block
      margin-bottom: 2px
      width: 30px
      height: 30px
      background-color: $light-blue
      color: $white
      text-align: center
      text-decoration: none
      font-size: 16px
      line-height: 29px
      cursor: pointer

      &:hover
        background-color: $ruby

  #rightside_config
    i
      animation: avatar_turn_around 2s linear infinite

  #mobile-toc-button
    display: none

@media screen and (max-width: $bg)
  #rightside
    #mobile-toc-button
      display: block

@keyframes rightsideOut
  0%
    transform: translate(0, 0)

  100%
    transform: translate(30px, 0)

@keyframes rightsideIn
  0%
    transform: translate(30px, 0)

  100%
    transform: translate(0, 0)

右下角新增【到最底部】按鈕

除了文章(post)頁面，其他頁面都加上【到最底部】按鈕在最右下方。

在 .\themes\Butterfly\layout\includes\rightside.pug，於最底添加這兩行：

Code

if !is_post()
  i.fa.fa-arrow-down#go-down(title=_p("rightside.back_to_bottom") aria-hidden="true")

在.\themes\Butterfly\source\js\main.js，添加：

Javascript

// go down smooth scroll
$('#go-down').on('click', function () {
  scrollTo('footer')
})

文章網址名稱、文章位置整理

所有發佈的文章自動生成在 .\source\_posts 這個 folder。
但排序雜亂無章，而且部署到 github 後，所有文章都散佈在第一層，很亂。
想文章原檔案按照日期排序，但不影響文章網址名稱(在網址中不顯示日期），並且在 github 自動生成一個名叫 post 的folder裝放所有文章原檔案。想要達到像下面 tree structure 這樣：

Code

\---_posts
    |
    \---post
        +---2020-02-13-build-github-hexo-butterfly-record
        |       build-github-hexo-butterfly-record.md
        |       
        \---2020-02-14-my-custom-config-on-hexo-butterfly-theme
                my-custom-config-on-hexo-butterfly-theme.md

方法是在 ./config.yml 裡，把這兩選項更改成以下：

yml

permalink: post/:title/  # 在github自動生成一個名叫post的folder裝放所有文章原檔案

new_post_name: post/:year-:month-:day-:title/:title.md  # 在你的電腦儲存位置，會達成以上 tree structure 那樣

生成 sitemap - atom.xml

在 bash 中輸入以下命令：

bash

npm install hexo-generator-feed --save

在 ./config.yml 裡，添加以下：

yml

feed:
  type: atom
  path: atom.xml
  limit: 10
  hub:
  content:
  content_limit: 250
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

製作 404 page

把你想遇到 404 時轉跳的頁面命名為 404.html，把它放在 .\source 這個folder裡。
然後在 ./config.yml 裡，設定：
yml
skip_render:
- 404.html
- README.md
- robots.txt
由於我還創建了不需渲染的 README.md 和 robots.txt，所以把它們也設定在 skip_render 底下。

大概就是這樣，分享完畢~