hexo-theme-butterfly 安裝文檔（三）主題配置

本文章转载自https://jerryc.me/posts/4aa8abbe/#%E4%BB%A3%E7%A2%BC%E9%AB%98%E4%BA%AE%E4%B8%BB%E9%A1%8C

本教程更新於 2020 年 03 月 28 日
Butterfly 已經升級到 V2.2.5
為了方便我回復大家的問題和集中管理，此文章的評論關閉。
如有跟主題相關的問題，可以在 Github Issues 或者留言板上反饋 / 詢問

關於主題自定義的問題，建議仔細觀察主題代碼的寫法，自己動手操作，不懂的可以 Google，我不一定會回答你的問題，請見諒。

很多人希望能有交流平台可以進行討論。因此，我開通了一個 QQ 群，有興趣的可以加入。
QQ 群連接

文檔目錄
快速開始
 主題頁面
 主題配置
 主題問答、打賞名單
 主題更新日誌

配置文件説明

站點配置文件_config.yml 是 hexo 工作目錄下的主配置文件 (還不知道是哪裏的，自己 google)
butterfly.yml 是 Butterfly 的配置文件。它需要你手動將主題目錄下的_config.yml 文件複製到 hexo 工作目錄的 source/_data/butterfly.yml 中。如果文件或者文件夾不存在，需要手動創建。

語言

修改站點配置文件 _config.yml

默認語言是 en

主題支持三種語言

default(en)
zh-CN (簡體中文)
zh-TW (繁體中文)

網站資料

修改網站各種資料，例如標題、副標題和郵箱等個人資料，請修改博客根目錄的_config.yml

導航菜單

配置 butterfly.yml

yaml

menu:
  Home: / || fa fa-home
  Archives: /archives/ || fa fa-archive
  Tags: /tags/ || fa fa-tags
  Categories: /categories/ || fa fa-folder-open
  Link: /link/ || fa fa-link
  About: /about/ || fa fa-heart
  List||fa fa-list:
    - Music || /music/ || fa fa-music
    - Movie || /movies/ || fa fa-film

必須是 /xxx/，後面 || 分開，然後寫圖標名。菜單名稱可自己修改
格式：
顯示名稱:
路徑 ||icon
sub-menu 格式
名稱 ||icon:
名稱 || 路徑 || icon

注意： 導航的文字可自行更改

例如：

markdown

menu:
  首頁: / || fa fa-home
  時間軸: /archives/ || fa fa-archive
  標籤: /tags/ || fa fa-tags
  分類: /categories/ || fa fa-folder-open
  清單||fa fa-heartbeat:
    - 音樂 || /music/ || fa fa-music
    - 照片 || /Gallery/ || fa fa-picture-o
    - 電影 || /movies/ || fa fa-film
  友鏈: /link/ || fa fa-link
  關於: /about/ || fa fa-heart

代碼

代碼高亮主題

Butterfly 支持了 Material Theme 全部 5 種代碼高亮樣式：

default
darker
pale night
light
ocean

配置 butterfly.yml

yaml

1	highlight_theme: light

default

darker

pale night

light

ocean

代碼複製

主題支持代碼複製功能

配置 butterfly.yml

yaml

1	highlight_copy: true

代碼框展開 / 關閉

在默認情況下，代碼框自動展開，可設置是否所有代碼框都關閉狀態，點擊 > 可展開代碼

配置 butterfly.yml

yaml

1	highlight_shrink: true #代碼框不展開，需點擊 '>' 打開

highlight_shrink: true

highlight_shrink: false

highlight_shrink: none

代碼換行

在默認情況下，hexo-highlight 在編譯的時候不會實現代碼自動換行。如果你不希望在代碼塊的區域裏有橫向滾動條的話，那麼你可以考慮開啟這個功能。

配置 butterfly.yml

yaml

1	code_word_wrap: true

然後找到你站點的 Hexo 配置文件_config.yml，將 line_number 改成 false:

yaml

highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

設置 code_word_wrap 之前:

設置 code_word_wrap 之後:

社交圖標

Butterfly 支持 font-awesome v4 和 font-awesome v5. 如需開啟 font-awesome v5, 需要在 Butterfly.yml 上開啟

yaml

# fontawesome圖標
# 默認使用的是 fontawesome v4版本的圖標
fontawesome_v5:
  enable: true

無論 V4 還是 V5, 書寫格式都是一樣的圖標名：url || 描述性文字

yaml

1
2
3

social:
  fa fa-github: https://github.com/jerryc127 || Github
  fa fa-rss: /atom.xml || RSS鏈接

圖標名可在這尋找

PC:

Mobile:

主頁文章節選 (自動節選和文章頁 description)

因為主題 UI 的關係，主頁文章節選只支持自動節選和文章頁description。優先選擇自動節選。

在 butterfly.yml 裏可以開啟 auto_excerpt 的選項，你的文章將會在自動截取部分顯示在主頁。（默認顯示 150 個字）。

yaml

1
2
3

auto_excerpt:
  enable: true
  length: 150

如果沒有開啟自動節選，則會顯示文章頁 front-matter 裏面設置的 description。

注意：如果開啟了自動節選功能，代碼塊的顯示將有可能不正常。

頂部圖

頂部圖有 2 種配置：具體 url 和（留空，true 和 false，三個效果一樣）

page 頁

當具體 url 時

主頁的頂部圖可以在 Butterfly.yml 設置 index_img

archives 頁的頂部圖可以在 Butterfly.yml 設置 archive_img

其他 page 頁的頂部圖可以在各自的 md 頁面設置 front-matter 中的 top_img

頁面如果沒有設置各自的 top_img，則會顯示 default_top_img 圖片

當頂部圖留空，true 和 false

主頁會顯示純顏色的頂部圖

其他 page 的頂部圖沒有設置時，也會顯示純顏色的頂部圖

post 頁

post 頁的頂部圖會優先顯示各自 front-matter 中的 top_img, 如果沒有設置，則會縮略圖（即各自 front-matter 中的 cover)，如果沒有則會顯示顯示 default_top_img 圖片

文章相關項

這個選項是用來顯示文章的相關信息的。

配置 butterfly.yml

yaml

post_meta:
  page:
    date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    categories: true # true or false 主頁是否顯示分類
    tags: true # true or false 主頁是否顯示標籤
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤

在文章頂部的資料，

date_type: 可設置文章日期顯示創建日期 (created) 或者更新日期 (updated) 或者兩種都顯示 (both)

categories 是否顯示分類

tags 是否顯示標籤

文章版權

為你的博客文章展示文章版權和許可協議。

配置 butterfly.yml

yaml

post_copyright:
  enable: true
  decode: false
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

由於 Hexo 4.1 開始，默認對網址進行解碼，以至於如果是中文網址，會被解碼，可設置 decode: true 來顯示中文網址。

如果有文章（例如：轉載文章）不需要顯示版權，可以在文章 Front-matter 單獨設置

yaml

1	copyright: false

版權顯示截圖

文章打賞

在你每篇文章的結尾，可以添加打賞按鈕。相關二維碼可以自行配置

配置 butterfly.yml

yaml

reward:
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.jpg
        text: 微信
    - itemlist:
        img: /img/alipay.jpg
        text: 支付寶

文章封面

文章的 markdown 文檔上，在 Front-matter 添加 cover, 並填上要顯示的圖片地址。
如果不配置 cover, 可以設置顯示默認的 cover.

如果不想在首頁顯示 cover, 可以設置為 false

配置 butterfly.yml

yaml

cover:
  # 是否顯示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面顯示的位置
  # 三個值可配置 left , right , both
  position: both
  # 當沒有設置cover時，默認的封面顯示
  default_cover:

當配置多張圖片時，會隨機選擇一張作為 cover. 此時寫法應為

yaml

default_cover:
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

left

right

both

文章隱藏

2.1.0 版本以上支持

參考 printempw/hexo-hide-posts，如果想要隱藏文章，可以在文章的 Front-matter 添加

Code

1	hide: true

頭像

配置 butterfly.yml

yaml

1
2
3

avatar:
    img: /img/avatar.png
    effect: true # 頭像會一直轉圈

圖片描述

可開啓圖片 Figcaption 描述文字顯示

配置 butterfly.yml

yaml

1	photofigcaption: true

博客年份

since 是一個來展示你站點起始時間的選項。它位於頁面的最底部。

配置 butterfly.yml

yaml

1	since: 2018

頁腳自定義文本

footer_custom_text 是一個給你用來在頁腳自定義文本的選項。通常你可以在這裏寫聲明文本等。支持 HTML。

配置 butterfly.yml

yaml

1	footer_custom_text: Hi, welcome to my <a href="https://jerryc.me/">blog</a>!

ICP

對於部分有備案的域名，可以在 ICP 配置顯示。

配置 butterfly.yml

yaml

ICP:
  enable: true
  url: http://www.beian.miit.gov.cn/state/outPortal/loginPortal.action
  text: 粵ICP備xxxx
  icon: /img/icp.png

右下角按鈕

簡繁轉換

簡體繁體互換

右下角會有簡繁轉換按鈕。

配置 butterfly.yml

yaml

translate:
  enable: true
  # 默認按鈕顯示文字(網站是簡體，應設置為'default: 繁')
  default: 簡
  #網站默認語言，1: 繁體中文, 2: 簡體中文
  defaultEncoding: 1
  #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
  translateDelay: 0
  #博客網址
  cookieDomain: "https://jerryc.me/"
  #當文字是簡體時，按鈕顯示的文字
  msgToTraditionalChinese: "繁"
  #當文字是繁體時，按鈕顯示的文字
  msgToSimplifiedChinese: "簡"

簡體

繁體

夜間模式

右下角會有夜間模式按鈕

配置 butterfly.yml

yaml

# dark mode
darkmode:
  enable: true
  # dark mode和 light mode切換按鈕
  button: true
  # 自動切換 dark mode和 light mode
  # autoChangeMode: 1  跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
  # autoChangeMode: 2  只按照時間晚上6點到早上6點之間切換為 dark mode
  # autoChangeMode: false 取消自動切換
  autoChangeMode: false

V2.0.0 開始增加一個選項，可開啟自動切換 light mode 和 dark mode
autoChangeMode: 1 跟隨系統而變化，不支持的瀏覽器 / 系統將按照時間晚上 6 點到早上 6 點之間切換為 dark mode
autoChangeMode: 2 只按照時間晚上 6 點到早上 6 點之間切換為 dark mode, 其餘時間為 light mode
autoChangeMode: false 取消自動切換

閲讀模式

閲讀模式下會去掉除文章外的內容，避免干擾閲讀。

只會出現在文章頁面，右下角會有閲讀模式按鈕。

配置 butterfly.yml

yaml

1 2	readmode: enable: true

側邊欄設置

側邊排版

可自行決定哪個項目需要顯示，可決定位置，也可以設置不顯示側邊欄。

配置 butterfly.yml

yaml

aside:
  enable: true
  mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
  position: right # left or right
  card_author: true
  card_announcement: true
  card_recent_post: true
  card_categories: true
  card_tags: true
  card_archives: true
  card_webinfo: true

left

right

訪問人數 busuanzi (UV 和 PV)

訪問 busuanzi 的官方網站查看更多的介紹。

配置 butterfly.yml

yaml

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

運行時間

網頁已運行時間

配置 butterfly.yml

yaml

runtimeshow:
  enable: true
  start_date: 6/7/2018 00:00:00  
  ##網頁開通時間
  #格式: 月/日/年 時間
  #也可以寫成 年/月/日 時間

標籤外掛（Tag Plugins）

標籤外掛是 Hexo 獨有的功能，並不是標準的 Markdown 格式。
以下的寫法，只適用於 Butterfly 主題，用在其它主題上不會有效果，甚至可能會報錯。使用前請留意

Note (Bootstrap Callout)

移植於 next 主題

配置

配置 butterfly.yml

yaml

note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

用法


            
Any content (support inline tags too.io).

          

[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

例如：

markdown


            
default 提示塊標籤

          


            
primary 提示塊標籤

          


            
success 提示塊標籤

          


            
info 提示塊標籤

          


            
warning 提示塊標籤

          


            
danger 提示塊標籤

style: simple

style: modern

style: flat

style: disabled

Gallery 相冊圖庫

2.2.0 以上提供

一個圖庫集合。

寫法

Code

name：圖庫名字
description：圖庫描述
link：連接到對應相冊的地址
img-url：圖庫封面的地址

例如：

Code

Gallery 相冊

2.0.0 以上提供

區別於舊版的 Gallery 相冊，新的 Gallery 相冊會自動根據圖片長度進行排版，書寫也更加方便，與 markdown 格式一樣。可根據需要插入到相應的 md。

寫法:

1
2
3


markdown 圖片格式

例如







![](https://picjumbo.com/wp-content/uploads/modern-graphic-designer-essentialsfreestockphotospicjumbo_HNCK4919-2210x1474.jpg)

tag-hide

2.2.0 以上提供

如果你想把一些文字、內容隱藏起來，並提供按鈕讓用户點擊顯示。可以使用這個標籤外掛。

寫法：

inline 在文本里面添加按鈕隱藏內容，只限文字

( content 不能包含當引號，可用 ')

markdown

1	display content

content: 文本內容
display: 按鈕顯示的文字 (可選)
bg: 按鈕的背景顏色 (可選)
color: 按鈕文字的顏色 (可選)

block 獨立的 block 隱藏內容，可以隱藏很多內容，包括圖片，代碼塊等等

markdown

1
2
3

display
    
content

content: 文本內容
display: 按鈕顯示的文字 (可選)
bg: 按鈕的背景顏色 (可選)
color: 按鈕文字的顏色 (可選)

例如：

inline

markdown

1
2
3

哪個英文字母最酷？ 查看答案
    因為西裝褲(C裝酷)

門裏站着一個人? Click
    閃

block

Code

查看答案

mermaid

使用 mermaid 標籤可以繪製 Flowchart（流程圖）、Sequence diagram（時序圖）、Class Diagram（類別圖）、State Diagram（狀態圖）、Gantt（甘特圖）和 Pie Chart（圓形圖），具體可以查看 mermaid 文檔

寫法：

markdown

1
2
3


          
內容

例如：

markdown


          
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

gitalk:
  enable: true
  client_id: 你的client id 
  client_secret: 你的client secret
  repo: 你的github倉庫
  owner: 你的github用户名
  admin: 該倉庫的擁有者或協作者
  language: zh-CN # en , zh-CN , zh-TW
  perPage: 10 # Pagination size, with maximum 100.
  distractionFreeMode: false # Facebook-like distraction free mode.
  pagerDirection: last # Comment sorting direction, available values are last and first.
  createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
  count: true # top_img顯示評論數

Valine

遵循 Valine 的指示去配置你的 LeanCloud 應用。以及查看相應的配置説明。

然後配置 butterfly.yml:

yaml

valine:
  enable: false # if you want use valine,please set this value is true
  appId: # leancloud application app id
  appKey: # leancloud application app key
  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-cn/en
  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: /img/comment_bg.png # valine background
  count: true # top_img顯示評論數

Utterances

與 Gitalk 一樣，基於 GitHub issues 的評論工具。相對於 Gitalk, 其相對需要權限較少。具體配置可參考 Utterances。

配置 butterfly.yml:

markdown

utterances:
  enable: false
  repo:
  # 可選 pathname/url/title/og:title
  issue_term: pathname
  # 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark

只能選擇一個分享服務商

找到你的 pub-id

配置 butterfly.yml

yaml

1
2
3

addThis:
  enable: true # or false
  pubid: 你的pub-id

Sharejs

如果你不知道 sharejs，看看它的説明。

配置 butterfly.yml

yaml

1
2
3

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要顯示的內容

Addtoany

可以到 addtoany 查看使用説明

yaml

addtoany:
  enable: false
  item:   # 顯示的內容
    - facebook
    - twitter
    - wechat
    - sina_weibo
    - facebook_messenger
    - email
    - copy_link

搜索系統

Algolia

你需要安裝 hexo-algolia 或 hexo-algoliasearch. 根據它們的説明文檔去做相應的配置。
配置 butterfly.yml

yaml

algolia_search:
  enable: true
  hits:
    per_page: 6

  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
    hits_stats: "${hits} results found in ${time} ms"

本地搜索

你需要安裝 hexo-generator-search. 根據它的文檔去做相應配置。注意格式只支持 xml。
配置 butterfly.yml

yaml

local_search:
  enable: false
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

網站驗證

如果需要搜索引擎收錄網站，可能需要登錄對應搜索引擎的管理平台進行提交。
各自的驗證碼可從各自管理平台拿到

配置 butterfly.yml

yaml

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
yandex_site_verification:

# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:

# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:

分析統計

百度統計

登錄百度統計的官方網站
找到你百度統計的統計代碼

配置 butterfly.yml

yaml

1	baidu_analytics: 你的代碼

谷歌分析

登錄谷歌分析的官方網站
找到你的谷歌分析的跟蹤 ID

配置 butterfly.yml

yaml

1	google_analytics: 你的代碼 # 通常以`UA-`打頭

騰訊分析

登錄騰訊分析的官方網站
找到你的站點 ID

配置 butterfly.yml

Code

1 2	# Tencent_analytics ID tencent_analytics:

MathJax

建議使用 KaTex 獲得更好的效果，下文有介紹！

配置 butterfly.yml:

yaml

mathjax:
  enable: true
  # true 表示每一頁都加載mathjax.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
  per_page: false

如果 per_page 設為 true, 則每一頁都會加載 Mathjax 服務。設為 false，則需要在文章 Front-matter 添加 mathjax: true, 對應的文章才會加載 Mathjax 服務。

然後你需要修改一下默認的 markdown 渲染引擎來實現 MathJax 的效果。

查看: hexo-renderer-kramed

以下操作在你 hexo 博客的目錄下 (不是 Butterfly 的目錄！):

效果：

KaTeX

首先禁用 MathJax（如果你配置過 MathJax 的話），然後修改你的 butterfly.yml 以便加載 katex.min.css:

yaml

katex:
  enable: true
  # true 表示每一頁都加載katex.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true

你不需要添加 katex.min.js 來渲染數學方程。相應的你需要卸載你之前的 hexo 的 markdown 渲染器以及 hexo-math，然後安裝新的 hexo-renderer-markdown-it-plus:

yaml

# 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json裏找到hexo的markdwon渲染器，並將其卸載
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save

# 卸載 `hexo-math`
npm un hexo-math --save

# 然後安裝 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

注意到 hexo-renderer-markdown-it-plus已經無人持續維護，所以我們使用 @upupming/hexo-renderer-markdown-it-plus。這份 fork 的代碼使用了 @neilsustc/markdown-it-katex同時它也是 VSCode 的插件 Markdown All in One 所使用的，所以我們可以獲得最新的 KaTex 功能例如 \tag{}。

你還可以通過 @neilsustc/markdown-it-katex控制 KaTeX 的設置，所有可配置的選項參見 https://katex.org/docs/options.html。比如你想要禁用掉 KaTeX 在命令行上輸出的宂長的警告信息，你可以在根目錄的 _config.yml 中使用下面的配置將 strict 設置為 false:

yaml

markdown_it_plus:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      enable: true
      options:
        strict: false

當然，你還可以利用這個特性來定義一些自己常用的 macros。

因為 KaTeX 更快更輕量，因此沒有 MathJax 的功能多（比如右鍵菜單）。為那些使用 MathJax 的用户，我們也為 KaTeX 默認添加了 Copy As TeX Code 的功能。

美化 / 特效

自定義主題色

可以修改大部分 UI 顏色

配置 butterfly.yml，比如：

顏色值必須被雙引號包裹，就像 "#000" 而不是#000。否則將會在構建的時候報錯！

yaml

theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"

網站背景

默認顯示白色，可設置圖片或者顏色

配置 butterfly.yml

yaml

# 圖片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 顏色 background: '#49B202'
# 留空 顯示白色
background:

background:'#49B202'

background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

footer 的背景會與 top_img 的一致，當設置 false 時，將與主題色一致。

配置 butterfly.yml

yaml

1 2	# footer是否顯示圖片背景(與top_img一致) footer_bg: true

true

打字效果

打字效果 activate-power-mode

配置 butterfly.yml

yaml

# 打字效果
activate_power_mode:
  enable: false
  colorful: true # 冒光特效
  shake: true # 抖動特效

靜止綵帶

好看的綵帶背景，可設置每次刷新更換綵帶，或者每次點擊更換綵帶

配置 butterfly.yml

yaml

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #設置是否每次點擊都更換綵帶
  mobile: false # false 手機端不顯示 true 手機端顯示

相關配置可查看 canvas_ribbon

動態綵帶

好看的綵帶背景，會飄動

配置 butterfly.yml

yaml

1
2
3

canvas_ribbon_piao:
  enable: true
  mobile: false # false 手機端不顯示 true 手機端顯示

canvas-nest

配置 butterfly.yml

yaml

canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false # false 手機端不顯示 true 手機端顯示

鼠標點擊效果

煙花

配置 butterfly.yml

yaml

1 2	fireworks: enable: true

愛心

配置 butterfly.yml

yaml

1
2
3

# 點擊出現愛心
click_heart:
  enable: true

文字

配置 butterfly.yml

yaml

# 點擊出現文字，文字可自行修改
ClickShowText:
  enable: false
  text: 
    - 富強
    - 民主
    - 文明
    - 和諧
    - 自由
    - 平等
    - 公正
    - 法治
    - 愛國
    - 敬業
    - 誠信
    - 友善
  fontSize: 15px

頁面美化

會改變 ol、ul、h1-h5 的樣式

配置 butterfly.yml

yaml

# 美化頁面顯示
beautify:
  enable: true
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

title-prefix-icon 填寫的是 fontawesome 的 icon 的 Unicode 數。

未開啟美化

開啟美化

自定義字體

可自行設置字體的 font-family

配置 butterfly.yml

yaml

font:
  enable: true
  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number

網站副標題

適用於版本號 >= V1.2.0
V2.0.0 開始增加一些第三方 api 調用

可設置主頁中顯示的網站副標題或者喜歡的座右銘。

配置 butterfly.yml

yaml

# 主頁subtitle
subtitle:
  enable: true
  # 打字效果
  effect: true
  # 循環或者只打字一次
  loop: false
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用金山詞霸的每日一句（簡體）
  # source: 2  調用一言網的一句話（簡體） #https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: 2
  # (如果有英文逗號' , '，請使用轉義字符 &#44;)
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 今日事&#44;今日畢
    - Never put off till tomorrow what you can do today

主頁 top_img 顯示大小

適用於版本號 >= V1.2.0

默認的顯示為全屏。site-info 的區域會居中顯示

yaml

# 主頁設置
# 默認top_img全屏，site_info在中間
# 使用默認, 都無需填寫（建議默認）
index_site_info_top: # 主頁標題距離頂部距離  例如 300px/300em/300rem/10%
index_top_img_height:  #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比

注意：index_top_img_height 的值不能使用百分比。
2 個都不填的話，會使用默認值

舉例，當

yaml

1	index_top_img_height: 400px

效果

PWA

要為 Butterfly 配上 PWA 特性，你需要如下幾個步驟:

打開 hexo 工作目錄
npm install hexo-offline --save 或者 yarn add hexo-offline
修改_config.yml 在站點_config.yml 中增加以下內容。

yaml

# offline config passed to sw-precache.
offline:
  maximumFileSizeToCacheInBytes: 10485760 # 緩存的最大文件大小，以字節為單位
  staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}
  # 靜態文件合集，如果你的站點使用了例如webp格式的文件，請將文件類型添加進去。
  stripPrefix: public
  verbose: true
  runtimeCaching:
    # CDNs - should be cacheFirst, since they should be used specific versions so should not change
    - urlPattern: /* # 如果你需要加載CDN資源，請配置該選項，如果沒有，可以不配置。
      handler: cacheFirst
      options:
        origin: your_websie_url # 可替換成你的 url

更多內容請查看 hexo-offline 的官方文檔

在 butterfly.yml 中開啟 pwa 選項。

yaml

pwa:
  enable: true
  manifest: /img/pwa/manifest.json
  theme_color: "#fff"
  apple_touch_icon: /img/pwa/apple-touch-icon.png
  favicon_32_32: /img/pwa/32.png
  favicon_16_16: /img/pwa/16.png
  mask_icon: /img/pwa/safari-pinned-tab.svg

在創建 source/ 目錄中創建 manifest.json 文件。

json

{
    "name": "string", //應用全稱
    "short_name": "Junzhou", //應用簡稱
    "theme_color": "#49b1f5", //匹配瀏覽器的地址欄顏色
    "background_color": "#49b1f5",//加載應用時的背景色
    "display": "standalone",//首選顯示模式 其他選項有：fullscreen,minimal-ui,browser
    "scope": "/",
    "start_url": "/",
    "icons": [ //該數組指定icons圖標參數，用來時適配不同設備（需為png，至少包含一個192px*192px的圖標）
        {
          "src": "images/pwaicons/36.png", //圖標文件的目錄，需在source/目錄下自行創建。
          "sizes": "36x36",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/48.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
      ],
      "splash_pages": null //配置自定義啟動動畫。
  }

你也可以通過 Web App Manifest 快速創建 manifest.json。（Web App Manifest 要求至少包含一個 512*512 像素的圖標）

可以通過 Chrome 插件 Lighthouse 檢查 PWA 配置是否生效以及配置是否正確。
- 打開博客頁面
- 啟動 Lighthouse 插件 (Lighthouse 插件要求至少包含一個 512*512 像素的圖標)

關於 PWA（漸進式增強 Web 應用）的更多內容請參閲 Google Tools for Web Developers

字數統計

要為 Butterfly 配上字數統計特性，你需要如下幾個步驟:

打開 hexo 工作目錄
npm install hexo-wordcount --save or yarn add hexo-wordcount
配置 butterfly.yml:

yaml

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

文章置頂

要為你一些文章置頂，你需要如下步驟:

打開 hexo 工作目錄
npm uninstall hexo-generator-index --save 然後 npm install hexo-generator-index-pin-top --save
你要在文章的 front-matter 區域裏添加 top: True 屬性來把這篇文章置頂。
你可以參考 hexo-generator-index-pin-top 這個倉庫來了解更多細節。

舉個例子:

你的某篇文章開頭如下：

title: xxxx
tags:
  - xxx
date: 2018-08-08 08:08:08
---
// ....

現在把 top: True 加進去：

title: xxxx
tags:
  - xxx
date: 2018-08-08 08:08:08
top: True
---
// ....

圖片大圖查看模式

fancybox

配置 butterfly.yml

yaml

1
2
3

# fancybox http://fancyapps.com/fancybox/3/
fancybox:
  enable: true

medium_zoom

配置 butterfly.yml

yaml

1 2	medium_zoom: enable: true

Snackbar 彈窗

Snackbar 彈窗，根據自己愛好開啟

配置 butterfly.yml

yaml

# Snackbar 彈窗
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode時彈窗背景
  bg_dark: '#2d3035' #dark mode時彈窗背景

未開啟 Snackbar

開啟 Snackbar

豆瓣

很多人使用 hexo-douban 這款插件。但是該插件是直接生成相應的網頁，而不會去讀取對應的 markdown 文件。因此，可在設置裏進行相應的配置。

配置 butterfly.yml

markdown

# 如果你有使用hexo-douban，可配置這個
douban:
  meta: true
  movies_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
  books_img:
  games_img:

由於豆瓣開啟了反盜鏈，因此，一些瀏覽器（safari）會無法顯示圖片，可把 meta 設為 true。但此操作會導致一些插件失效（例如：不蒜子）。

文章作者: Wu Fei

文章链接: http://linuxwf.com/2020/04/08/exo-theme-butterfly-%E5%AE%89%E8%A3%9D%E6%96%87%E6%AA%94%EF%BC%88%E4%B8%89%EF%BC%89%E4%B8%BB%E9%A1%8C%E9%85%8D%E7%BD%AE/

hexo hexo主题

打赏

微信
支付宝

配置文件説明

語言

網站資料

導航菜單

代碼

代碼高亮主題

代碼複製

代碼框展開 / 關閉

代碼換行

社交圖標

主頁文章節選 (自動節選和文章頁 description)

頂部圖

page 頁

當具體 url 時

當頂部圖留空，true 和 false

post 頁

文章相關項

文章版權

文章打賞

文章封面

文章隱藏

頭像

TOC

為特定的文章配置是否顯示 TOC 和特定的目錄章節數字

設置是否自動打開 TOC

相關文章

圖片描述

Footer 設置

博客年份

頁腳自定義文本

ICP

右下角按鈕

簡繁轉換

夜間模式

閲讀模式

側邊欄設置

側邊排版

訪問人數 busuanzi (UV 和 PV)

運行時間

標籤外掛（Tag Plugins）

Note (Bootstrap Callout)

配置

用法

Gallery 相冊圖庫

Gallery 相冊

tag-hide

mermaid

評論

Disqus

Disqusjs

Laibili（來必力）

Gitalk

Valine

Utterances

分享

AddThis

Sharejs

Addtoany

搜索系統

Algolia

本地搜索

網站驗證

分析統計

百度統計

谷歌分析

騰訊分析

廣告

谷歌廣告

手動廣告配置

MathJax

KaTeX

美化 / 特效

自定義主題色

網站背景

footer 背景

打字效果

靜止綵帶

動態綵帶

canvas-nest

鼠標點擊效果