Butterfly主題
有些方法只適用hexo-butterfly主題!!
Note (Bootstrap Callout)
更換款式
simple
1
2
3
| {% note simple %}
simple
{% endnote %}
|
modern
1
2
3
| {% note modern %}
modern
{% endnote %}
|
flat
1
2
3
| {% note flat %}
flat
{% endnote %}
|
disabled
1
2
3
| {% note disabled %}
disabled
{% endnote %}
|
no-icon
1
2
3
| {% note no-icon %}
no-icon
{% endnote %}
|
更換顏色
可在note和款式中加入default primary success info warning danger來更換提式區標籤顏色
例如:
1
2
3
| {% note danger simple %}
danger simple
{% endnote %}
|
更換圖示
再加入圖式名稱就行吶~
更多圖式可以去我menu bar的bookmark中的icon找呦!
1
2
3
| {% note 'fab fa-cc-visa' simple %}
你是刷 Visa 還是 UnionPay
{% endnote %}
|
1
2
| {% btn 'https://www.youtube.com/',Youtube %}
{% btn 'https://www.youtube.com/',Youtube,,outline %}
|
1
2
3
| {% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right,block larger %}
{% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right,block center larger %}
{% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right,block right red larger %}
|
如果想要很多button一起在中間 可以用div包起來
1
2
3
4
5
6
7
| <div class="btn-center">
{% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right, purple larger %}
{% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right, red larger %}
{% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right, orange larger %}
{% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right, green larger %}
{% btn 'https://www.youtube.com/',Youtube,far fa-hand-point-right, blue larger %}
</div>
|
Hide Text
inline
只限文字，不能涵蓋英文逗號(但可用ASCII方法)
更多...更多...
1
| {% hideInline 更多...更多...,點擊查看更多,#FF7242,#fff %}
|
用block遮蓋文字
1
2
3
| {% hideBlock 點擊查看更多 %}
更多...更多...
{% endhideBlock %}
|
摺疊文字
方法一
點擊查看更多
更多...更多...
1
2
3
4
5
| <details><summary>點擊查看更多</summary>
更多...更多...
</details>
|
方法二(可更改顏色)
1
2
3
4
5
6
7
| {% hideToggle 點擊查看更多,bg,color %}
更多...更多...
{% endhideToggle %}
{% hideToggle 點擊查看更多,blue,red %}
更多...更多...
{% endhideToggle %}
|
Mermaid
mermaid
使用前請先修改config.yml
1
2
3
4
| mermaid:
enable: true
theme: default
|
Music Player
網易雲音樂
因為地區限制關係，播放的歌曲需要為無限制的
方法一 使用iframe
單曲
1
2
3
4
5
| <iframe
frameborder="no" border="0" marginwidth="0"
marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=1815105886&auto=0&height=66">
</iframe>
|
id 更改歌曲，可透過網易雲網頁版搜尋到自己想要的歌店進去後觀察網址內容，擷取id後的一長串數字再貼到上面程式碼的id後
auto 1-自動播放, 0-不自動播放
width player的長度(單位為像素)
height player的高度(單位為像素)
若真的無法，可以在點進歌曲後點擊生成外播放連結，即可自動幫你生成客製化連結喔!
狐狸的童話客製外播放連結
歌單
1
| <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=6854074501id&auto=1&height=430"></iframe>
|
方法二 使用aplayer
需在文章上方加入:
1
2
3
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
|
接著在想放player的位置加入此即可:
1
| <div class="aplayer" data-id="1815105886" data-server="netease" data-type="song" data-mode="single"></div>
|
方法三 使用插件
這個方法因為我嘗試過後是失敗的哭哭 所以就不放上來的 不過網路上都有很多教學呦~
Gallery
1
2
3
4
5
6
7
8
9
10
| {% gallery %}
{% endgallery %}
|
Tag Plugins Plus
https://akilar.gitee.io/posts/615e2dec/
