avatar

hexo-theme-butterfly 安裝文檔(三)主題配置

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

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

很多人希望能有交流平台可以進行討論。因此,我開通了一個Telegram Group,有興趣的可以加入。
https://t.me/hexo_butterfly

配置文件説明

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

語言

修改站點配置文件 _config.yml

默認語言是 en

主題支持三種語言

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

網站資料

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

導航菜單

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
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

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

例如:

1
2
3
4
5
6
7
8
9
10
11
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

1
highlight_theme: light

default

darker

pale night

light

ocean

代碼複製

主題支持代碼複製功能

配置butterfly.yml

1
highlight_copy: true

代碼框展開/關閉

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

配置butterfly.yml

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

highlight_shrink: true

highlight_shrink: false

highlight_shrink: none

代碼換行

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

配置butterfly.yml

1
code_word_wrap: true

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

1
2
3
4
5
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace:

設置code_word_wrap之前:

設置code_word_wrap之後:

社交圖標

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

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

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

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

圖標名可在這尋找

PC:

Mobile:

1560603353743

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

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

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

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

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
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單獨設置

1
copyright: false

版權顯示截圖

文章打賞

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

配置butterfly.yml

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
7
8
9
10
cover:
# 是否顯示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面顯示的位置
# 三個值可配置 left , right , both
position: both
# 當沒有設置cover時,默認的封面顯示
default_cover:

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

1
2
3
4
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添加

1
hide: true

頭像

配置butterfly.yml

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

TOC

在文章頁,會有一個目錄,用於顯示TOC。 手機端默認顯示按鈕。

配置butterfly.yml

1
2
3
toc:
enable: true
number: true #顯示章節數字

PC

Mobile

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

在你的文章md文件的頭部,加入toc_numbertoc項,並配置true或者false即可。

toc是否顯示文章TOC

toc_number 是否顯示章節數

配置之後你的特定的文章將會擁有它自己的目錄數字的顯示與否,而不會受全局的配置影響。

enable: true

number: false

設置是否自動打開TOC

可選擇進入文章頁面時,是否自動打開sidebar顯示TOC

1
2
auto_open_sidebar:
enable: true

相關文章

相關文章推薦的原理是根據文章tags的比重來推薦

配置butterfly.yml

1
2
3
4
related_post:
enable: true
limit: 6 # 顯示推薦文章數目
date_type: created # or created or updated 文章日期顯示創建日或者更新日

圖片描述

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

配置butterfly.yml

1
photofigcaption: true

博客年份

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

配置butterfly.yml

1
since: 2018

頁腳自定義文本

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

配置butterfly.yml

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

ICP

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

配置butterfly.yml

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

右下角按鈕

簡繁轉換

簡體繁體互換

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

配置butterfly.yml

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

簡體

繁體

夜間模式

右下角會有夜間模式按鈕

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
# 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

1
2
readmode:
enable: true

側邊欄設置

側邊排版

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

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
busuanzi:
site_uv: true
site_pv: true
page_pv: true

運行時間

網頁已運行時間

配置butterfly.yml

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

標籤外掛(Tag Plugins)

標籤外掛是Hexo獨有的功能,並不是標準的Markdown格式。

以下的寫法,只適用於Butterfly主題,用在其它主題上不會有效果,甚至可能會報錯。使用前請留意

Note (Bootstrap Callout)

移植於next主題

配置

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
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

用法

1
2
3
4
5
6
7
8
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

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

All parameters are optional.

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示塊標籤
{% endnote %}

{% note primary no-icon %}
primary 提示塊標籤
{% endnote %}

{% note success %}
success 提示塊標籤
{% endnote %}

{% note info %}
info 提示塊標籤
{% endnote %}

{% note warning %}
warning 提示塊標籤
{% endnote %}

{% note danger %}
danger 提示塊標籤
{% endnote %}

style: simple

20200105232825.png

style: modern

20200105233018.png

style: flat

20200105233145.png

style: disabled

20200105233310.png

Gallery相冊圖庫

2.2.0以上提供

一個圖庫集合。

寫法

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
  • name:圖庫名字
  • description:圖庫描述
  • link:連接到對應相冊的地址
  • img-url:圖庫封面的地址

例如:

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup '壁紙' '收藏的一些壁紙' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '關於漫威的圖片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '關於OH MY GIRL的圖片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

Gallery相冊

2.0.0以上提供

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

寫法:

1
2
3
{% gallery %}
markdown 圖片格式
{% endgallery %}

例如

1
2
3
4
5
6
7
8
{% gallery %}
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-scary-pumpkin-hand-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-fresh-fish-dinner-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-mountain-cloud-landscape-900x600.jpg)
![](https://picjumbo.com/wp-content/uploads/iphone-free-stock-photos-2210x3315.jpg)
![](https://picjumbo.com/wp-content/uploads/young-millennial-girl-drinking-lemonade-and-overlooking-the-city-2210x1473.jpg)
![](https://picjumbo.com/wp-content/uploads/modern-graphic-designer-essentials_free_stock_photos_picjumbo_HNCK4919-2210x1474.jpg)
{% endgallery %}

tag-hide

2.2.0以上提供

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

寫法:

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

( content不能包含當引號,可用&apos;)

1
{% hideInline content,display,bg,color %}
  • content: 文本內容
  • display: 按鈕顯示的文字(可選)
  • bg: 按鈕的背景顏色(可選)
  • color: 按鈕文字的顏色(可選)

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

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本內容
  • display: 按鈕顯示的文字(可選)
  • bg: 按鈕的背景顏色(可選)
  • color: 按鈕文字的顏色(可選)

例如:

inline

1
2
3
哪個英文字母最酷? {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %}

門裏站着一個人? {% hideInline 閃 %}

block

1
2
3
4
5
6
7
8
9
10
11
12
{% hideBlock 查看答案 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}
{% endhideBlock %}

mermaid

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

寫法:

1
2
3
{% mermaid %}
內容
{% endmermaid %}

例如:

1
2
3
4
5
6
7
8
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}

評論

只能選擇一個評論服務商

Disqus

註冊 disqus,配置你自己的 disqus,然後在Butterfly裏開啟它。

配置butterfly.yml

1
2
3
4
disqus:
enable: true
shortname:
count: false # top_img顯示評論數

Disqusjs

與Disqus一樣,但由於Disqus在中國大陸無法訪問, 使用Disqusjs可以在無法訪問Disqus時顯示評論。具體可參考Disqusjs

配置butterfly.yml

1
2
3
4
5
6
7
8
9
disqusjs:
enable: true #開啟改為 true
shortname:
siteName:
apikey:
api: https://disqus.skk.moe/disqus/ #一般情況下無需修改 API 地址
admin:
adminLabel:
count: true # top_img顯示評論數

Laibili(來必力)

註冊來必力,配置你自己的來必力設置,然後在Butterfly裏開啟它。

配置butterfly.yml

1
2
3
laibili:
enable: true
uid:

laibili 的 uid 你能在這裏找到:

Gitalk

遵循 gitalk的指示去獲取你的 github Oauth 應用的 client id 和 secret 值。以及查看它的相關配置説明。

然後配置butterfly.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:

1
2
3
4
5
6
7
8
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

分享

只能選擇一個分享服務商

AddThis

找到你的 pub-id

配置butterfly.yml

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

Sharejs

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

配置butterfly.yml

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

Addtoany

可以到addtoany查看使用説明

1
2
3
4
5
6
7
8
9
10
addtoany:
enable: false
item: # 顯示的內容
- facebook
- twitter
- wechat
- sina_weibo
- facebook_messenger
- email
- copy_link

搜索系統

Algolia

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

  2. 配置butterfly.yml

1
2
3
4
5
6
7
8
9
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"

本地搜索

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

  2. 配置butterfly.yml

1
2
3
4
5
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 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:

分析統計

百度統計

  1. 登錄百度統計的官方網站

  2. 找到你百度統計的統計代碼

  1. 配置butterfly.yml
1
baidu_analytics: 你的代碼

谷歌分析

  1. 登錄谷歌分析的官方網站

  2. 找到你的谷歌分析的跟蹤 ID

  1. 配置butterfly.yml
1
google_analytics: 你的代碼 # 通常以`UA-`打頭

騰訊分析

  1. 登錄騰訊分析的官方網站

  2. 找到你的站點ID

  3. 配置butterfly.yml

    1
    2
    # Tencent_analytics ID
    tencent_analytics:

廣告

谷歌廣告

主題已集成谷歌廣告(自動廣告)

配置butterfly.yml

1
2
3
4
5
google_adsense:
enable: true
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
client: # 填入個人識別碼
enable_page_level_ads: true

手動廣告配置

主題預留了三個位置可供插入廣告,分別爲主頁文章(每三篇文章出現廣告)/aside公告之後/文章頁打賞之後。
把html代碼填寫到對應的位置

配置butterfly.yml

1
2
3
4
ad:
index:
aside:
post:

例如:

1
index: <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>


MathJax

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

配置butterfly.yml:

1
2
3
4
5
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:

1
2
3
4
5
6
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
# 替換 `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:

1
2
3
4
5
6
7
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。否則將會在構建的時候報錯!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
# 圖片格式 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

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

true

打字效果

打字效果activate-power-mode

配置butterfly.yml

1
2
3
4
5
# 打字效果
activate_power_mode:
enable: false
colorful: true # 冒光特效
shake: true # 抖動特效

靜止綵帶

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

配置butterfly.yml

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

相關配置可查看canvas_ribbon

動態綵帶

好看的綵帶背景,會飄動

配置butterfly.yml

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

canvas-nest

配置butterfly.yml

1
2
3
4
5
6
7
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

1
2
fireworks:
enable: true

愛心

配置butterfly.yml

1
2
3
# 點擊出現愛心
click_heart:
enable: true

文字

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 點擊出現文字,文字可自行修改
ClickShowText:
enable: false
text:
- 富強
- 民主
- 文明
- 和諧
- 自由
- 平等
- 公正
- 法治
- 愛國
- 敬業
- 誠信
- 友善
fontSize: 15px

頁面美化

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

配置butterfly.yml

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

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

未開啟美化

開啟美化

自定義字體

可自行設置字體的font-family

配置butterfly.yml

1
2
3
4
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 主頁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的區域會居中顯示

1
2
3
4
5
# 主頁設置
# 默認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個都不填的話,會使用默認值

舉例,當

1
index_top_img_height: 400px

效果

PWA

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

  1. 打開 hexo 工作目錄

  2. npm install hexo-offline --save 或者 yarn add hexo-offline

  3. 修改_config.yml 在站點_config.yml中增加以下內容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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的官方文檔

  1. butterfly.yml中開啟 pwa 選項。
1
2
3
4
5
6
7
8
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
  1. 在創建source/目錄中創建manifest.json文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
"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 像素的圖標)

  1. 可以通過Chrome插件Lighthouse檢查 PWA 配置是否生效以及配置是否正確。

    • 打開博客頁面
    • 啟動Lighthouse插件 (Lighthouse插件要求至少包含一個 512*512 像素的圖標)

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

字數統計

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

  1. 打開 hexo 工作目錄

  2. npm install hexo-wordcount --save or yarn add hexo-wordcount

  3. 配置butterfly.yml:

1
2
3
4
5
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true


文章置頂

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

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

舉個例子:

你的某篇文章開頭如下:

1
2
3
4
5
6
title: xxxx
tags:
- xxx
date: 2018-08-08 08:08:08
---
// ....

現在把top: True加進去:

1
2
3
4
5
6
7
title: xxxx
tags:
- xxx
date: 2018-08-08 08:08:08
top: True
---
// ....

圖片大圖查看模式

fancybox

配置butterfly.yml

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

fancybox.gif

medium_zoom

配置butterfly.yml

1
2
medium_zoom:
enable: true

medium_zoom.gif

Snackbar 彈窗

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

配置butterfly.yml

1
2
3
4
5
6
7
8
9
# 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_false.gif

開啟Snackbar

snackbar_true.gif

豆瓣

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

配置butterfly.yml

1
2
3
4
5
6
# 如果你有使用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。但此操作會導致一些插件失效(例如:不蒜子)。

文章作者: JerryC
文章鏈接: https://jerryc.me/posts/4aa8abbe/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 JerryC
打賞
  • 微信
    微信
  • 支付寶
    支付寶