你可以通過右下角的 簡 按鈕切換為簡體顯示
標籤外掛是 Hexo 獨有的功能，並不是標準的 Markdown 格式。
以下的寫法，只適用於 Butterfly 主題，用在其它主題上不會有效果，甚至可能會報錯。使用前請留意
標籤外掛雖然能為主題帶來一些額外的功能和 UI 方面的強化，但是，標籤外掛也有明顯的限制，使用時請留意。
Note (Bootstrap Callout)
移植於 next 主題，並進行修改。
1 | note: |
| 名稱 | 解釋 |
|---|---|
| style | 【可選】標籤樣式 （simple/modern/flat/disabled） |
| icons | 【可選】是否顯示 icon |
| border_radius | 【可選】邊框圓角 |
| light_bg_offset | 【可選】背景色偏移量 |
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 %} |
Gallery 相冊圖庫
2.2.0 以上提供
一個圖庫集合。
寫法
1 | <div class="gallery-group-main"> |
| 參數 | 解釋 |
|---|---|
| name | 圖庫名字 |
| description | 圖庫描述 |
| link | 連接到對應相冊的地址 |
| img-url | 圖庫封面的地址 |
例子
1 | <div class="gallery-group-main"> |
Gallery 相冊
2.0.0 以上提供
區別於舊版的 Gallery 相冊,新的 Gallery 相冊會自動根據圖片長度進行排版，書寫也更加方便，與 markdown 格式一樣。可根據需要插入到相應的 md。
寫法:
1 | {% gallery [button] %} |
| 參數 | 解釋 |
|---|---|
| button | 【可選】點擊按鈕加載更多圖片，填寫 true/false。默認為 false。 |
例子
1 | {% gallery %} |
例如
1 | {% gallery %} |
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]
寫法：
1 | {% gallery url,[link],[button] %} |
| 參數 | 解釋 |
|---|---|
| url | 【必須】 識別詞 |
| link | 【必須】遠程的 json 鏈接 |
| button | 【可選】點擊按鈕加載更多圖片，填寫 true/false。默認為 false。 |
遠程鏈接 Json 的例子
有三個參數，url是必須存在的，alt 和 title 可有，也可沒有。
1 | [ |
示例
1 | {% gallery url,https://xxxx.com/sss.json %} |
Tag-hide
2.2.0 以上提供
請注意，tag-hide 內的標簽外掛 content 內都不建議有 h1 - h6 等標題。因為 Toc 會把隱藏內容標題也顯示出來，而且當滾動屏幕時，如果隱藏內容沒有顯示出來，會導致 Toc 的滾動出現異常。
如果你想把一些文字、內容隱藏起來，並提供按鈕讓用户點擊顯示。可以使用這個標籤外掛。
inline 在文本里面添加按鈕隱藏內容，只限文字
( content 不能包含英文逗號，可用‚)
1 | {% hideInline content,display,bg,color %} |
| 參數 | 解釋 |
|---|---|
| content | 文本內容 |
| display | 【可選】按鈕顯示的文字 |
| bg | 【可選】按鈕的背景顏色 |
| color | 【可選】按鈕文字的顏色 |
例子
1 | 哪個英文字母最酷？ {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %} |
哪個英文字母最酷？
門裏站着一個人?
block獨立的 block 隱藏內容，可以隱藏很多內容，包括圖片，代碼塊等等
( display 不能包含英文逗號，可用‚)
1 | {% hideBlock display,bg,color %} |
| 參數 | 解釋 |
|---|---|
| content | 文本內容 |
| display | 【可選】按鈕顯示的文字 |
| bg | 【可選】按鈕的背景顏色 |
| color | 【可選】按鈕文字的顏色 |
例子
1 | 查看答案 |
查看答案
2.3.0 以上支持
如果你需要展示的內容太多，可以把它隱藏在收縮框裏，需要時再把它展開。
( display 不能包含英文逗號，可用‚)
1 | {% hideToggle display,bg,color %} |
| 參數 | 解釋 |
|---|---|
| display | 顯示的文字 |
| bg | 【可選】背景顏色 |
| color | 【可選】文字的顏色 |
例子
1 | {% hideToggle Butterfly安裝方法 %} |
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 標籤可以繪製 Flowchart（流程圖）、Sequence diagram（時序圖 ）、Class Diagram（類別圖）、State Diagram（狀態圖）、Gantt（甘特圖）和 Pie Chart（圓形圖），具體可以查看mermaid 文檔
1 | # Mermaid |
寫法：
1 | {% mermaid %} |
例子
1 | {% mermaid %} |
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5
Tabs
移植於 next 主題
使用方法
1 | {% tabs Unique name, [index] %} |
| 參數 | 解釋 |
|---|---|
| Unique name | tabs 區塊標籤的唯一名稱，不包含逗號。將用於每個選項卡的 #id 前綴，並附加其索引號。若名稱中有空格，生成 #id 時會將空格替換為短橫線。僅對當前文章/頁面的 URL 必須唯一！ |
| [index] | 【可選】活動選項卡的索引號。如果未指定，將選擇第一個選項卡（1）。如果索引為 -1，則不會選擇任何選項卡，類似於折疊內容。可選參數。 |
| [Tab caption] | 當前選項卡的標題。如果未指定標題，將使用唯一名稱和選項卡索引後綴作為選項卡標題。如果未指定標題，但指定了圖標，標題將為空。 |
| [@icon] | 【可選】FontAwesome 圖標名稱（全名，如 'fas fa-font'）。可以有或沒有空格；例如 'Tab caption @icon' 與 'Tab caption@icon' 類似。 |
例子 1 - 預設選擇第一個【默認】
1 | {% tabs test1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
例子 2 - 預設選擇 tabs
1 | {% tabs test2, 3 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
例子 3 - 沒有預設值
1 | {% tabs test3, -1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
例子 4 - 自定義 Tab 名 + 只有 icon + icon 和 Tab 名
1 | {% tabs test4 %} |
tab 名字為第一個 Tab
只有圖標 沒有 Tab 名字
名字+icon
Button
3.0 以上適用
使用方法：
1 | {% 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/留空 |
例子
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"> |
InlineImg
主題中的圖片都是默認以塊級元素顯示，如果你想以內聯元素顯示，可以使用這個標簽外掛。
1 | {% inlineImg [src] [height] %} |
| 參數 | 解釋 |
|---|---|
| src | 圖片鏈接 |
| height | 【可選】圖片高度限制 |
例子
1 | 你看她長得漂亮不 |
你看我長得漂亮不
我覺得很漂亮
Label
由於 hexo 的渲染限制， 在段落開頭使用 label 標籤外掛會出現一些問題。例如：連續開頭使用 label 標籤外掛的段落無法換行
建議 不要 在段落開頭使用 label 標籤外掛
高亮所需的文字
1 | {% label text color %} |
| 參數 | 解釋 |
|---|---|
| text | 文字 |
| color | 【可選】背景顏色，默認為 defaultdefault/blue/pink/red/purple/orange/green |
例子
1 | 臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。 |
臣亮言：先帝創業未半，而中道崩殂。今天下三分，益州疲敝，此誠危急存亡之秋也！然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作奸、犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。
Timeline
4.0.0 以上支持
1 | {% timeline title,color %} |
| 參數 | 解釋 |
|---|---|
| title | 標題/時間線 |
| color | timeline 顏色 default(留空) / blue / pink / red / purple / orange / green |
例子
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
這是測試頁面
Flink
4.1.0 支持
可在任何界面插入類似友情鏈接列表效果
內容格式與友情鏈接界面一樣，支持 yml 格式
1 | {% flink %} |
例子
1 | {% flink %} |
ABCJS 樂譜
在頁面上渲染樂譜
1 | # abcjs (樂譜渲染) |
| 參數 | 解釋 |
|---|---|
| enable | 是否啟用 ABCJS |
| per_page | 是否每頁都加載 ABCJS, 如果設爲 false, 在你使用 ABCJS 時，你需要在使用 ABCJS 的頁面 Front-matter 添加 abcjs: true |
寫法：
1 | {% score %} |
例子
1 | {% score %} |
X:1 T:alternate heads M:C L:1/8 U:n=!style=normal! K:C treble style=rhythm "Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |] %%text This translates to: [M:C][K:style=normal] [A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |] GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb| [K: style=x] C/A,/ C/C/E C/zz2| w:Rock-y did-nt like that
Series 系列文章
在頁面上顯示系列文章
1 | series: |
| 參數 | 解釋 |
|---|---|
| enable | 是否啟用 series |
| orderBy | 排序方式，默認為 title, 可選 title / date |
| order | 排序方式，默認為 1, 可選 1 (升序) / -1（降序） |
| number | 顯示序列號 |
寫法：
1 | {% series %} |
在文章的 front-matter 上添加參數 series，並給與一個標識
使用此標簽外掛，會把相同標識的文章以列表的形式展示
如果不寫 series 標識，則默認為你使用此標簽外掛所在的文章的 series 標識
例子
1 | {% series docs %} |
- Butterfly 文檔(一) 快速開始
- Butterfly 文檔(二) 主題頁面
- Butterfly 文檔(三) 主題配置
- Butterfly 文檔(四) 標簽外挂
- Butterfly 文檔(五) 主題問答
- Butterfly 文檔(六) 進階教程
Chartjs 圖表
另一種方式添加圖表
1 | # chartjs |
| 參數 | 解釋 |
|---|---|
| enable | 是否啟用 chartjs |
| fontColor | 圖表的字體顏色 |
| borderColor | 圖表的邊框顏色 |
| scale_ticks_backdropColor | 雷達和極區圖表的刻度標籤的背景顏色 |
寫法：
1 | {% chartjs [width, abreast, chartId] %} |
| 參數 | 解釋 |
|---|---|
| width | 【可選】圖表寬度 |
| abreast | 【可選】是否并排顯示，當你寫了 <!-- desc -->, 使用并排模式，圖標和描述將并排顯示。abreast 為 true 時，需要配置 width 的值 |
| chartId | 【可選】圖表 ID |
例子
1 | {% chartjs 70 %} |
{
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "My First dataset",
"backgroundColor": "rgb(255, 99, 132)",
"borderColor": "rgb(255, 99, 132)",
"data": [0, 10, 5, 2, 20, 30, 45]
}]
},
"options": {
"responsive": true,
"title": {
"display": true,
"text": "Chart.js Line Chart"
}
}
}
1 | {% chartjs %} |
{
"type": "radar",
"data": {
"labels": [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running"
],
"datasets": [
{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
},
{
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
}
}
}
1 | {% chartjs 40,true %} |
{
"type": "pie",
"data": {
"labels": [
"编程",
"音乐",
"阅读",
"游戏",
"健身",
"旅游"
],
"datasets": [
{
"label": "喜爱指数",
"data": [
30,
24,
19,
14,
9,
4
],
"backgroundColor": {
"dark-mode": [
"rgba(255, 99, 132, 0.5)",
"rgba(54, 162, 235, 0.5)",
"rgba(255, 206, 86, 0.5)",
"rgba(75, 192, 192, 0.5)",
"rgba(153, 102, 255, 0.5)",
"rgba(255, 159, 64, 0.5)"
],
"light-mode": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
]
},
"borderColor": {
"dark-mode": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"light-mode": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
]
}
}
]
},
"options": {
"plugins": {
"legend": {
"labels": {
"color": {
"dark-mode": "rgba(255, 255, 255, 0.8)",
"light-mode": "rgba(0, 0, 0, 0.8)"
}
}
}
}
}
}
除了计算机编程外，我想不出还有其他让我感兴趣的工作。
我可以无中生有地创造出精美的范式和结构，
在此过程中也解决了无数的小谜团。
I can't think of any other job other than computer programming that interests me.
I can create beautiful paradigms and structures out of nothing,
Countless small mysteries are also solved in the process.
除特別聲明外，本博客所有文章均採用CC BY-NC-SA 4.0 授權協議。轉載請註明出處：Butterfly。
- 微信
- 支付寶
- Stripe
相關文章
2020-05-28
Butterfly 文檔(一) 快速開始
📚 文檔目錄 🚀 快速開始 - 📑 主題頁面 - 📌 主題配置 - ⚔️ 標簽外挂 - ❓ 主題問答 - ⚡️ 進階教程 你可以通過右下角的 簡 按鈕切換為簡體顯示 hexo-theme-butterfly 是基於 hexo-theme-melody 的基礎上進行開發的主题。 安裝Git 安裝npm 安裝如果你身處中國大陸，且訪問 Github 不穩定，你可以用 Gitee 安裝穩定版【建議】 在你的 Hexo 根目錄下 1git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly 測試版 測試版可能存在 Bugs，追求穩定的請安裝穩定版 如果想要安裝比較新的 dev 分支，可以 1git clone -b dev https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly 升級方法：在主題目錄下，運行 git pull 穩定版【建議】 在你的 Hexo...
2020-05-28
Butterfly 文檔(二) 主題頁面
📚 文檔目錄 🚀 快速開始 - 📑 主題頁面 - 📌 主題配置 - ⚔️ 標簽外掛 - ❓ 主題問答 - ⚡️ 進階教程 你可以通過右下角的 簡 按鈕切換為簡體顯示 Front-matterFront-matter 是 markdown 文件最上方以 --- 分隔的區域，用於指定個別檔案的變數。 Page Front-matter 用於 頁面 配置 Post Front-matter 用於 文章頁 配置 如果標注可選的參數，可根據自己需要添加，不用全部都寫在 markdown 裏 Page Front-matter12345678910111213141516171819---title:date:updated:type:comments:description:keywords:top_img:mathjax:katex:aside:aplayer:highlight_shrink:random:limit: type: ...
2020-05-28
Butterfly 文檔(五) 主題問答
📚 文檔目錄 🚀 快速開始 - 📑 主題頁面 - 📌 主題配置 - ⚔️ 標簽外掛 - ❓ 主題問答 - ⚡️ 進階教程 你可以通過右下角的 簡 按鈕切換為簡體顯示 以下是一些網友在安裝的過程中出現的問題。在提問題之前，先看有沒有解決方法。 運行後網頁顯示代碼頁面只顯示 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 or yarn add hexo-renderer-pug...
2020-05-28
Butterfly 文檔(六) 進階教程
📚 文檔目錄 🚀 快速開始 - 📑 主題頁面 - 📌 主題配置 - ⚔️ 標簽外掛 - ❓ 主題問答 - ⚡️ 進階教程 你可以通過右下角的 簡 按鈕切換為簡體顯示 建議 不要把個人需要的文件/圖片放在主題source文件夾裏，因為在升級主題的過程中，可能會把文件覆蓋刪除了。在 Hexo 根目錄的source文件夾裏，創建一個文件夾來放置個人文件/圖片。引用文件直接為/文件夾名稱/文件名 音樂音樂界面使用了插件 hexo-tag-aplayer使用方法請參考插件文檔 音樂頁面只是普通的 page 頁，按普通頁面操作生成就行。 以下內容可供選擇配置 注意： 仍需要安裝插件hexo-tag-aplayer 插件會在每一個文件都插入 js 和 css，為了避免這一情況，3.0 版本內置了 aplayer 需要的 css 和 js。 首先在 Hexo 根目錄 _config 裏配置 asset_inject 為 false 12aplayer: asset_inject: false 然後在你需要使用 aplayer 的頁面...
2020-05-28
Butterfly 文檔(三) 主題配置
📚 文檔目錄 🚀 快速開始 - 📑 主題頁面 - 📌 主題配置 - ⚔️ 標簽外掛 - ❓ 主題問答 - ⚡️ 進階教程 你可以通過右下角的 簡...
2020-07-31
Butterfly添加全局吸底Aplayer教程
以下文章只是教程 如果部署之后，并没有出现 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"...