更改 rightside-bottom 為 rightside_bottom
1 | - rightside-bottom: |
重構 gallery 標籤外掛
寫法變更
默認為滾動到顯示區域才加載圖片
更改依賴, 由 nk-o/flickr-justified-gallery 改為 egjs-infinitegrid
1 | CDN: |
更改 ClickShowText
為 clickShowText
1 | -ClickShowText: |
置頂圖標改為在標題左側
可配置打賞按鈕的文字
1 | reward: |
側邊欄增加系列文章顯示
1 | aside: |
增加 series 系列文章標籤外掛
1 | +series: |
移除 addthis 分享
1 | -addThis: |
文章版權增加圖標顯示
getScript 增加 attribute 配置
文章文字左右對齊
1 | +# Stretches the lines so that each line has equal width(文字向兩側對齊,對最後一行無效) |
preconnect 根據 CDN 配置引入
移除 anchor 的 button, 直接點擊標題跳轉
1 | anchor: |
更改 headline 的 hover 效果
適用於 >= 3.8.0
側邊欄現在支持自定義了,可以添加自己喜歡的 widget。
可添加自己的 widget,也可以對現有的 widget 進行排序(博客資料
和 公告
這兩個固定,其它的能排序)
只需要配置 sort_order
就行。(使用了 Flex
佈局的 order
屬性,具體可查看 mozilla 文檔。簡單來講,就是配置數字來實現排序,如果不配置,則默認為 0。數字越小,排序越靠前。
1 | aside: |
如果你想添加自己的內容到側邊欄去,你可以自定義。
在Hexo博客目錄中的source/_data
(如果沒有 _data 文件夾,請自行創建),創建一個文件 widget.yml
1 | top: |
參數詳解
top: 創建的 widget 會出現在非 sticky 區域(即所有頁面都會顯示)
bottom: 創建的 widget 會出現在 sticky 區域(除了文章頁都會顯示)
參數 | 解釋 |
---|---|
class_name | 所創建的 widget 父類 class 名 (可選) |
id_name | 所創建的 widget 父類 id 名(可選) |
name | 所創建的 widget 標題 |
icon | 所創建的 widget 圖標 |
order | 所創建的 widget 排序 (可選) |
html | 所創建的 widget 相關代碼 |
生成的 代碼 為
1 | <div class="card-widget 所寫的 class_name" id="所寫的 id_name" style="order: 所寫的 order"> |
如果你需要對添加的 widget 進行 UI 調整,請自行添加 css 到 inject 去。
以 訪客地圖 為例子
獲取訪客地圖的 html 代碼
1 | <script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8"></script> |
創建 widget.yml
1 | bottom: |
運行 hexo
以下文章只是教程
如果部署之后,并没有出现 aplayer , 请确认是否跟足步骤操作或者更换音乐源,多试试。
如果遇到使用問題,请仔细查看插件文档,或者到插件那裏反饋。
如果你想使用 aplayer,很多人都會推薦安裝 hexo-tag-aplayer 這款插件。這款插件通過 Hexo 獨有的標籤外掛,我們可以很方便的寫入一些參數,插件就會幫我們生成對應的 html。如果你只是使用一些簡單的功能,其實無需使用到這個插件,只需以 html 格式書寫就行,不用插件去轉換。
例如:
如果使用插件,在 markdown 中要這樣寫
1 | {% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %} |
其會被插件渲染為
1 | <div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div> |
如果我們不想使用插件,就需要在markdown中用html的格式書寫,同時把主題配置文件中的aplayerInject
開啟
1 | <div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div> |
這樣我們就可以不用使用多一個插件,當然這種東西見仁見智,選自己喜歡的就行。
回到正題,這篇文章將教大家如何在Butterfly上使用全局吸底 Aplayer
asset_inject
此步驟適用於安裝了 hexo-tag-aplayer
插件的人
由於需要全局都插入 aplayer 和 meting 資源,為了防止插入重複的資源,需要把 asset_inject 設為 false
在 Hexo 的配置文件中
1 | aplayer: |
aplayerInject
在主題的配置文件中,enable
設為 true
和 per_page
設為 true
1 | # Inject the css and script (aplayer/meting) |
為了適配 hexo-tag-aplayer,主題內置的 Meting js 仍為 1.2 版本,並非最新的 2.x 版本。
Aplayer html 例子:
1 | <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div> |
參數解釋
option | default | description |
---|---|---|
data-id | require | song id / playlist id / album id / search keyword |
data-server | require | music platform: netease , tencent , kugou , xiami , baidu |
data-type | require | song , playlist , album , search , artist |
data-fixed | false | enable fixed mode |
data-mini | false | enable mini mode |
data-autoplay | false | audio autoplay |
data-theme | #2980b9 | main color |
data-loop | all | player loop play, values: 'all', 'one', 'none' |
data-order | list | player play order, values: 'list', 'random' |
data-preload | auto | values: 'none', 'metadata', 'auto' |
data-volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |
data-mutex | true | prevent to play multiple player at the same time, pause other players when this player start play |
data-lrctype | 0 | lyric type |
data-listfolded | false | indicate whether list should folded at first |
data-listmaxheight | 340px | list max height |
data-storagename | metingjs | localStorage key that store player setting |
require
代表着這些參數是必須要使用的,其它的參數則可以根據自己需要配置。
配置全局吸底,data-fixed
和 data-mini
也必須配置,配置為 true
如果使用 Pjax,則在 class 裏需添加 no-destroy
,這樣防止切換頁面時 Aplayer 被銷毀
把 aplayer代碼
插入到主題配置文件的 inject.bottom
去
1 | inject: |
運行 Hexo 就可以看到網頁左下角出現了 Aplayer
最後,如果你想切換頁面時,音樂不會中斷。請把主題配置文件的 pjax
設為 true
這篇文章是使用自定義代碼配色的實例教程。
以使用Kimbie dark
主題配色為例子
hljs
為true
修改Hexo根目錄下的_config.yml
1 | highlight: |
highlight_theme
為false
修改主題配置文件
1 | highlight_theme: false |
在Github上找到這個CSS
在Hexo的根目錄source
文件夾下創立一個self
文件夾,在self
文件夾創建一個Kimbiedark.css
文件
把Github上Kimbie dark
的CSS代碼複製到Kimbiedark.css
去。(你也可以直接從Github上下載這個CSS)
Kimbiedark.css代碼如下
1 | /* |
修改這個CSS文件為
1 | /* |
修改主題配置文件
1 | inject: |
運行Hexo後,應該可以看到修改的效果
以使用prism-duotone-light
主題配色為例子
highlight_theme
為false
修改主題配置文件
1 | highlight_theme: false |
在Github上找到這個CSS
在 Hexo 的根目錄source
文件夾下創立一個self
文件夾,在self
文件夾創建一個duotone.css
文件
把Github上prism-duotone-light
的 CSS 代碼複製到``duotone.css`去。(你也可以直接從Github上下載這個CSS)
prism-duotone-light代碼如下
1 | /* |
修改這個CSS文件為
1 | /* 新添加的內容 |
修改主題配置文件
1 | inject: |
運行Hexo後,應該可以看到修改的效果
]]>非常感謝以下網友的打賞
更新於 2023 - 10 - 09
名字 | 金額 |
---|---|
B*X | 2.33 |
A*. | 0.01 |
*虎 | 3 |
*、 | 5 |
*林 | 3.75 |
*雪 | 10 |
O*r | 15 |
*泥 | 0.01 |
*嗎 | 5 |
*鋒 | 10 |
*強 | 5 |
K*n | 6.66 |
*1 | 2.22 |
圖*_ | 5 |
B*e | 6.66 |
n*l | 6.66 |
*仔 | 5 |
M*5 | 2 |
w*r | 18.88 |
*龍 | 1.6 |
*一 | 5 |
*晨 | 6.66 |
*隨 | 8.88 |
*忘 | 10 |
*想 | 6.66 |
*喜 | 2.5 |
*喜 | 2.5 |
*傑 | 8.88 |
*雨 | 10 |
T*r | 10 |
T*n | 2.88 |
s*n | 2 |
*o | 9.99 |
m*o | 2.5 |
張*i | 0.3 |
*斌 | 2.88 |
q*n | 20 |
*唯 | 8.88 |
H*n | 5 |
I*U | 3.65 |
*白 | 6 |
*豬 | 6.66 |
h*i | 10 |
B*g | 5 |
J*R | 3 |
*夜 | 6.66 |
等*. | 12.5 |
n*l | 1.68 |
M*. | 38 |
R*n | 1.68 |
W*u | 4.91 |
k*n | 58.8 |
*嘔 | 88.8 |
*沙 | 5 |
*x | 1 |
*生 | 0.01 |
D*n | 6.66 |
*。 | 0.01 |
*探 | 5.20 |
*宇 | 5 |
M*o | 10 |
*碎 | 6.66 |
*魚 | 8.88 |
C*. | 6.60 |
*夕 | 6.66 |
R*r | 6.66 |
* | 5 |
*心 | 1 |
H*h | 6.66 |
*天 | 3.21 |
*默 | 6.66 |
T*i | 0.99 |
0*0 | 3 |
* | 5 |
*豪 | 20 |
W*X | 8.88 |
- | 9.99 |
*珩 | 6.66 |
*_ | 2.73 |
c*? | 2.33 |
T*. | 6.66 |
S*. | 5 |
*超 | 5 |
*❀ | 10 |
w*t | 0.66 |
名字 | 金額 |
---|---|
iMIGw0 | 10 |
百事可樂 | 10 |
KT | 5 |
JVxie | 8.88 |
Coolkk | 10 |
Sirius | 10 |
惴繞 | 1.11 |
Jiang慢慢 | 8.88 |
tjj | 28.88 |
無風引漩 | 10 |
忘我楊 | 50 |
小虎 | 10 |
無殤雨露 | 10 |
Rhythm~ | 10 |
小樣 | 36 |
SunnyWS | 20 |
ZFour | 8.88 |
JeM_緘默 | 0.14 |
小張 | 5 |
書生 | 6.88 |
王青陽 | 5 |
趙碧寒 | 10 |
對好的就這樣 | 6 |
雨辰 | 5 |
北風 | 9.9 |
LeDao | 10 |
zHaOzzz | 10 |
任哲 | 1.88 |
dear | 0.29 |
*鵬 | 5 |
**豪 | 50 |
*瑋 | 5 |
*彬 | 5.2 |
4.9.0 之後的更新日誌將會單獨文章發佈,請查看 更新日誌
你可以通過右下角的 簡 按鈕切換為簡體顯示
適配 mermaid v10
大於 2000px 時,顯示區域增大
可配置 header 和 footer 是否添加黑色半透遮罩
1 | +# Add mask to header or footer (為 header 或 footer 添加黑色半透遮罩) |
artalk 最新評論改為 api 直接調用
waline 最新評論和評論數改為 api 直接調用
再次點擊右下角聊天按鈕,可關閉聊天
適配新版 artalk
支持隨機友鏈順序
移除 gitter
1 | -# gitter |
CDN option 部分參數名字修改
1 | CDN: |
social 可配置 顏色
支持 abcjs 樂譜渲染
1 | +# abcjs (樂譜渲染) |
適配 typed.js 新版本
Algolia 搜索,點擊文章內容也會跳轉到相應頁面
重構本地搜索
1 | # Local search |
升級 fancybox 到 v5
更新 facebook js 版本
CDN 配置了 version 為 true, 本地鏈接也會加上版本號
支持自定義 giscus 評論系統的 JS 地址
1 | CDN: |
新增自定義深淺模式切換時間
1 | # dark mode |
card_tags 可配置 orderby 和 order
1 | aside: |
標籤頁支持配置 orderby 和 order 參數
添加 docsearch
1 | +# Docsearch |
本地搜索,點擊文章內容也會跳轉到相應頁面
gallery 標籤外掛增加 json 獲取
可配置 typed.js 的參數
1 | subtitle: |
cover 的顯示優化 #1101
當 cover 設置為 false,或者沒有獲取到 cover 的值時,文章頁相關推薦和分頁按鈕背景顯示為主題色
toc可設置是否顯示預覽進度
1 | toc: |
右下角按鈕增加預覽進度顯示
1 | +# show scroll percent in scroll-to-top button |
cover 可設置顏色/漸變色 等配置
default_cover 可配置顏色
導航欄設置:隱藏博客名字 / 設置 logo / 設置固定導航欄 # 1150 #1104
1 | +nav: |
不蒜子可配置 CDN #1132
gallery 標簽外掛增加圖片懶加載,增加 lazyload rowHeight 和 limit 屬性配置
更新 plugins.yml
移除 cnzz 分析
1 | -# CNZZ Analytics |
Open_Graph_meta 設置更改,可配置其它參數
1 | -Open_Graph_meta: true |
preloader 設置更改,增加 pace.js 加載動畫條
1 | -preloader: false |
anchor 設置更改,可單獨設置按鈕和自動更新 anchor 是否開啟,可設置 button 圖標,可設置 button 總是顯示
1 | -anchor: false |
throttle
函數調用方式 #1075在綫聊天新增 facebook 洽談外掛程式 messenger
1 | +messenger: |
添加 artalk 評論功能
1 | +artalk: |
首頁打字效果增加參數配置
1 | subtitle: |
archives 隱藏aside 設置更改
1 | aside: |
適配 disqusjs 3.0
子歸檔頁面顯示的文章數量不再顯示總文章數量,而是對應的子歸檔文章數量
為一些數據加載增加 loading 顯示
tag 和 category 頁面可設置隱藏 aside
1 | aside: |
點擊歸檔日期跳轉到頁面,標題顯示日期而不是‘歸檔’二字
適配 katex 升級, 移除 katex copy-tex.css
CDN 可一鍵配置 cdnjs
CDN 可一鍵配置為 unpkg
cdn可設置 version 和 custom format(自定義格式)
1 | CDN: |
添加Remark42評論系統支持
1 | +# Remark42 |
waline 適配 V2
1 | CDN: |
waline 的 visitor 改為 pageview
1 | waline: |
cdn 可一鍵設置 本地文件/可單獨配置主題文件,第三方文件的 cdn
1 | CDN: |
移除 utterances,giscus, addtoany, busuanzi 的 cdn 配置
algolia 搜索增加文章內容顯示和高亮
搜索內容顯示區域變大
本地搜索增加 preload,cdn 配置 #859
1 | local_search: |
更新 social-share cdn 版本
歸檔頁面的側邊欄支持隱藏
1 | aside: |
可配置文章版權模塊的作者超鏈接
1 | post_copyright: |
升級 fontawesome 到 v6 #689
1 | CDN: |
精簡各評論的配置
1 | disqusjs: |
頁面支持 toc #636
1 | toc: |
刪除 hide_sidebar_menu_child 配置,改為直接在 menu 配置 #640
1 | -# Hide the child menu items in mobile sidebar |
完全移除 jquery
1 | CDN: |
移除騰訊分析
1 | -# Tencent Analytics ID |
photofigcaption 和 fancybox 的 figcaption 優先顯示 圖片的title屬性,然後是 alt 屬性 #683
支持新的評論名寫法,主題會處理評論名字大小寫,舊的會兼容
移除博天api,注意順序改變
1 | # source: 1 調用一言網的一句話(簡體) https://hitokoto.cn/ |
移除 html 的 font-size 改為瀏覽器默認大小
更新 fancybox 到 4
1 | CDN: |
右下角按鈕自定義順序 #680
1 | +rightside_item_order: |
網站資料顯示,當標籤和分類為0時,數量顯示為 0,而不是隱藏
代碼框設置高度限制,展開後按鈕不會消失,可點擊再次摺疊 #637
圖片選擇性禁用 lightbox #636
Twikoo 評論圖片添加 lightbox
升級 facebook comment js 到 version 11
為文章單獨設置 TOC simple_style 顯示 #631
page 頁頂部圖增加黑色遮罩 #671
首頁 pagination更新 UI
主題 css 使用的 rem 改為 em 或 px
移除 右下角字體調整按鈕
1 | -# Change font size |
新增標籤外掛 timeline #644
清除 配置文件 的CDN,默認CDN 不再顯示在 config
替換 Justified Gallery 為 flickr-justified-gallery
1 | CDN: |
切換夜間模式後,mermaid 也會切換夜間主題
1 | mermaid: |
壓縮html代碼後,mermaid 顯示正常
mermaid 可以在 隱藏屬性的標籤外掛 裏使用
本地搜索可處理 json #684
右下角按鈕 UI 微調
更改文章美化後,列表的顯示效果 #693 #686
algolia 升級至 v4
1 | CDN: |
本地搜索增加數據庫加載中和搜索中 loading 顯示
anchor 不再限制 post 頁開啟,可以在任何頁面開啟
文章標題支持點擊跳轉到此標題開始閲讀 #653
toc 可以設置全部展開 #709
1 | toc: |
增加 新的評論系統 giscus
1 | +# Giscus |
友情鏈接列表增加 fetch url 獲取
toc 間隔調整, 直接子元素增加豎線辨識 closed #723
可配置scrollbar顏色
1 | theme_color: |
美化 firefox 瀏覽器滾動條
CDN 增加 blueimp_md5 配置
1 | CDN: |
archives 的 標題 在 menu 配置中獲取
移除最新評論的評論服務商選擇,默認為配置的第一個評論服務商
1 | newest_comments: |
widget 寫法更改/可添加非 sticky 區域 widget
修改最新評論 icon
waline 顔色適配主題色
增加 waline avatarCDN 配置(最新評論也會更新)
1 | waline: |
升級 facebook comment js 到 v10
site_verification 優化,需自行配置
1 | -# Google Webmaster tools verification setting |
lazyload 優化 (增加高斯模糊過度特效,增加配置 lazyload 範圍,佔位圖應用到全站)
1 | lazyload: |
更改子目錄的寫法,與父目錄一致
移除 artitalk (如需要,請安裝 hexo-butterfly-artitalk)
1 | -# Artitalk |
katex_copytex 的js 和 css cdn 更換
1 | -katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js |
新增設置代碼高度限制,顯示展開按鈕
1 | +highlight_height_limit: false # unit: px |
prismjs 也可以配置 code_word_wrap
增加 kbd 樣式 #507
添加waline,valine 和twikoo 提供的文章閲讀數配置 #502
1 | valine: |
增加 HexoPlusPlus_Talk(需要安裝 hexo-butterfly-hpptalk)
增加 tags 標簽外掛 inlineImg
gitalk 增加 option 配置
1 | gitalk: |
增加首頁評論數顯示
1 | comments: |
最新評論更新
<a>
標簽將會顯示 [鏈接]
<img>
標簽將會顯示 [圖片]
<pre><code>
標簽將顯示 [代碼]
aside ‘查看更多’按鈕 改為 圖標顯示在右上角
可配置最新評論的緩存時間
1 | newest_comments: |
增加 post_pagination 配置(可關閉/配置分頁展示邏輯)
1 | +# post_pagination (分頁) |
文章版權右上角改為 版權icon
增加配置 disable_top_img,禁用所有的top_img
1 | +# Disable all banner image |
增加 文章編輯
1 | +# Post edit |
移除百度推送(百度已棄用)和百度轉碼
1 | -# Disable Baidu transformation on mobile devices (禁止百度轉碼) |
移除 fragment_cache 配置(默認開啟)
1 | -# Caches the contents in a fragment, speed up the generation (開啟hexo自帶的緩存,加快生成速度) |
aside 個人資料widget可關閉button
1 | aside: |
新增 Cloudflare Analytics
1 | +# Cloudflare Analytics |
新增 Microsoft Clarity
1 | +# Microsoft Clarity |
readmode 優化
aside 增加自定義 widget
aside widget 增加排序(只對page頁和sticky內的有效)
1 | aside: |
twikoo 增加 option 配置
1 | # Twikoo |
增加waline評論
1 | +# waline - A simple comment system with backend support fork from Valine |
增加waline評論數顯示
增加waline最新評論模塊
1 | newest_comments: |
最新評論url 增加描點
html結構優化
修改newest_comments的leancloud為valine,並刪除其配置,改為讀取valine配置
1 | # Aside widget - Newest Comments |
可配置是否添加css前綴
1 | +# Add the vendor prefixes to ensure compatibility |
點擊文字特效增加隨機配置
1 | ClickShowText: |
右下角增加字體調整按鈕
1 | +# Change font size |
增加twikoo 最新評論
1 | newest_comments: |
增加twikoo評論數顯示
增加toc簡潔模式
1 | toc: |
Valine 增加 option 設置
1 | valine: |
toc改為aside顯示,去掉sidebar
手機toc ui 修改
去掉 toc auto_open 配置
1 | toc: |
優化手機toc 的特效和按鈕出現的時機
aside狀態存localStorage
文章標題改為居中
aside 可配置隱藏/增加按鈕可展開或收縮aside
1 | aside: |
增加Twikoo評論
1 | +twikoo: |
更改canvas_ribbon_piao 為 canvas_fluttering_ribbon
1 | -canvas_ribbon_piao: |
刪除特效js,改為cdn引入
1 | CDN: |
可設置首頁文章不顯示內容/description
1 | # Display the article introduction on homepage |
主頁文章時間和文章頁文章時間可以配置顯示日期還是相對時間
1 | post_meta: |
top_img 可配置 (留空(默認色)/顏色(HEX值/RGB值/顔色單詞/漸變色)/圖片鏈接/ false(不顯示top_img))
footer可配置背景 [留空/false(默認色)/顏色(HEX值/RGB值/顔色單詞/漸變色)/圖片鏈接/true(跟top_img一樣)]
網站背景可配置 (顏色(HEX值/RGB值/顔色單詞/漸變色)/漸變色/圖片鏈接)
增加 tag_per_img 配置(可為各個tag 單獨配置top_img)
1 | +tag_per_img: |
增加 category_per_img 配置(可為各個category單獨配置top_img)
1 | +category_per_img: |
note 標籤優化(可自定義icon圖標/可覆蓋配置中的style)
夜間模式下,背景顔色/top-img/footer-bg 設置為顔色時,不再強制顯示黑色,而是改為遮罩降低亮度
增加部分特效 Mobile設置(activate_power_mode/fireworks/click_heart/ClickShowText)
1 | activate_power_mode: |
添加 artitalk 説説插件
1 | +# Artitalk |
網頁進入動畫效果可關閉
1 | +# Enter transitions (開啟網頁進入效果) |
移除anime js, 集成在fireworks的js裏
1 | CDN: |
刪除不必要的語言檔案
適配 hexo 5.0.0 的 prismjs, 代碼主題和各項功能
適配hexo 5.1.0 prismjs caption
可隱藏 Mobile sidebar 子菜單
1 | +# Hide the child menu items in mobile sidebar |
當寬度小於1024時,點擊toc滾動,增加滾動效果
可配置font-size/更改配置中 code-font 為 code-font-family
1 | font: |
部分css由'px'改為'em',適應font-size值改變而改變
pjax增加exclude配置
1 | -pjax: false |
新增 cnzz_analytics
1 | # Analysis |
騰訊分析改為騰訊移動分析,並適配pjax
aside增加position sticky
更改addtoany item的寫法
1 | addtoany: |
增加最後更新時間顯示/增加post count 配置
1 | aside: |
增加 aside 最新評論部件
1 | +newest_comments: |
支持雙評論系統配置/評論配置整理/評論增加lazyload
1 | +comments: |
footer配置整理,修改部分用語 #279
1 | -since: 2020 |
移除‘添加書籤’功能,可執行配置按鈕
1 | aside: |
copy的copyright增加字數限制配置,可配置多少字以上才添加版權信息
1 | copy: |
aside recent post可設置按發表時間或者更新時間排序
1 | aside: |
更換typed.js/meting CDN
1 | -typed: https://cdn.jsdelivr.net/npm/typed.js |
增加文章過期提醒
1 | +# Displays outdated notice for a post (文章過期提醒) |
增加mac light 代碼框配色
文章copyright 可單獨配置
card-category 中category名稱和數字限制一行顯示
簡繁轉換優化,placeholder也會被轉換
引入css變數,減少css體積
新增 Pjax #234
1 | +# Pjax [Beta] |
添加第三方chat服務 crisp
1 | +# crisp |
谷歌廣告增加自動廣告配置,減少不必要的js加載
1 | google_adsense: |
當post_asset_folder為true時,post的top_img和cover可直接引用同名文件夾下的圖片,只需要寫圖片名字和後綴就行 #270
增加Yandex Webmaster tools verification配置
1 | +# Yandex Webmaster tools verification setting |
post-meta可以配置是否顯示文字
1 | post_meta: |
手機端post-meta調整顯示/支持顯示分類
代碼框滾動條顔色隨代碼主題變化
頭像/打賞圖片 增加lazyload
提升highlight-tool的加載速度
disqus/disqusjs/facebook comments 可隨夜間模式按鈕切換而轉換主題
mathjax升級到3 #216
pangu.js 只會渲染 body-wrap 區域
放大字體和縮小字體 限制在 10px~20px
更新谷歌分析代碼(gtag)
移除blueimp_md5 js
1 | -blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js |
夜間模式和閲讀模式微調
從3.0開始,不再對IE瀏覽器進行適配
強制使用fontawesome v5(會對一些自定義icon產生影響,請替換為V5圖標)
1 | -# fontawesome圖標 |
_config.yml 內容修改
精簡baidu_push/instantpage/click_heart/readmode/footer_copyright/medium_zoom/fancybox配置
1 | -baidu_push: |
修改runtimeshow 的start_date 為publish_date
1 | runtimeshow: |
laibili 改名為 LiveRe
1 | -laibili: |
改hr為hr_icon 可設置取消icon
1 | # 水平分隔綫 |
更改loading_bg為error_img,post-loading移到lazyload去
1 | -lodding_bg: |
pangu 的field配置只能配置site/post
1 | pangu: |
整合auto_open_sidebar到toc去
1 | toc: |
font去除enable配置
1 | # 全局字體 |
刪除部分配置
1 | valine: |
刪除twitter_meta配置
1 | -# twitter分享自動帶上樣式 |
table寬度佔滿顯示
增加系統Darkmode切換監控,當系統切換Darkmode時,主題會立刻切換
card_description 支持html書寫
Dark Mode和Light Mode 切換按鈕icon更換
適配hexo自帶標簽 Pullquote
百度推送鏈接增加dns-prefetch
canonical 設為默認生成 不再提供配置
1 | -# 避免重複網址分散seo |
instantpage js 加載增加defer
fireworks 增加z-index配置
1 | fireworks: |
新的Tag Plugins - button
新的Tag Plugins - tabs
可配置justifiedGallery CDN
1 | CDN: |
新設計404頁面
aplayer js /css 可配置,在文章front-matter中設置aplayer. 防止aplayer在每個頁面都插入代碼
1 | CDN: |
增加在綫聊天 Chat Services (chatra/tidio/daovoice/gitter), 可配置主題chat按鈕替換原在綫聊天按鈕
1 | +# Chat Button [recommend] |
可配置rightside按鈕與底部的距
1 | +# 右下角按鈕距離底部的距離(默認單位為px) |
更換lazyload服務商
1 | CDN: |
card-categories增加收縮/展開按鈕
1 | aside: |
更改auto_excerpt為index_post_content,並擁有三種方法可選
1 | -# 自動節選 |
可在post裏單獨設置 auto_open: false關掉sidebar自動打開 #232
友情鏈接界面代碼優化/增加分類描述/分類名字和描述可以不寫/友情鏈接yml寫法更改(舊的寫法依舊有效,沒影響)
文章/頁面font-matter 可設置highlight_shrink (true or false)
代碼框優化
閲讀模式下去掉代碼高亮
disqusjs更新js/css版本,增加nocomment配置
1 | disqusjs: |
打賞增加鏈接配置 /打賞寫法更改(舊寫法依然有用)#240
1 | # 打賞按鈕 |
移除JS-COOKIES
1 | CDN: |
可為文章配置是否顯示TOC,即使配置中已把toc設為false
beautify 可配置生效於全站還是post頁 #218
1 | beautify: |
更換lazyload js
1 | -lazyload: |
增加文章anchor配置
1 | + # anchor |
增加Facebook Comments
1 | +# Facebook Comments Plugin |
增加頁面加載動畫Preloader #193
1 | +# 加載動畫 Loading Animation |
aside card-tags可配置是否顯示顏色/aside subtitle可配置,優先顯示配置內容、沒有的顯示頁面subtitle #191 /aside widget 增加部分參數可配置/aside widget的Categories,Tags,post,Archives可配置limit/整合公告欄配置到aside去
1 | aside: |
改CDN_USE為inject,可插入代碼到head或者bottom
1 | -# CDN |
適配valine 1.4.5以上版本
1 | valine: |
移除對文章隱藏的支持
增加自動廣告位置
1 | +ad: |
增加圖片Figcaption顯示
1 | + photofigcaption: false |
增加全站總字數顯示,可配置是否關閉wordcout閲讀時間/字數統計/全站總字數
1 | wordcount: |
不再支持hexo 4.0.0以下版本
添加hexo fragment_cache,加快生成速度
1 | + fragment_cache: true |
完善V5圖標顯示,不再需要同時加載V4和v5圖標
1 | + fontawesome_v5: |
去除cheerio依賴
整合豆瓣配置,增加配置遊戲,圖書頁面top_img,可設置是否設置meta,解決部分瀏覽器無法顯示圖片問題
1 | - # 如果你有使用hexo-douban去生成movie界面,可配置這個 |
友情鏈接除列表外可自定義內容
可設置主頁標題距離頂部距離
1 | # 主頁設置 |
側邊欄可隱藏,可設置手機頁面是否隱藏
1 | -aside_mobile: true |
增加disqusjs和utterances 兩個評論
1 | +disqusjs: |
首頁subtitle可關閉打字效果,可設置打字效果顯示一次或loop
1 | subtitle: |
增加valine和gitalk的配置
1 | gitalk: |
darkmode配置整理
1 | - # 夜間模式 |
增加404頁面
1 | +# A simple 404 page |
post_beautify改為beautify,頁面美化不再只限於post頁,page頁也一樣
1 | -post_beautify: |
可設置是否顯示cover,可設置各位置的cover顯示
1 | -# the default cover of the post |
增加mermaid,可畫流程圖、狀態圖、時序圖、甘特圖等等
1 | +# https://github.com/knsv/mermaid |
增加pangu配置,中英文之間添加空格
1 | +# https://github.com/vinta/pangu.js |
整合部分配置
1 | -avatar_effect: false |
post-copyright增加decode網址 (可以顯示中文)
1 | post_copyright: |
增加部分顏色配置
1 | theme_color: |
主頁文章增加tags和更新日期顯示,可以配置post_meta
1 | post_meta: |
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 📌 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程
你可以通過右下角的 簡 按鈕切換為簡體顯示
source
文件夾裏,因為在升級主題的過程中,可能會把文件覆蓋刪除了。source
文件夾裏,創建一個文件夾來放置個人文件/圖片。/文件夾名稱/文件名
音樂界面使用了插件 hexo-tag-aplayer
使用方法請參考插件文檔
音樂頁面只是普通的page頁,按普通頁面操作生成就行。
以下內容可供選擇配置
注意: 仍需要安裝插件hexo-tag-aplayer
插件會在每一個文件都插入 js 和 css,為了避免這一情況,3.0 版本內置了 aplayer 需要的 css 和 js。
首先在Hexo根目錄_config
裏配置asset_inject
為false
1 | aplayer: |
然後在你需要使用aplayer的頁面Front-matter添加
1 | aplayer: true |
這樣只會在需要aplayer的頁面插入js和css。
如何添加全局 Aplayer 播放,請參考 這篇文章
電影界面使用了插件 hexo-butterfly-douban
使用方法請參考插件的文檔。
注意:
INFO 0 movies have been loaded in xxx ms, because you are offline or your network is bad
具體配置查看插件文檔
具體配置查看插件文檔
Butterfly主題內置了Font Awesome V5 圖標,目前已更新到 5.13.0,總共有1,588個免費圖標。由於是國外的圖標網站,對於國內的一些網站Icon並不支持。如有需要,你可以引入其它的圖標服務商。
國內最出名的莫過於iconfont,功能很強大且圖標內容很豐富的矢量圖標庫。很多Font Awesome
不支持的圖標都可以在這裏找到。同時,iconfont支持選擇需要的圖標生成css鏈接,減少不必要的CSS加載。
打開iconfont的網站,點擊導航欄的人像
圖標,會跳出註冊界面,按要求註冊賬號。
選擇自己需要的圖標,把鼠標移到圖標上,會顯示三個按鈕(依次是添加入庫、收藏和下載),而我們需要的是把圖標添加入庫
添加入庫後,你可以看到網站右上角購物車
圖標顯示了1
字,代表圖標已經添加入庫,點擊購物車
圖標,會彈出側邊欄顯示詳情。
已選擇的圖標會顯示在上面,你可以重複上面的操作,把需要的圖標添加入庫,然後點擊添加到項目
。
接下來會要求選擇項目名稱,沒有的自己創建一個。
在添加到項目之後,會跳到項目的詳情界面。點擊Font class
,然後再點擊暫無代碼,點擊生成
文字。網站會自動生成CSS鏈接,我們只需要複製鏈接就行。
打開主題配置文件
,找到inject
配置,按要求把鏈接填入
在我們需要使用的地方填入icon,例如Menu
,圖片使用格式為iconfont icon名字
運行Butterfly之後,你就可以看到menu的圖標生效了
除了通過引入CSS鏈接使用圖標,iconfont也支持通過其它方法使用圖標,具體可查看iconfont官方使用文檔
除了iconfont,還有RemixIcon、Flaticon等等提供商,很多圖標可以選擇,具體使用方法請參考各自的文檔。
Butterfly主題需要使用到很多圖片。如果圖片太大,會嚴重拖慢網站的加載速度。
圖片壓縮能夠有效的緩解這個問題。
除了通過gulp-imagemin
來壓縮圖片,還可以通過在綫壓縮網站和軟件來進行壓縮。以下兩款是我自己正在使用的工具。網上有很多這樣的工具,挑選一款適合自己的就行。
imgbot 是一款 Github 插件。
安裝後,你上傳圖片到 Github 去,imgbot 會自動壓縮圖片並推送 PR,我們只需要合併 PR 就行
你可以配置 imgbot 的偵測方法、壓縮方法(有損/無損),具體可以查看插件的文檔
可以把鏈接permalink轉為數字的插件,配置容易,生成時自動轉為數字。
生成RSS文件的插件
為網站使用到的所有外鏈添加rel="noopener external nofollow noreferrer"
, 可以有效地加強網站SEO和防止權重流失
生成sitemap的插件
看名字就知道,是專門為百度生成sitemap的插件
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 📌 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程
你可以通過右下角的 簡 按鈕切換為簡體顯示
以下是一些網友在安裝的過程中出現的問題。在提問題之前,先看有沒有解決方法。
頁面只顯示 extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug #aside_content.aside_content include includes/aside.pug
請下載安裝:
npm install hexo-renderer-pug hexo-renderer-stylus --save
oryarn add hexo-renderer-pug hexo-renderer-stylus
配置友情鏈接頁面時出現報錯
1 | ERROR D:\Desktop\orxing-blog\themes\Butterfly\layout\flink.pug:2 |
請檢查
link.yml
文檔內代碼的空格
升級最新版本hexo g後報錯
1 | INFO Deleted database. |
請參照最新版的_config.yml, 比對後,把缺的配置複製到主題配置文件中去
報錯wordcount is not a function
請檢查是否安裝了wordcount插件
npm i --save hexo-wordcount
舊版本升級到2.0.0後報錯
1 | INFO Start processing |
2.0.0版本以上刪掉了gallery,而引入新的gallery。所以如果有使用舊版,需刪掉或者更改寫法。
2.1.0 以下版本會出現的問題
代碼渲染與實際不同
1 | <div>aaa</div> |
渲染結果:
cheerio版本錯誤,請安裝0.22.0版本
npm install cheerio@0.22.0 --save
hexo deploy後搜索欄在頁面底部
生成前先hexo clean
- 清理瀏覽器緩存
- 如果1無效,請確認上傳時是否有運行 hexo clean
請在導航的配置裏,自己修改成想要的中文
1 | 首頁: / || fa fa-home |
1 | TypeError: Cannot read property 'bind' of undefined |
把Hexo升級到4.0以上版本
報錯
1 | > 1| - |
algolia 插件安裝後還需要配置
查看插件文檔配置
生成前先 hexo clean
這種情況出現在主題為 3.0.0
以下版本,升級主題就行
這是因為使用 babel 壓縮代碼而出現的報錯,具體解決方法查看 babel/gulp-babel
⚡️ Butterfly 安裝文檔(六) 進階教程]]>📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 📌 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程
你可以通過右下角的 簡 按鈕切換為簡體顯示
不要在標題裏使用 mathjax 語法,toc 目錄不一定能正確顯示 mathjax,可能顯示 mathjax 代碼
建議使用 KaTex 獲得更好的效果,下文有介紹!
修改 主題配置文件
:
1 | mathjax: |
如果
per_page
設為true
,則每一頁都會加載 Mathjax 服務。設為false
,則需要在文章Front-matter
添加mathjax: true
,對應的文章才會加載 Mathjax 服務。
然後你需要修改一下默認的 markdown
渲染引擎來實現 MathJax 的效果。
以下操作在你 hexo 博客的目錄下 (不是 Butterfly 的目錄):
安裝插件
1 | npm uninstall hexo-renderer-marked --save |
配置 hexo 根目錄的配置文件
1 | kramed: |
效果:
不要在標題裏使用 KaTeX 語法,toc 目錄不能正確顯示 KaTeX。
首先禁用MathJax
(如果你配置過 MathJax 的話),然後修改你的主題配置文件
以便加載katex.min.css
:
1 | katex: |
你不需要添加 katex.min.js
來渲染數學方程。相應的你需要卸載你之前的 hexo 的 markdown 渲染器,然後安裝其它插件。
卸載掉 marked 插件,安裝 hexo-renderer-markdown-it
1 | npm un hexo-renderer-marked --save # 如果有安裝這個的話,卸載 |
在 hexo 的根目錄的 _config.yml
中配置
1 | markdown: |
如需配置其它參數,請參考 katex 官網
注意,此方法生成的 katex 沒有斜體
卸載掉 marked 插件,然後安裝新的hexo-renderer-markdown-it-plus
:
1 | # 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器 |
注意到 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 | markdown_it_plus: |
當然,你還可以利用這個特性來定義一些自己常用的 macros
。
因為 KaTeX 更快更輕量,因此沒有 MathJax 的功能多(比如右鍵菜單)。為那些使用 MathJax 的用户,主題也內置了 katex 的 複製 功能。
記得運行 hexo clean
如果你使用 hexo-algoliasearch,請記得配置 fields 參數的
title
,permalink
和content
你需要安裝 hexo-algolia或 hexo-algoliasearch. 根據它們的説明文檔去做相應的配置。
修改 主題配置文件
1 | algolia_search: |
記得運行 hexo clean
你需要安裝 hexo-generator-searchdb 或者 hexo-generator-search,根據它的文檔去做相應配置
修改 主題配置文件
1 | # Local search |
參數 | 解釋 |
---|---|
enable | 是否開啟本地搜索 |
preload | 預加載,開啟後,進入網頁後會自動加載搜索文件。關閉時,只有點擊搜索按鈕後,才會加載搜索文件 |
top_n_per_article | 匹配的文章結果,默認顯示最開始的 1段結果 |
unescape | 將 html 字符串解碼為可讀字符串 |
CDN | 搜索文件的 CDN 地址(默認使用的本地鏈接) |
DocSearch 是另一款由 algolia 提供的搜索服務,具體申請和使用請查看 DocSearch 文檔
1 | docsearch: |
參數 | 解釋 |
---|---|
enable | 【必須】是否開啟 docsearch |
appId | 【必須】你的 Algolia 應用 ID |
apiKey | 【必須】你的 Algolia 搜索 API key |
indexName | 【必須】你的 Algolia index name |
option | 【可選】其餘的 docsearch 配置 具體配置可查這裏 |
只能選擇一個分享服務商
從3.0.0開始,開啟評論需要在comments-use
中填寫你需要的評論。
支持雙評論顯示,只需要配置兩個評論(第一個為默認顯示)
1 | comments: |
參數 | 解釋 |
---|---|
use | 使用的評論(請注意,最多支持兩個,如果不需要請留空) 注意:雙評論不能是 Disqus 和 Disqusjs 一起,由於其共用同一個 ID,會出錯 |
text | 是否顯示評論服務商的名字 |
lazyload | 是否為評論開啟lazyload,開啟後,只有滾動到評論位置時才會加載評論所需要的資源(開啟 lazyload 後,評論數將不顯示) |
count | 是否在文章頂部顯示評論數 livere、Giscus 和 utterances 不支持評論數顯示 |
card_post_count | 是否在首頁文章卡片顯示評論數 gitalk、livere 、Giscus 和 utterances 不支持評論數顯示 |
單評論
雙評論
顯示text
不顯示text
與Disqus一樣,但由於Disqus在中國大陸無法訪問, 使用Disqusjs可以在無法訪問Disqus時顯示評論。具體可參考Disqusjs。
修改 主題配置文件
1 | disqusjs: |
當無法訪問 Disqus 時,會顯示
遵循 gitalk的指示去獲取你的 github Oauth 應用的 client id 和 secret 值。以及查看它的相關配置説明。
然後修改 主題配置文件
:
1 | gitalk: |
遵循 Valine的指示去配置你的 LeanCloud 應用。以及查看相應的配置説明。
然後修改 主題配置文件
:
1 | valine: |
開啟 visitor 後,文章頁的訪問人數將改為 Valine 提供,而不是 不蒜子
Valine於 v1.4.5 開始支持自定義表情,如果你需要自行配置,請在emojiCDN
配置表情 CDN。
同時在Hexo 工作目錄下的source/_data/
創建一個json文件valine.json
,等同於 Valine 需要配置的emojiMaps
,valine.json
配置方式可參考如下
valine.json
1 | { |
default_avatar
參數 | 效果 |
---|---|
留空(默認) | |
mp | |
identicon | |
monsterid | |
wavatar | |
retro | |
robohash | |
blank | |
404 |
Waline - 一款從 Valine 衍生的帶後端評論系統。可以將 Waline 等價成 With backend Valine。
具體配置可參考 waline 文檔
然後修改 主題配置文件
:
1 | waline: |
開啟 pageview 後,文章頁的訪問人數將改為 Waline 提供,而不是 不蒜子
與Gitalk一樣,基於 GitHub issues 的評論工具。相對於Gitalk,其相對需要權限較少。具體配置可參考Utterances。
修改 主題配置文件
:
1 | utterances: |
Facebook Comments
是Facebook提供的評論插件,需要登陸Facebook才可評論。
修改 主題配置文件
1 | # Facebook Comments Plugin |
Twikoo
是一個簡潔、安全、無後端的靜態網站評論系統,基於騰訊雲開發。
具體如何配置評論,請查看 Twikoo文檔
你只需要把獲取到的 環境ID (envId)
填寫到配置上去就行
修改 主題配置文件
1 | twikoo: |
參數 | 解釋 |
---|---|
envId | 環境 ID |
region | 環境地域,默認為 ap-shanghai,如果您的環境地域不是上海,需傳此參數 |
visitor | 是否顯示文章閲讀數 |
option | 可選配置 |
開啟 visitor 後,文章頁的訪問人數將改為 Twikoo 提供,而不是 不蒜子
一個基於 GitHub Discussions 的評論
1 | # Giscus |
具體配置的意思,請參考 Giscus 的文檔
remark42 是一款只支持私有部署的評論
具體部署請查看 Installation | Remark42
1 | remark42: |
從3.0開始,Butterfly主題內置了多種在綫聊天工具。你可以選擇開啟一種,方便你與訪客的交流。
這些工具都提供了一個按鈕可以打開/關閉聊天窗口。
主題也提供了一個集合主題特色的按鈕來替換這些工具本身的按鈕,這個聊天按鈕將會出現在右下角裏。
你只需要把chat_btn
打開就行。
修改 主題配置文件
1 | # Chat Button [recommend] |
為了不影響訪客的體驗,主題提供一個chat_hide_show
配置
設為true
後,使用工具提供的按鈕時,只有向上滾動才會顯示聊天按鈕,向下滾動時會隱藏按鈕。
修改 主題配置文件
1 | # The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down |
如果使用工具自帶的聊天按鈕,按鈕位置可能會遮擋右下角圖標,請配置rightside_bottom
調正右下角圖標位置
配置chatra,需要知道Public key
打開chatra並註冊賬號。
你可以在Preferences
中找到Public key
修改 主題配置文件
1 | # chatra |
chatra
的樣式你可以Chat Widget
自行配置
Demo
配置tidio,需要知道Public key
打開tidio並註冊賬號。
你可以在Preferences > Developer
中找到Public key
修改 主題配置文件
1 | # tidio |
tidio
的樣式你可以Channels
自行配置
Demo
打開daovoice和註冊帳號
找到你的app id
修改 主題配置文件
1 | # daovoice |
可在聊天設置
裏配置聊天按鈕等樣式
Demo
messenger 為 Facebook 旗下的聊天服務
具體操作請查看 Facebook 洽談附加程式 - Messenger 平台
1 | messenger: |
主題已集成谷歌廣告(自動廣告)
修改 主題配置文件
1 | google_adsense: |
主題預留了三個位置可供插入廣告,分別為主頁文章(每三篇文章出現廣告)/aside公告之後/文章頁打賞之後。
把html代碼填寫到對應的位置
修改 主題配置文件
1 | ad: |
例如:
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> |
如果需要搜索引擎收錄網站,可能需要登錄對應搜索引擎的管理平台進行提交。
各自的驗證碼可從各自管理平台拿到
修改 主題配置文件
1 | site_verification: |
可以修改大部分UI顏色
修改 主題配置文件
,比如:
顏色值必須被雙引號包裹,就像
"#000"
而不是#000
。否則將會在構建的時候報錯!
1 | theme_color: |
適用於 版本號 >= V1.2.0
默認的顯示為全屏。site-info的區域會居中顯示
1 | # 主頁設置 |
注意:index_top_img_height
的值不能使用百分比。
2個都不填的話,會使用默認值
舉例,當
1 | index_top_img_height: 400px |
效果
可設置文字向兩側對齊,對最後一行無效
1 | # Stretches the lines so that each line has equal width(文字向兩側對齊,對最後一行無效) |
text_align_justify: false
text_align_justify: true
默認顯示白色,可設置圖片或者顏色
修改 主題配置文件
1 | # 圖片格式 url(http://xxxxxx.com/xxx.jpg) |
留意: 如果你的網站根目錄不是'/',使用本地圖片時,需加上你的根目錄。
例如:網站是 https://yoursite.com/blog
,引用一張img/xx.png
圖片,則設置background為 `url(/blog/img/xx.png)
background:'#49B202'
background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)
修改 主題配置文件
1 | # footer是否顯示圖片背景(與top_img一致) |
配置的值 | 效果 |
---|---|
留空/false | 顯示默認的顔色 |
img鏈接 | 圖片的鏈接,顯示所配置的圖片 |
顔色( HEX值 - #0000FF RGB值 - rgb(0,0,255) 顔色單詞 - orange 漸變色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%) ) | 對應的顔色 |
true | 顯示跟 top_img 一樣 |
true
修改 主題配置文件
1 | # Typewriter Effect (打字效果) |
好看的綵帶背景,可設置每次刷新更換綵帶,或者每次點擊更換綵帶
修改 主題配置文件
1 | canvas_ribbon: |
相關配置可查看canvas_ribbon
好看的綵帶背景,會飄動
修改 主題配置文件
1 | canvas_fluttering_ribbon: |
修改 主題配置文件
1 | canvas_nest: |
zIndex
建議只在-1
和9999
上選-1
代表煙火效果在底部9999
代表煙火效果在前面
修改 主題配置文件
1 | fireworks: |
修改 主題配置文件
1 | # 點擊出現愛心 |
修改 主題配置文件
1 | # 點擊出現文字,文字可自行修改 |
會改變ol、ul、h1-h5的樣式
field
配置生效的區域
post
只在文章頁生效site
在全站生效修改 主題配置文件
1 | # 美化頁面顯示 |
title-prefix-icon
填寫的是fontawesome的icon的Unicode數。
未開啟美化
開啟美化
可自行設置字體的font-family
如不需要配置,請留空
修改 主題配置文件
1 | # Global font settings |
可自行設置字體的font-family
如不需要配置,請留空。
如不需要使用網絡字體,只需要把font_link留空就行
修改 主題配置文件
1 | # Font settings for the site title and site subtitle |
可設置主頁中顯示的網站副標題或者喜歡的座右銘。
修改 主題配置文件
1 | # 主頁subtitle |
當進入網頁時,因為加載速度的問題,可能會導致 top_img 圖片出現斷層顯示,或者網頁加載不全而出現等待時間,開啟preloader後,會顯示加載動畫,等頁面加載完,加載動畫會消失。
主題支持 pace.js 的加載動畫,具體可查看 pace.js
配置 butterly.yml
1 | # 加載動畫 Loading Animation |
fullpage-loading
要為Butterfly
配上字數統計特性, 你需要如下幾個步驟:
打開 hexo 工作目錄
npm install hexo-wordcount --save
or yarn add hexo-wordcount
修改 主題配置文件
:
1 | wordcount: |
只能開啟一個
如果你並不想為某張圖片添加大圖查看模式,你可以使用 html 格式引用圖片,併為圖片添加 no-lightbox
class 名。
修改 主題配置文件
1 | # fancybox http://fancyapps.com/fancybox/3/ |
修改 主題配置文件
1 | medium_zoom: true |
當用户點擊鏈接,通過ajax更新頁面需要變化的部分,然後使用HTML5的pushState修改瀏覽器的URL地址。
這樣可以不用重複加載相同的資源(css/js), 從而提升網頁的加載速度。
1 | # Pjax [Beta] |
對於一些第三方插件,有些並不支持 pjax 。
你可以把網頁加入到 exclude
裏,這個網頁會被 pjax 排除在外。
點擊該網頁會重新加載網站
使用pjax後,一些自己DIY的js可能會無效,跳轉頁面時需要重新調用,請參考Pjax文檔
使用pjax後,一些個別頁面加載的js/css,將會改為所有頁面都加載
Butterfly的Pjax目前仍有一些問題,請留意
如果你在使用中發現問題,歡迎反饋Bugs
Snackbar 彈窗,根據自己愛好開啟
修改 主題配置文件
1 | # Snackbar 彈窗 |
未開啟Snackbar
開啟Snackbar
當鼠標懸停到鏈接上超過 65 毫秒時,Instantpage 會對該鏈接進行預加載,可以提升訪問速度。
修改配置文件
1 | # https://instant.page/ |
如果你跟我一樣,每次看到網頁上的中文字和英文、數字、符號擠在一塊,就會坐立難安,忍不住想在它們之間加個空格。這個外掛正是你在網路世界走跳所需要的東西,它會自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。
修改配置文件
1 | # https://github.com/vinta/pangu.js |
field
只支持兩個參數,post
(只在文章頁生效)和site
(全站生效)
要為Butterfly
配上 PWA 特性, 你需要如下幾個步驟:
打開 hexo 工作目錄
npm install hexo-offline --save
或者 yarn add hexo-offline
在根目錄創建 hexo-offline.config.cjs
文件,並增加以下內容。
1 | // offline config passed to workbox-build. |
更多內容請查看 hexo-offline的官方文檔
主題配置文件
中開啟 pwa 選項。1 | pwa: |
source/
目錄中創建manifest.json
文件。1 | { |
你也可以通過 Web App Manifest快速創建manifest.json
。(Web App Manifest 要求至少包含一個 512*512 像素的圖標)
可以通過Chrome
插件Lighthouse
檢查 PWA 配置是否生效以及配置是否正確。
Lighthouse
插件 (Lighthouse
插件要求至少包含一個 512*512 像素的圖標)關於 PWA(漸進式增強 Web 應用)的更多內容請參閲 Google Tools for Web Developers
在 head
裏增加一些 meta 資料,例如縮略圖、標題、時間等等。當你分享網頁到一些平台時,平台會讀取 Open Graph 的內容,展示縮略圖,標題等等信息。
修改配置文件
1 | # Open graph meta tags |
有些 CSS 並不是所有瀏覽器都支持,需要增加對應的前綴才會生效。
開啟 css_prefix
後,會自動為一些 CSS 增加前綴。(會增加 20%的體積)
修改配置文件
1 | # Add the vendor prefixes to ensure compatibility |
2.3.0以上支持
如想添加額外的js/css/meta等等東西,可以在Inject裏添加,支持添加到head(</body>
標籤之前)和bottom(</html>
標籤之前)。
請注意:以標準的html格式添加內容
例如
1 | inject: |
留意: 如果你的網站根目錄不是'/',使用本地圖片時,需加上你的根目錄。
例如:網站是 https://yoursite.com/blog
,引用css/xx.css
,則設置為<link rel="stylesheet" href="/blog/css/xx.css">
配置文件中最後一部分CDN,裏面是主題所引用到的文件,可自行配置CDN。(非必要請勿修改,配置後請確認鏈接是否能訪問)
1 | CDN: |
參數 | 解釋 |
---|---|
internal_provider | 主題內部文件 可選 local/jsdelivr/unpkg/cdnjs/custom lcoal 為本地加載,custom 為自定義格式,需配置 custom_format 注意: 如果使用的是 Dev 版,只能設置為 local |
third_party_provider | 第三方文件 可選 local/jsdelivr/unpkg/cdnjs/custom lcoal 為本地加載,custom 為自定義格式,需配置 custom_format 注意: 如果你選擇 local 需要安裝 hexo-butterfly-extjs 插件 |
version | true/false 為 cdn 加上指定版本號 |
custom_format | 自定義格式 |
option | 你可以在這裏更換部分文件,會覆蓋原有的配置 |
如需修改版本號,可修改主題目錄
的 'plugins.yml' 中對應插件的 version
請確保你修改的版本號,你所使用的 cdn 有收錄
提供以下參數
參數 | 解釋 |
---|---|
name | npm 上的包名 |
file | npm 上的文件路徑 |
min_file | npm 上的文件路徑(壓縮過的文件) |
cdnjs_name | cdnjs 上的包名 |
cdnjs_file | cdnjs 上的文件路徑 |
min_cdnjs_file | cdnjs 上的文件路徑(壓縮過的文件) |
version | 插件版本號 |
部分可用的第三方 CDN 列表
❓ Butterfly 安裝文檔(五) 主題問答]]>請確保你選擇的 CDN 有收錄主題使用的第三方插件
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 📌 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程
你可以通過右下角的 簡 按鈕切換為簡體顯示
修改站點配置文件 _config.yml
默認語言是 en
主題支持三種語言
修改網站各種資料,例如標題、副標題和郵箱等個人資料,請修改博客根目錄的_config.yml
主題配置文件中
1 | nav: |
參數 | 解釋 |
---|---|
logo | 網站的 logo,支持圖片,直接填入圖片鏈接 |
display_title | 是否顯示網站標題,填寫 true 或者 false |
fixed | 是否固定狀態欄,填寫 true 或者 false |
修改 主題配置文件
1 | Home: / || fas fa-home |
必須是 /xxx/
,後面||
分開,然後寫圖標名。
如果不希望顯示圖標,圖標名可不寫。
默認子目錄是展開的,如果你想要隱藏,在子目錄裏添加 hide
。
1 | List||fas fa-list||hide: |
注意: 導航的文字可自行更改
例如:
1 | menu: |
代碼塊中的所有功能只適用於 Hexo 自帶的代碼渲染
如果使用第三方的渲染器,不一定會有效
Butterfly
支持6種代碼高亮樣式:
修改 主題配置文件
1 | highlight_theme: light |
darker
pale night
light
ocean
mac
mac light
主題支持代碼複製功能
修改 主題配置文件
1 | highlight_copy: true |
在默認情況下,代碼框自動展開,可設置是否所有代碼框都關閉狀態,點擊>
可展開代碼
>
打開 >
點擊按鈕>
按鈕修改 主題配置文件
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 在編譯的時候不會實現代碼自動換行。如果你不希望在代碼塊的區域裏有橫向滾動條的話,那麼你可以考慮開啟這個功能。
修改 主題配置文件
1 | code_word_wrap: true |
如果你是使用 highlight 渲染,需要找到你站點的 Hexo 配置文件_config.yml
,將line_number
改成false
:
1 | highlight: |
如果你是使用 prismjs 渲染,需要找到你站點的 Hexo 配置文件_config.yml
,將line_number
改成false
:
1 | prismjs: |
設置
code_word_wrap
之前:
設置
code_word_wrap
之後:
3.7.0 及以上支持
可配置代碼高度限制,超出的部分會隱藏,並顯示展開按鈕。
1 | highlight_height_limit: false # unit: px |
注意:
單位是 px
,直接添加數字,如 200
實際限制高度為 highlight_height_limit + 30 px
,多增加 30px 限制,目的是避免代碼高度只超出highlight_height_limit 一點時,出現展開按鈕,展開沒內容。
不適用於隱藏後的代碼塊( css 設置 display: none)
Butterfly支持 font-awesome v6 圖標.
書寫格式 圖標名:url || 描述性文字 || color
1 | social: |
圖標名可在這尋找
PC:
Mobile:
修改 主題配置文件
1 | avatar: |
如果不要顯示頂部圖,可直接配置 disable_top_img: true
頂部圖的獲取順序,如果都沒有配置,則不顯示頂部圖。
頁面頂部圖的獲取順序:
各自配置的 top_img
> 配置文件的 default_top_img
文章頁頂部圖的獲取順序:
各自配置的 top_img
> cover
> 配置文件的 default_top_img
配置中的值:
配置 | 解釋 |
---|---|
index_img | 主頁的 top_img |
default_top_img | 默認的 top_img,當頁面的 top_img 沒有配置時,會顯示 default_top_img |
archive_img | 歸檔頁面的 top_img |
tag_img | tag 子頁面 的 默認 top_img |
tag_per_img | tag 子頁面的 top_img,可配置每個 tag 的 top_img |
category_img | category 子頁面 的 默認 top_img |
category_per_img | category 子頁面的 top_img,可配置每個 category 的 top_img |
其它頁面 (tags/categories/自建頁面)和 文章頁 的 top_img
,請到對應的 md 頁面設置front-matter
中的top_img
以上所有的 top_img 可配置以下值
3.2.0 以下版本的配置只支持
- 留空,true 和 false - 顯示默認的顔色
- img鏈接 - 顯示所配置的圖片
配置的值 | 效果 |
---|---|
留空 | 顯示默認的 top_img(如有),否則顯示默認的顔色 (文章頁top_img留空的話,會顯示 cover 的值) |
img鏈接 | 圖片的鏈接,顯示所配置的圖片 |
顔色( HEX值 - #0000FF RGB值 - rgb(0,0,255) 顔色單詞 - orange 漸變色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%) ) | 對應的顔色 |
transparent | 透明 |
false | 不顯示 top_img |
tag_per_img
和 category_per_img
是 3.2.0 新增的內容,可對 tag 和 category 進行單獨的配置
並不推薦為每個 tag 和每個 category 都配置不同的頂部圖,因為配置太多會拖慢生成速度
1 | tag_per_img: |
top_img: false
top_img: orange
top_img: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'
文章的 markdown 文檔上,在 Front-matter
添加 cover
,並填上要顯示的圖片地址。
如果不配置 cover
,可以設置顯示默認的 cover。
如果不想在首頁顯示 cover, 可以設置為 false
。
文章封面的獲取順序
Front-matter 的 cover
>配置文件的 default_cover
>false
修改 主題配置文件
1 | cover: |
參數 | 解釋 |
---|---|
index_enable | 主頁是否顯示文章封面圖 |
aside_enable | 側欄是否顯示文章封面圖 |
archives_enable | 歸檔頁面是否顯示文章封面圖 |
position | 主頁卡片文章封面的顯示位置 - left:全部顯示在左邊 - right:全部顯示在右邊 - both:封面位置以左右左右輪流顯示 |
default_cover | 默認的 cover, 可配置圖片鏈接/顔色/漸變色等 |
當配置多張圖片時,會隨機選擇一張作為cover.此時寫法應為
1 | default_cover: |
left
right
both
這個選項是用來顯示文章的相關信息的。
修改 主題配置文件
1 | post_meta: |
主頁
文章頁
date_format
是 3.2.0 新增的內容,配置時間顯示明確時間還是相對時間
相對時間
明確時間
因為主題UI的關係,主頁文章節選
只支持自動節選
和文章頁description
。
在butterfly
裏,有四種可供選擇
修改 主題配置文件
1 | index_post_content: |
description
在front-matter裏添加
開啟頁面錨點後,當你在進行滾動時,頁面鏈接會根據標題ID進行替換
(注意: 每替換一次,會留下一個歷史記錄。所以如果一篇文章有很多錨點的話,網頁的歷史記錄會很多。)
修改 主題配置文件
1 | # anchor |
可開啟圖片Figcaption描述文字顯示
優先顯示圖片的 title 屬性,然後是 alt 屬性
修改 主題配置文件
1 | photofigcaption: true |
可配置網站是否可以複製、複製的內容是否添加版權信息
1 | # copy settings |
配置 | 解釋 |
---|---|
enable | 是否開啟網站複製權限 |
copyright | 複製的內容後面加上版權信息 |
enable | 是否開啟複製版權信息添加 |
limit_count | 字數限制,當複製文字大於這個字數限制時,將在複製的內容後面加上版權信息 |
添加版權信息後
1 | 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. |
為你的博客文章展示文章版權和許可協議。
修改 主題配置文件
1 | post_copyright: |
由於Hexo 4.1
開始,默認對網址進行解碼,以至於如果是中文網址,會被解碼,可設置decode: true
來顯示中文網址。
如果有文章(例如:轉載文章)不需要顯示版權,可以在文章Front-matter單獨設置
1 | copyright: false |
從3.0.0
開始,支持對單獨文章設置版權信息,可以在文章Front-matter單獨設置
1 | copyright_author: xxxx |
版權顯示截圖
在你每篇文章的結尾,可以添加打賞按鈕。相關二維碼可以自行配置。
對於沒有提供二維碼的,可配置一張軟件的icon圖片,然後在link上添加相應的打賞鏈接。用户點擊圖片就會跳轉到鏈接去。
link可以不寫,會默認為圖片的鏈接。
修改 主題配置文件
1 | reward: |
在文章頁,會有一個目錄,用於顯示TOC。
修改 主題配置文件
1 | toc: |
屬性 | 解釋 |
---|---|
post | 文章頁是否顯示 TOC |
page | 普通頁面是否顯示 TOC |
number | 是否顯示章節數 |
expand | 是否展開 TOC |
style_simple | 簡潔模式(側邊欄只顯示 TOC, 只對文章頁有效 ) |
scroll_percent | 是否顯示滾動進度百分比 |
Toc PC
Toc Mobile
style_simple: true
在你的文章md
文件的頭部,加入toc_number
和toc
,並配置true
或者false
即可。
主題會優先判斷文章Markdown的Front-matter是否有配置,如有,則以Front-matter的配置為準。否則,以主題配置文件中的配置為準
當文章封面設置為 false 時,或者沒有獲取到封面配置,相關文章背景將會顯示主題色。
相關文章推薦的原理是根據文章tags的比重來推薦
修改 主題配置文件
1 | related_post: |
可設置是否顯示文章過期提醒,以更新時間為基準。
1 | # Displays outdated notice for a post (文章過期提醒) |
limit_day
: 距離更新時間多少天才顯示文章過期提醒
message_prev
: 天數之前的文字
message_next
:天數之後的文字
style: flat
style: simple
在文章標題旁邊顯示一個編輯按鈕,點擊會跳轉到對應的鏈接去。
1 | # Post edit |
當文章封面設置為 false 時,或者沒有獲取到封面配置,分頁背景將會顯示主題色。
可設置分頁的邏輯,也可以關閉分頁顯示
1 | # post_pagination (分頁) |
參數 | 解釋 |
---|---|
post_pagination: false | 關閉分頁按鈕 |
post_pagination: 1 | 下一篇顯示的是舊文章 |
post_pagination: 2 | 下一篇顯示的是新文章 |
since
是一個來展示你站點起始時間的選項。它位於頁面的最底部。
修改 主題配置文件
1 | footer: |
custom_text
是一個給你用來在頁腳自定義文本的選項。通常你可以在這裏寫聲明文本等。支持 HTML。
修改 主題配置文件
1 | custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>! |
對於部分人需要寫 ICP 的,也可以寫在 custom_text
裏
1 | custom_text: <a href="icp鏈接"><img class="icp-icon" src="icp圖片"><span>備案號:xxxxxx</span></a> |
可自行決定哪個項目需要顯示,可決定位置,也可以設置不顯示側邊欄。
修改 主題配置文件
1 | aside: |
position: left
position: right
card_tags color: false
card_tags color: true
aside button
訪問 busuanzi 的官方網站查看更多的介紹。
修改 主題配置文件
1 | busuanzi: |
如果需要修改 busuanzi 的 CDN 鏈接,可通過
主題配置文件
的CDN
中的option
進行修改
1 | CDN: |
網頁已運行時間
修改 主題配置文件
1 | runtimeshow: |
3.1.0 起支持
最新評論只會在刷新時才會去讀取,並不會實時變化
由於 API 有 訪問次數限制,為了避免調用太多,主題默認存取期限為 10 分鐘。也就是説,調用後資料會存在 localStorage 裏,10分鐘內刷新網站只會去 localStorage 讀取資料。 10 分鐘期限一過,刷新頁面時才會去調取 API 讀取新的數據。( 3.6.0 新增了 storage
配置,可自行配置緩存時間)
在側邊欄顯示最新評論板塊
修改 主題配置文件
1 | # Aside widget - Newest Comments |
部分配置解釋:
配置 | 解釋 |
---|---|
limit | 顯示的數量 |
storage | 設置緩存時間,單位 分鐘 |
avatar | 是否顯示頭像 |
Demo
簡體繁體互換
右下角會有簡繁轉換按鈕。
修改 主題配置文件
1 | translate: |
簡體
繁體
閲讀模式下會去掉除文章外的內容,避免幹擾閲讀。
只會出現在文章頁面,右下角會有閲讀模式按鈕。
修改 主題配置文件
1 | readmode: true |
右下角會有夜間模式按鈕
修改 主題配置文件
1 | # dark mode |
參數 | 解釋 |
---|---|
button | 是否在右下角顯示日夜模式切換按鈕 |
autoChangeMode | 自動切換的模式 autoChangeMode: 1 跟隨系統而變化,不支持的瀏覽器/系統將按照時間 start 到 end 之間切換為 light mode autoChangeMode: 2 只按照時間 start 到 end 之間切換為 light mode ,其餘時間為 dark mode autoChangeMode: false 取消自動切換 |
start | light mode 的開始時間 |
end | light mode 的結束時間 |
主題配置文件中
1 | # show scroll percent in scroll-to-top button |
1 | # Don't modify the following settings unless you know how they work (非必要請不要修改 ) |
標籤外掛是Hexo獨有的功能,並不是標準的Markdown格式。
以下的寫法,只適用於Butterfly主題,用在其它主題上不會有效果,甚至可能會報錯。使用前請留意
標籤外掛雖然能為主題帶來一些額外的功能和UI方面的強化,但是,標籤外掛也有明顯的限制,使用時請留意。
移植於next主題,並進行修改。
修改 主題配置文件
1 | note: |
icons
和light_bg_offset
只對方法一生效
Note 標籤外掛有兩種用法
1 | {% note [class] [no-icon] [style] %} |
名稱 | 用法 |
---|---|
class | 【可選】標識,不同的標識有不同的配色 ( default / primary / success / info / warning / danger ) |
no-icon | 【可選】不顯示 icon |
style | 【可選】可以覆蓋配置中的 style (simple/modern/flat/disabled) |
simple
1 | {% note simple %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
modern
1 | {% note modern %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
flat
1 | {% note flat %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
disabled
1 | {% note disabled %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
no-icon
1 | {% note no-icon %} |
3.2.0 以上版本支
1 | {% note [color] [icon] [style] %} |
名稱 | 用法 |
---|---|
color | 【可選】顔色 (default / blue / pink / red / purple / orange / green) |
icon | 【可選】可配置自定義 icon (只支持 fontawesome 圖標, 也可以配置 no-icon ) |
style | 【可選】可以覆蓋配置中的 style (simple/modern/flat/disabled) |
simple
1 | {% note 'fab fa-cc-visa' simple %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
modern
1 | {% note 'fab fa-cc-visa' modern %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
flat
1 | {% note 'fab fa-cc-visa' flat %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
disabled
1 | {% note 'fab fa-cc-visa' disabled %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
no-icon
1 | {% note no-icon %} |
2.2.0以上提供
一個圖庫集合。
寫法
1 | <div class="gallery-group-main"> |
例如:
1 | <div class="gallery-group-main"> |
2.0.0 以上提供
區別於舊版的Gallery相冊,新的 Gallery 相冊會自動根據圖片長度進行排版,書寫也更加方便,與 markdown 格式一樣。可根據需要插入到相應的 md。
寫法:
1 | {% gallery [lazyload],[rowHeight],[limit] %} |
參數 | 解釋 |
---|---|
lazyload | 【可選】點擊按鈕加載更多圖片,填寫 true/false。默認為 false 。 |
rowHeight | 【可選】圖片顯示的高度,如果需要一行顯示更多的圖片,可設置更小的數字。默認為 220 。 |
limit | 【可選】每次加載多少張照片。默認為 10 。 |
示例
1 | {% gallery %} |
例如
1 | {% gallery %} |
寫法:
1 | {% gallery url,[link],[lazyload],[rowHeight],[limit] %} |
參數 | 解釋 |
---|---|
url | 【必須】 識別詞 |
link | 【必須】遠程的 json 鏈接 |
lazyload | 【可選】點擊按鈕加載更多圖片,填寫 true/false。默認為 false 。 |
rowHeight | 【可選】圖片顯示的高度,如果需要一行顯示更多的圖片,可設置更小的數字。默認為 220 。 |
limit | 【可選】每次加載多少張照片。默認為 10 。 |
遠程鏈接 Json 的例子
有三個參數,url
是必須存在的,alt
和 title
可有,也可沒有。
1 | [ |
示例
1 | {% gallery url,https://xxxx.com/sss.json %} |
2.2.0以上提供
請注意,tag-hide內的標簽外掛content內都不建議有h1 - h6 等標題。因為Toc會把隱藏內容標題也顯示出來,而且當滾動屏幕時,如果隱藏內容沒有顯示出來,會導致Toc的滾動出現異常。
如果你想把一些文字、內容隱藏起來,並提供按鈕讓用户點擊顯示。可以使用這個標籤外掛。
inline
在文本里面添加按鈕隱藏內容,只限文字
( content不能包含英文逗號,可用‚
)
1 | {% hideInline content,display,bg,color %} |
content: 文本內容
display: 按鈕顯示的文字(可選)
bg: 按鈕的背景顏色(可選)
color: 按鈕文字的顏色(可選)
Demo
1 | 哪個英文字母最酷? {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %} |
哪個英文字母最酷?
門裏站着一個人?
block
獨立的block隱藏內容,可以隱藏很多內容,包括圖片,代碼塊等等
( display 不能包含英文逗號,可用‚
)
1 | {% hideBlock display,bg,color %} |
Demo
1 | 查看答案 |
查看答案
2.3.0以上支持
如果你需要展示的內容太多,可以把它隱藏在收縮框裏,需要時再把它展開。
( display 不能包含英文逗號,可用‚
)
1 | {% hideToggle display,bg,color %} |
Demo
1 | {% 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
使用mermaid標籤可以繪製Flowchart(流程圖)、Sequence diagram(時序圖 )、Class Diagram(類別圖)、State Diagram(狀態圖)、Gantt(甘特圖)和Pie Chart(圓形圖),具體可以查看mermaid文檔
修改 主題配置文件
1 | # mermaid |
寫法:
1 | {% mermaid %} |
例如:
1 | {% mermaid %} |
移植於next主題
使用方法
1 | {% tabs Unique name, [index] %} |
Demo 1 - 預設選擇第一個【默認】
1 | {% tabs test1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 2 - 預設選擇tabs
1 | {% tabs test2, 3 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 3 - 沒有預設值
1 | {% tabs test3, -1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 4 - 自定義Tab名 + 只有icon + icon和Tab名
1 | {% tabs test4 %} |
tab名字為第一個Tab
只有圖標 沒有Tab名字
名字+icon
3.0以上適用
使用方法:
1 | {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} |
Demo
1 | This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %} |
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
1 | {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %} |
more than one button in center
1 | {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %} |
1 | <div class="btn-center"> |
主題中的圖片都是默認以塊級元素
顯示,如果你想以內聯元素
顯示,可以使用這個標簽外掛。
1 | {% inlineImg [src] [height] %} |
Demo
1 | 你看我長得漂亮不 |
由於 hexo 的渲染限制, 在段落開頭使用 label 標籤外掛會出現一些問題。例如:連續開頭使用 label 標籤外掛的段落無法換行
建議 不要 在段落開頭使用 label 標籤外掛
高亮所需的文字
1 | {% label text color %} |
參數 | 解釋 |
---|---|
text | 文字 |
color | 【可選】背景顏色,默認為 default default/blue/pink/red/purple/orange/green |
Demo
1 | 臣亮言:{% label 先帝 %}創業未半,而{% label 中道崩殂 blue %}。今天下三分,{% label 益州疲敝 pink %},此誠{% label 危急存亡之秋 red %}也!然侍衞之臣,不懈於內;{% label 忠志之士 purple %},忘身於外者,蓋追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣;不宜妄自菲薄,引喻失義,以塞忠諫之路也。 |
臣亮言:先帝 創業未半,而中道崩殂 。今天下三分,益州疲敝 ,此誠危急存亡之秋 也!然侍衞之臣,不懈於內;忠志之士 ,忘身於外者,蓋追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣;不宜妄自菲薄,引喻失義,以塞忠諫之路也。
宮中、府中,俱為一體;陟罰臧否,不宜異同。若有作奸 、犯科 ,及為忠善者,宜付有司,論其刑賞,以昭陛下平明之治;不宜偏私,使內外異法也。
4.0.0 以上支持
1 | {% timeline title,color %} |
參數 | 解釋 |
---|---|
title | 標題/時間線 |
color | timeline 顏色 default(留空) / blue / pink / red / purple / orange / green |
Demo
1 | {% timeline 2022 %} |
2022
01-02
這是測試頁面
1 | {% timeline 2022,blue %} |
2022
01-02
這是測試頁面
1 | {% timeline 2022,pink %} |
2022
01-02
這是測試頁面
1 | {% timeline 2022,red %} |
2022
01-02
這是測試頁面
1 | {% timeline 2022,purple %} |
2022
01-02
這是測試頁面
1 | {% timeline 2022,orange %} |
2022
01-02
這是測試頁面
1 | {% timeline 2022,green %} |
2022
01-02
這是測試頁面
4.1.0 支持
可在任何界面插入類似友情鏈接列表效果
內容格式與友情鏈接界面一樣,支持 yml 格式
1 | {% flink %} |
Demo
1 | {% flink %} |
在頁面上渲染樂譜
修改 主題配置文件
1 | # abcjs (樂譜渲染) |
寫法:
1 | {% score %} |
Demo
1 | {% score %} |
在頁面上顯示系列文章
修改 主題配置文件
1 | series: |
寫法:
1 | {% series %} |
在文章的 front-matter
上添加參數 series,並給與一個標識
使用此標簽外掛,會把相同標識的文章以列表的形式展示
如果不寫 series 標識,則默認為你使用此標簽外掛所在的文章的 series 標識
Demo
1 | {% series markdown %} |
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 📌 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程
你可以通過右下角的 簡 按鈕切換為簡體顯示
Front-matter 是 markdown 文件最上方以 ---
分隔的區域,用於指定個別檔案的變數。
頁面
配置文章頁
配置如果標注可選
的參數,可根據自己需要添加,不用全部都寫在 markdown 裏
1 | --- |
寫法 | 解釋 |
---|---|
title | 【必需】頁面標題 |
date | 【必需】頁面創建日期 |
type | 【必需】標籤、分類和友情鏈接三個頁面需要配置 |
updated | 【可選】頁面更新日期 |
description | 【可選】頁面描述 |
keywords | 【可選】頁面關鍵字 |
comments | 【可選】顯示頁面評論模塊 (默認 true) |
top_img | 【可選】頁面頂部圖片 |
mathjax | 【可選】顯示mathjax (當設置mathjax的per_page: false時,才需要配置,默認 false) |
katex | 【可選】顯示katex (當設置katex的per_page: false時,才需要配置,默認 false) |
aside | 【可選】顯示側邊欄 (默認 true) |
aplayer | 【可選】在需要的頁面加載aplayer的js和css,請參考文章下面的音樂 配置 |
highlight_shrink | 【可選】配置代碼框是否展開 (true/false) (默認為設置中highlight_shrink的配置) |
random | 【可選】配置友情鏈接是否隨機排序(默認為 false) |
1 | --- |
寫法 | 解釋 |
---|---|
title | 【必需】文章標題 |
date | 【必需】文章創建日期 |
updated | 【可選】文章更新日期 |
tags | 【可選】文章標籤 |
categories | 【可選】文章分類 |
keywords | 【可選】文章關鍵字 |
description | 【可選】文章描述 |
top_img | 【可選】文章頂部圖片 |
cover | 【可選】文章縮略圖(如果沒有設置top_img,文章頁頂部將顯示縮略圖,可設為false/圖片地址/留空) |
comments | 【可選】顯示文章評論模塊(默認 true) |
toc | 【可選】顯示文章TOC(默認為設置中toc的enable配置) |
toc_number | 【可選】顯示toc_number(默認為設置中toc的number配置) |
toc_style_simple | 【可選】顯示 toc 簡潔模式 |
copyright | 【可選】顯示文章版權模塊(默認為設置中post_copyright的enable配置) |
copyright_author | 【可選】文章版權模塊的文章作者 |
copyright_author_href | 【可選】文章版權模塊的文章作者 鏈接 |
copyright_url | 【可選】文章版權模塊的文章連結 鏈接 |
copyright_info | 【可選】文章版權模塊的版權聲明 文字 |
mathjax | 【可選】顯示mathjax(當設置 mathjax 的 per_page: false 時,才需要配置,默認 false ) |
katex | 【可選】顯示 katex (當設置 katex 的 per_page: false 時,才需要配置,默認 false ) |
aplayer | 【可選】在需要的頁面加載 aplayer 的 js 和 css,請參考文章下面的音樂 配置 |
highlight_shrink | 【可選】配置代碼框是否展開(true/false)(默認為設置中 highlight_shrink 的配置) |
aside | 【可選】顯示側邊欄 (默認 true) |
abcjs | 【可選】加載 abcjs (當設置 abcjs 的 per_page: false 時,才需要配置,默認 false ) |
前往你的 Hexo 博客的根目錄
輸入 hexo new page tags
你會找到 source/tags/index.md
這個文件
修改這個文件:
記得添加 type: "tags"
1 | --- |
參數 | 解釋 |
---|---|
type | 【必須】頁面類型,必須為 tags |
orderby | 【可選】排序方式 :random/name/length |
order | 【可選】排序次序: 1, asc for ascending; -1, desc for descending |
前往你的 Hexo 博客的根目錄
輸入 hexo new page categories
你會找到 source/categories/index.md
這個文件
修改這個文件:
記得添加 type: "categories"
1 | --- |
為你的博客創建一個友情鏈接!
前往你的 Hexo 博客的根目錄
輸入 hexo new page link
你會找到 source/link/index.md
這個文件
修改這個文件:
記得添加 type: "link"
1 | --- |
在Hexo博客目錄中的 source/_data
(如果沒有 _data 文件夾,請自行創建),創建一個文件 link.yml
1 | - class_name: 友情鏈接 |
class_name
和 class_desc
支持 html 格式書寫,如不需要,也可以留空。
從 4.0.0
開始,支持從遠程加載友情鏈接,遠程拉取只支持 json
。
注意: 選擇遠程加載後,本地生成的方法會無效。
在 source/link/index.md
這個文件的 front-matter 添加遠程鏈接
1 | flink_url: xxxxx |
Json 的格式
1 | [ |
主題支持友情鏈接隨機排序,只需要在頂部 front-matter
添加 random: true
由 2.2.0 起,友情鏈接界面可以由用户自己自定義,只需要在友情鏈接的md檔設置就行,以普通的Markdown格式書寫。
圖庫頁面只是普通的頁面,你只需要 hexo n page xxxxx
創建你的頁面就行
然後使用標簽外掛 galleryGroup,具體用法請查看對應的內容。
1 | <div class="gallery-group-main"> |
子頁面也是普通的頁面,你只需要 hexo n page xxxxx
創建你的頁面就行
然後使用標簽外掛 gallery,具體用法請查看對應的內容。
1 | {% gallery %} |
如果你想要使用 /photo/ohmygirl
這樣的鏈接顯示你的圖片內容
你可以把創建好的 ohmygirl
整個文件夾移到 photo
文件夾裏去
主題內置了一個簡單的 404 頁面,可在設置中開啟
本地預覽時,訪問出錯的網站是不會跳到 404 頁面的。
如需本地預覽,請訪問 http://localhost:4000/404.html
1 | # A simple 404 page |
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 📌 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程
你可以通過右下角的 簡 按鈕切換為簡體顯示
hexo-theme-butterfly
是基於 hexo-theme-melody 的基礎上進行開發的。
穩定版【建議】
在你的 Hexo 根目錄裏
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
測試版
測試版可能存在 bug,追求穩定的請安裝穩定版
如果想要安裝比較新的 dev 分支,可以
1 | git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
升級方法:在主題目錄下,運行 git pull
穩定版【建議】
在你的 Hexo 根目錄裏
1 | git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly |
測試版
測試版可能存在Bugs,追求穩定的請安裝穩定版
如果想要安裝比較新的dev分支,可以
1 | git clone -b dev https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly |
升級方法:在主題目錄下,運行 git pull
此方法只支持 Hexo 5.0.0 以上版本
通過 npm 安裝並不會在 themes 裏生成主題文件夾,而是在 node_modules 裏生成
在你的 Hexo 根目錄裏
1 | npm install hexo-theme-butterfly |
升級方法:在 Hexo 根目錄下,運行 npm update hexo-theme-butterfly
修改 Hexo 根目錄下的 _config.yml
,把主題改為 butterfly
1 | theme: butterfly |
如果你沒有 pug 以及 stylus 的渲染器,請下載安裝:
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
為了減少升級主題後帶來的不便,請使用以下方法(建議,可以不做)。
在 hexo 的根目錄創建一個文件 _config.butterfly.yml
,並把主題目錄的 _config.yml
內容複製到 _config.butterfly.yml
去。( 注意: 複製的是主題的 _config.yml
,而不是 hexo 的 _config.yml
)
注意: 不要把主題目錄的
_config.yml
刪掉
注意: 以後只需要在
_config.butterfly.yml
進行配置就行。
如果使用了_config.butterfly.yml
, 配置主題的_config.yml
將不會有效果。
Hexo會自動合併主題中的 _config.yml
和 _config.butterfly.yml
裏的配置,如果存在同名配置,會使用 _config.butterfly.yml
的配置,其優先度較高。
臣亮言:先帝創業未半而中道崩殂,今天下三分,益州疲弊,此誠危急存亡之秋也。然侍衞之臣不懈於內,忠志之士忘身於外者,蓋追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣,不宜妄自菲薄,引喻失義,以塞忠諫之路也。
宮中府中,俱為一體;陟罰臧否,不宜異同:若有作奸犯科及為忠善者,宜付有司論其刑賞,以昭陛下平明之理;不宜偏私,使內外異法也。
侍中、侍郎郭攸之、費禕、董允等,此皆良實,志慮忠純,是以先帝簡拔以遺陛下:愚以為宮中之事,事無大小,悉以諮之,然後施行,必能裨補闕漏,有所廣益。
將軍向寵,性行淑均,曉暢軍事,試用於昔日,先帝稱之曰“能”,是以眾議舉寵為督:愚以為營中之事,悉以諮之,必能使行陣和睦,優劣得所。
親賢臣,遠小人,此先漢所以興隆也;親小人,遠賢臣,此後漢所以傾頹也。先帝在時,每與臣論此事,未嘗不歎息痛恨於桓、靈也。侍中、尚書、長史、參軍,此悉貞良死節之臣,願陛下親之、信之,則漢室之隆,可計日而待也。
臣本布衣,躬耕於南陽,苟全性命於亂世,不求聞達於諸侯。先帝不以臣卑鄙,猥自枉屈,三顧臣於草廬之中,諮臣以當世之事,由是感激,遂許先帝以驅馳。後值傾覆,受任於敗軍之際,奉命於危難之間:爾來二十有一年矣。
先帝知臣謹慎,故臨崩寄臣以大事也。受命以來,夙夜憂歎,恐託付不效,以傷先帝之明;故五月渡瀘,深入不毛。今南方已定,兵甲已足,當獎率三軍,北定中原,庶竭駑鈍,攘除奸兇,興復漢室,還於舊都。此臣所以報先帝而忠陛下之職分也。至於斟酌損益,進盡忠言,則攸之、禕、允之任也。
願陛下託臣以討賊興復之效,不效,則治臣之罪,以告先帝之靈。若無興德之言,則責攸之、禕、允等之慢,以彰其咎;陛下亦宜自謀,以諮諏善道,察納雅言,深追先帝遺詔。臣不勝受恩感激。
今當遠離,臨表涕零,不知所言。
李白(701年5月19日-762年11月30日),字太白,號青蓮居士,中國唐朝詩人,自言祖籍隴西成紀(今甘肅省天水市秦安縣),先世西涼武昭王李暠之後,與李唐皇室同宗。幼時內遷,寄籍劍南道綿州(今四川省江油市青蓮鎮)。另外,郭沫若研究認為李白出生於吉爾吉斯碎葉河上的碎葉城,屬唐安西都護府(今楚河州托克馬克市),該説有一定影響。有「詩仙」、「詩俠」、「酒仙」、「謫仙人」等稱呼,活躍於盛唐,為傑出的浪漫主義詩人。與杜甫合稱「李杜」。被賀知章驚呼為「天上謫仙」。
金樽清酒鬥十千,玉盤珍羞值萬錢。
停杯投箸不能食,拔劍四顧心茫然。
欲渡黃河冰塞川,將登太行雪暗天。
閒來垂釣碧溪上,忽復乘舟夢日邊。
行路難,行路難,多歧路,今安在?
長風破浪會有時,直掛雲帆濟滄海。
大道如青天,我獨不得出。
羞逐長安社中兒,赤雞白狗賭梨慄。
彈劍作歌奏苦聲,曳裾王門不稱情。
淮陰市井笑韓信,漢朝公卿忌賈生。
君不見昔時燕家重郭隗,擁篲折節無嫌猜。
劇辛樂毅感恩分,輸肝剖膽效英才。
昭王白骨縈蔓草,誰人更掃黃金台?
行路難,歸去來!
有耳莫洗潁川水,有口莫食首陽蕨。
含光混世貴無名,何用孤高比雲月?
吾觀自古賢達人,功成不退皆殞身。
子胥既棄吳江上,屈原終投湘水濱。
陸機雄才豈自保,李斯税駕苦不早。
華亭鶴唳詎可聞,上蔡蒼鷹何足道。
君不見吳中張翰稱達生,秋風忽憶江東行。
且樂生前一杯酒,何須身後千載名!
君不見,黃河之水天上來,
奔流到海不復回?
君不見,高堂明鏡悲白髮,
朝如青絲暮成雪?
人生得意須盡歡,
莫使金樽空對月。
天生我材必有用,
千金散盡還復來。
烹羊宰牛且為樂,
會須一飲三百杯。
岑夫子,丹丘生,
將進酒,君莫停。
與君歌一曲,
請君為我側耳聽:
鐘鼓饌玉不足貴,
但願長醉不願醒。
古來聖賢皆寂寞,
惟有飲者留其名。
陳王昔時宴平樂,
斗酒十千恣歡謔。
主人何為言小錢?
徑須沽取對君酌。
五花馬,千金裘。
呼兒將出換美酒,
與爾同銷萬古愁。
《清平調詞三首》是唐代大詩人李白的組詩作品,共三首七言樂府詩。第一首從空間角度寫,以牡丹花比楊貴妃的美豔;第二首從時間角度寫,表現楊貴妃的受寵幸;第三首總承一、二兩首,把牡丹和楊貴妃與君王糅合,融為一體。全詩構思精巧,辭藻豔麗,將花與人渾融在一起寫,描繪出人花交映、迷離恍惚的景象,顯示了詩人高超的藝術功力。
雲想衣裳花想容,春風拂檻露華濃;
若非羣玉山頭見,會向瑤台月下逢。
一枝紅豔露凝香,雲雨巫山空斷腸。
借問漢宮誰得似?可憐飛燕倚新粧。
名花傾國兩相歡,常得君王帶笑看。
解識春風無限恨,沉香亨北倚闌千。
1 | This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly %} |
This is my website, click the button Butterfly
This is my website, click the button Butterfly
1 | This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block larger %} |
more than one button in center
1 | <div class="btn-center"> |
1 | <div class="btn-center"> |
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d
simple
1 | {% note simple %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
modern
1 | {% note modern %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
flat
1 | {% note flat %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
disabled
1 | {% note disabled %} |
默認 提示塊標籤
default 提示塊標籤
primary 提示塊標籤
success 提示塊標籤
info 提示塊標籤
warning 提示塊標籤
danger 提示塊標籤
no-icon
1 | {% note no-icon %} |
simple
1 | {% note 'fab fa-cc-visa' simple %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
modern
1 | {% note 'fab fa-cc-visa' modern %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
flat
1 | {% note 'fab fa-cc-visa' flat %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
disabled
1 | {% note 'fab fa-cc-visa' disabled %} |
你是刷 Visa 還是 UnionPay
2021年快到了....
小心開車 安全至上
這是三片呢?還是四片?
你是刷 Visa 還是 UnionPay
剪刀石頭布
前端最討厭的瀏覽器
no-icon
1 | {% note no-icon %} |
隱藏文字,點擊顯示文章
哪個英文字母最酷?
門裡站著一個人?
美女
在你的博客根目錄裏
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly |
如果想要安裝比較新的dev分支,可以
1 | git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly |
1 | # H1 |
Alternatively, for H1 and H2, an underline-ish style:
1 | Emphasis, aka italics, with *asterisks* or _underscores_. |
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
1 | 1. First ordered list item |
Actual numbers don't matter, just that it's a number
Ordered sub-list
And another item.
You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
To have a line break without a paragraph, you will need to use two trailing spaces.
Note that this line is separate, but within the same paragraph.
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
Paragraph In unordered list
For example like this.
Common Paragraph with some text.
And more text.
1 | <p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p> |
To reboot your computer, press ctrl+alt+del.
1 | <dl> |
<dt>Markdown in HTML</dt><dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
1 | [I'm an inline-style link](https://www.google.com) |
I'm an inline-style link with title
I'm a relative reference to a repository file
You can use numbers for reference-style link definitions
Or leave it empty and use the link text itself
Some text to show that the reference links can follow later.
1 | hover to see the title text: |
hover to see the title text:
Inline-style:
Reference-style:
Inline code
has back-ticks around
it.
1 | var s = "JavaScript syntax highlighting"; |
1 | s = "Python syntax highlighting" |
1 | No language indicated, so no syntax highlighting. |
1 | | |ASCII |HTML | |
ASCII | HTML | |
---|---|---|
Single backticks | 'Isn't this fun?' | 'Isn't this fun?' |
Quotes | "Isn't this fun?" | "Isn't this fun?" |
Dashes | -- is en-dash, --- is em-dash | -- is en-dash, --- is em-dash |
Colons can be used to align columns.
1 | | Tables | Are | Cool | |
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | |
col 2 is | centered | |
zebra stripes | are neat |
The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
1 | Markdown | Less | Pretty |
Markdown | Less | Pretty |
---|---|---|
Still | renders | nicely |
1 | 2 | 3 |
You can find more information about LaTeX mathematical expressions here.
Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.
Quote break.
This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.
Three or more...
1 | --- |
Hyphens
Asterisks
Underscores
1 | Here's a line for us to start with. |
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.
1 | This is a regular paragraph. |
This is a regular paragraph.
Foo |
This is another regular paragraph.
1 | <a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU |
Pure markdown version:
]]>