📖 本教程更新於 2020 年 09 月 06 日

🦋 Butterfly 已經更新到 3.1.1

如果有安裝這兩個插件的,請卸載掉,會導致主題報錯。
hexo-injecthexo-neat


語言

修改站點配置文件 _config.yml

默認語言是 en

主題支持三種語言

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

網站資料

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

導航菜單

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10
menu:
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
- Music || /music/ || fas fa-music
- Movie || /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

必須是 /xxx/,後面||分開,然後寫圖標名。

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

例如:

1
2
3
4
5
6
7
8
9
10
11
menu:
首頁: / || fas fa-home
時間軸: /archives/ || fas fa-archive
標籤: /tags/ || fas fa-tags
分類: /categories/ || fas fa-folder-open
清單||fa fa-heartbeat:
- 音樂 || /music/ || fas fa-music
- 照片 || /Gallery/ || fas fa-images
- 電影 || /movies/ || fas fa-video
友鏈: /link/ || fas fa-link
關於: /about/ || fas fa-heart

代碼

代碼塊中的所有功能只適用於Hexo默認的highlight渲染

如果使用第三方的渲染器,不一定會有效

代碼高亮主題

Butterfly 支持6種代碼高亮樣式:

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

修改 主題配置文件

1
highlight_theme: light

darker

pale night

light

ocean

mac

mac light

image-20200731175026827

主題從3.0開始,支持使用自定義的代碼顔色。

目前Highlight官方提供了100多種CSS配色,如果你不喜歡主題默認的代碼配色,可以自己自定義。

Highlight提供的CSS列表:點擊

Highlight提供的CSS Demo: 點擊

1. 配置hljstrue

修改Hexo根目錄下的_config.yml

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

2. 配置highlight_themefalse

修改 主題配置文件

1
highlight_theme: false

3.下載和修改CSS文件

下載需要的 CSS 文件,CSS 可由這裏獲得

打開 CSS 文件,在開頭補上這些 CSS

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
/* 代碼框背景色和字體顔色,與hljs一樣就行 */
/* 必須配置(把下面.hljs的color和background複製到這裏來) */
#article-container pre,
#article-container figure.highlight {
background: xxx ;
color: xxx
}

/* 代碼框工具欄 (如果你關掉了copy、lang和shrink,可不用配置這個 */
#article-container figure.highlight .highlight-tools {
color: xxx;
background: xxx
}

/* 代碼框行數(如果已經關掉line_number,可以不用配置這個) */
#article-container figure.highlight .gutter pre {
background-color: xxx;
color: xxx
}

/* 代碼塊figcaption配置(hexo自帶標簽https://hexo.io/zh-tw/docs/tag-plugins.html#Code-Block) */
/* 不需要可以不用配置這個 */
#article-container figure.highlight figcaption a {
color: xxx !important
}

/* 代碼框滾動條 (需要可配置,默認為主題主顔色)*/
/* 不需要可以不用配置這個 */
#article-container figure.highlight table::-webkit-scrollbar-thumb {
background: #5c4627
}

把顔色修改成你需要的顔色

同時,找到.hljs, 在class名字前添加#article-container figure.highlight

1
2
3
4
5
#article-container figure.highlight .hljs {
xxxx
xxxx
xxxx
}

4.引入文件

修改 主題配置文件

1
2
3
inject:
head:
- <link rel="stylesheet" href="/self/xxxx.css">

在head裏引入CSS文件

運行Hexo就能看到修改的效果了

具體Demo可查看

自定義代碼配色

代碼複製

主題支持代碼複製功能

修改 主題配置文件

1
highlight_copy: true

代碼框展開/關閉

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

  • true 全部代碼框不展開,需點擊>打開
  • false 代碼狂展開,有>點擊按鈕
  • none 不顯示>按鈕

修改 主題配置文件

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

你也可以在post/page頁對應的markdown文件front-matter添加highlight_shrink來獨立配置。

主題配置文件中highlight_shrink 設為true時,可在front-matter添加highlight_shrink: false來單獨配置文章展開代碼框。

主題配置文件中highlight_shrink 設為false時,可在front-matter添加highlight_shrink: true來單獨配置文章收縮代碼框。

highlight_shrink: true

highlight_shrink: false

highlight_shrink: none

代碼換行

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

修改 主題配置文件

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 v5圖標.

書寫格式 圖標名:url || 描述性文字

1
2
3
social:
fab fa-github: https://github.com/xxxxx || Github
fas fa-envelope: mailto:xxxxxx@gmail.com || Email

圖標名可在這尋找

PC:

Mobile:

1560603353743

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

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

butterfly裏,有三種可供選擇

  1. description 只顯示description
  2. both 優先選擇description,如果沒有配置description,則顯示自動節選的內容
  3. auto_excerpt 只顯示自動節選

修改 主題配置文件

1
2
3
index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to config

description在front-matter裏添加

頂部圖

頂部圖有2種配置:具體url 和(留空,true和false,三個效果一樣)

page頁

當具體url時

主頁的頂部圖可以在主題配置文件中設置index_img

archives頁的頂部圖可以在主題配置文件中設置archive_img

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

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

配置中的 tag_imgcategory_img 分別是 子標籤頁 和 子分類 的 頂部圖配置,

如果你是想配置 tags頁categories頁的頂部圖,請到對應的 md 頁面設置front-matter中的top_img

當頂部圖留空,true和false

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

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

post頁

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

文章置頂

【推薦】hexo-generator-index從 2.0.0 開始,已經支持文章置頂功能。你可以在文章的front-matter區域裏添加sticky: 1屬性來把這篇文章置頂。數值越大,置頂的優先級越大。

當然,你也可以安裝第三方插件來實現這個功能(hexo-generator-index-pin-top 或者 hexo-generator-indexed)

如果使用hexo-generator-index-pin-top, 需要先卸載掉hexo-generator-index,然後在文章的front-matter區域裏添加top: true屬性來把這篇文章置頂

如果使用hexo-generator-indexed, 需要先卸載掉hexo-generator-index,然後在文章的front-matter區域裏添加sticky: 1屬性來把這篇文章置頂。數值越大,置頂的優先級越大

文章封面

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

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

修改 主題配置文件

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

文章頁相關配置

文章meta顯示

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

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10
11
post_meta:
page:
date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
categories: true # true or false 主頁是否顯示分類
tags: true # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字

在文章頂部的資料,

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

categories 是否顯示分類

tags是否顯示標籤

文章版權

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

修改 主題配置文件

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

3.0.0開始,支持對單獨文章設置版權信息,可以在文章Front-matter單獨設置

1
2
3
4
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版權歸xxxxx所有,如有轉載,請註明來自原作者

版權顯示截圖

文章打賞

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

對於沒有提供二維碼的,可配置一張軟件的icon圖片,然後在link上添加相應的打賞鏈接。用户點擊圖片就會跳轉到鏈接去。

link可以不寫,會默認為圖片的鏈接。

修改 主題配置文件

1
2
3
4
5
6
7
8
9
reward:
enable: true
QR_code:
- img: /image/wechat.jpg
link:
text: 微信
- img: /image/alipay.jpg
link:
text: 支付寶

文章隱藏

2.3.0 開始主題不再默認提供文章隱藏功能

如需要文章隱藏功能,請裝插件hexo-generator-indexed或者hexo-hide-posts

TOC

在文章頁,會有一個目錄,用於顯示TOC。

enable: 是否顯示TOC
number: 是否顯示章節數
auto_open: 可選擇進入文章頁面時,是否自動打開sidebar顯示TOC

修改 主題配置文件

1
2
3
4
toc:
enable: true
number: true
auto_open: true # auto open the sidebar

Demo

Toc PC

Toc Mobile

number: true

number: false

為特定的文章配置

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

主題會優先判斷文章Markdown的Front-matter是否有配置,如有,則以Front-matter的配置為準。否則,以主題配置文件中的配置為準

相關文章

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

修改 主題配置文件

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

文章錨點

開啟文章錨點後,當你在文章頁進行滾動時,文章鏈接會根據標題ID進行替換
(注意: 每替換一次,會留下一個歷史記錄。所以如果一篇文章有很多錨點的話,網頁的歷史記錄會很多。)

修改 主題配置文件

1
2
3
# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

文章過期提醒

可設置是否顯示文章過期提醒,以更新時間為基準。

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
enable: true
style: flat # style: simple/flat
limit_day: 365 # When will it be shown
position: top # position: top/bottom
message_prev: It has been
message_next: days since the last update, the content of the article may be outdated.

limit_day: 距離更新時間多少天才顯示文章過期提醒

message_prev : 天數之前的文字

message_next:天數之後的文字

style: flat

image-20200731175909296

style: simple

image-20200731180037968

頭像

修改 主題配置文件

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

圖片描述

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

修改 主題配置文件

1
photofigcaption: true

複製相關配置

可配置網站是否可以複製、複製的內容是否添加版權信息

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
enable: true
copyright:
enable: true
limit_count: 50
配置 解釋
enable 是否開啟網站複製權限
copyright 複製的內容後面加上版權信息
enable 是否開啟複製版權信息添加
limit_count 字數限制,當複製文字大於這個字數限制時,將在複製的內容後面加上版權信息

添加版權信息後

1
2
3
4
5
6
7
Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.


作者: Jerry
連結: http://localhost:4000/posts/bd3c650b/#Paragraph
來源: Butterfly
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。

博客年份

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

修改 主題配置文件

1
2
3
4
footer:
owner:
enable: true
since: 2018

頁腳自定義文本

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

修改 主題配置文件

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

ICP

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

修改 主題配置文件

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

右下角按鈕

簡繁轉換

簡體繁體互換

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

修改 主題配置文件

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

簡體

繁體

夜間模式

右下角會有夜間模式按鈕

修改 主題配置文件

1
2
3
4
5
6
# dark mode
darkmode:
enable: true
# dark mode和 light mode切換按鈕
button: true
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 取消自動切換

閲讀模式

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

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

修改 主題配置文件

1
readmode: true

側邊欄設置

側邊排版

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

修改 主題配置文件

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
aside:
enable: true
mobile: true # 手機頁面( 顯示寬度 < 768px )是否顯示aside內容
position: right # left or right
card_author:
enable: true
description:
button:
icon: fab fa-github
text: Github
link: https://github.com/jerryc127/hexo-theme-butterfly
card_announcement:
enable: true
content: This is my Blog
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
sort: date # date or updated
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
card_archives:
enable: true
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
card_webinfo:
enable: true
post_count: true
last_push_date: true

position: left

position: right

card_tags color: false

card_tags color: true

訪問人數 busuanzi (UV 和 PV)

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

修改 主題配置文件

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

運行時間

網頁已運行時間

修改 主題配置文件

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

最新評論

3.1.0 起支持

最新評論只會在刷新時才會去讀取,並不會實時變化

由於 API 有 訪問次數限制,為了避免調用太多,主題默認存取期限為 10 分鐘。也就是説,調用後資料會存在 localStorage 裏,10分鐘內刷新網站只會去 localStorage 讀取資料。10分鐘期限一過,刷新頁面時才會去調取 API 讀取新的數據。

由於 Leancloud Api 限制,Leancloud 的 appId 和 appKey 最好和 Valine 評論是同一個,不然遇到最新評論 Valine 評論共存的頁面,會出現報錯,其中一方會無法運行。

在側邊欄顯示最新評論板塊

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
newest_comments:
enable: false
limit: 6
avatar: true
leancloud:
enable: false
appId: # leancloud application app id
appKey: # leancloud application app key
serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
default_avatar: mp # mp/identicon/monsterid/wavatar/retro/robohash/blank
github_issues:
enable: false
repo:
disqus:
enable: false
forum:
api_key:

部分配置解釋:

配置 解釋
limit 顯示的數量
avatar 是否顯示頭像
leancloud - appId 等同於 valine 配置中的 appId
leancloud - appKey 等同於 valine 配置中的 appKey
leancloud - serverURL 等同於 valine 配置中的 serverURLs,國內版才需要配置
leancloud - default_avatar 默認頭像,對於一些沒有配置 Gravatar 頭像的,將會顯示默認頭像
github_issues - repo 評論存在的倉庫,例如 jerryc127/jerryc127.github.io
disqus - forum 等同於 disqusjs 的 shortname
disqus - api_key 等同於 disqusjs 的 apikey

default_avatar

參數 效果
留空(默認)
mp
identicon
monsterid
wavatar
retro
robohash
blank
404

Demo

image-20200830223037320

標籤外掛(Tag Plugins)

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

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

標籤外掛雖然能為主題帶來一些額外的功能和UI方面的強化,但是,標籤外掛也有明顯的限制,使用時請留意。

Note (Bootstrap Callout)

移植於next主題

修改 主題配置文件

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
9
10
{% 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 %}

tag-hide

2.2.0以上提供

請注意,tag-hide內的標簽外掛content內都不建議有h1 - h6 等標題。因為Toc會把隱藏內容標題也顯示出來,而且當滾動屏幕時,如果隱藏內容沒有顯示出來,會導致Toc的滾動出現異常。

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

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

( content不能包含英文逗號,可用&sbquo;)

1
{% hideInline content,display,bg,color %}
  • content: 文本內容

  • display: 按鈕顯示的文字(可選)

  • bg: 按鈕的背景顏色(可選)

  • color: 按鈕文字的顏色(可選)

Demo

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

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

哪個英文字母最酷? 因為西裝褲(C裝酷)

門裏站着一個人?

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

( display 不能包含英文逗號,可用&sbquo;)

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

Demo

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子,怎麼可能有答案
{% endhideBlock %}

查看答案

傻子,怎麼可能有答案

2.3.0以上支持

如果你需要展示的內容太多,可以把它隱藏在收縮框裏,需要時再把它展開。

( display 不能包含英文逗號,可用&sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly安裝方法 %}
在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支,可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
Butterfly安裝方法

在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支,可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

mermaid

mermaid標籤不允許嵌套於一些隱藏屬性的標籤外掛,例如: tag-hide內的標籤外掛和tabs標籤外掛,這會導致mermaid圖示無法正常顯示,使用時請留意。

請不要壓縮html代碼,不然會導致mermaid顯示異常

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

修改 主題配置文件

1
2
3
4
mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme: default

寫法:

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 %}

Tabs

移植於next主題

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.

Demo 1 - 預設選擇第一個【默認】

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 預設選擇tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 沒有預設值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 4 - 自定義Tab名 + 只有icon + icon和Tab名

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有圖標 沒有Tab名字**
<!-- endtab -->

<!-- tab 炸彈@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字為第一個Tab

只有圖標 沒有Tab名字

名字+icon

Button

3.0以上適用

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 鏈接
[text] : 按鈕文字
[icon] : [可選] 圖標
[color] : [可選] 按鈕背景顔色(默認style時)
按鈕字體和邊框顔色(outline時)
default/blue/pink/red/purple/orange/green
[style] : [可選] 按鈕樣式 默認實心
outline/留空
[layout] : [可選] 按鈕佈局 默認為line
block/留空
[position] : [可選] 按鈕位置 前提是設置了layout為block 默認為左邊
center/right/留空
[size] : [可選] 按鈕大小
larger/留空

Demo

1
2
3
4
5
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,,outline %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}

This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC

1
2
3
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block center larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block right outline larger %}
JerryC JerryC JerryC

more than one button in center

1
2
3
4
5
6
7
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,blue larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,pink larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,red larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,purple larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,orange larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,green larger %}
JerryC JerryC JerryC JerryC JerryC JerryC JerryC
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline blue larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline pink larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline red larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline purple larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline orange larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline green larger %}
</div>
⚔️ Butterfly-安裝文檔-四-主題配置-2