It has been 1147 days since the last update, the content of the article may be outdated.

Butterfly主題

有些方法只適用hexo-butterfly主題!!

Markdown常用語法

Note (Bootstrap Callout)

更換款式

simple

simple

markdown
1
2
3
{% note simple %}
simple
{% endnote %}

modern

modern

markdown
1
2
3
{% note modern %}
modern
{% endnote %}

flat

flat

markdown
1
2
3
{% note flat %}
flat
{% endnote %}

disabled

disabled

markdown
1
2
3
{% note disabled %}
disabled
{% endnote %}

no-icon

no-icon

markdown
1
2
3
{% note no-icon %}
no-icon
{% endnote %}

更換顏色

可在note和款式中加入default primary success info warning danger來更換提式區標籤顏色

例如:

danger simple

markdown
1
2
3
{% note danger simple %}
danger simple
{% endnote %}

更換圖示

再加入圖式名稱就行吶~
更多圖式可以去我menu bar的bookmark中的icon找呦!

你是刷 Visa 還是 UnionPay

markdown
1
2
3
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 還是 UnionPay
{% endnote %}

Button

Youtube Youtube
markdown
1
2
{% btn 'https://www.youtube.com/',Youtube %}
{% btn 'https://www.youtube.com/',Youtube,,outline %}
Youtube Youtube Youtube
markdown
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包起來

Youtube Youtube Youtube Youtube Youtube
markdown
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方法)

更多...更多...
html
1
{% hideInline 更多...更多...,點擊查看更多,#FF7242,#fff %}

用block遮蓋文字

更多…更多…

html
1
2
3
{% hideBlock 點擊查看更多 %}
更多...更多...
{% endhideBlock %}

摺疊文字

方法一

點擊查看更多 
更多...更多...
html
1
2
3
4
5
<details><summary>點擊查看更多</summary>

    更多...更多...

</details>

方法二(可更改顏色)

點擊查看更多

更多…更多…

點擊查看更多

更多…更多…

markdown
1
2
3
4
5
6
7
{% hideToggle 點擊查看更多,bg,color %}
更多...更多...
{% endhideToggle %}

{% hideToggle 點擊查看更多,blue,red %}
更多...更多...
{% endhideToggle %}

Mermaid

mermaid

此方法只適用hexo-butterfly主題!!

使用前請先修改config.yml

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

Music Player

網易雲音樂

因為地區限制關係，播放的歌曲需要為無限制的

方法一 使用iframe

單曲
html
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的高度(單位為像素)

若真的無法，可以在點進歌曲後點擊生成外播放連結，即可自動幫你生成客製化連結喔!
狐狸的童話客製外播放連結

歌單

現在貌似不支援歌單了QQ

html
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

需在文章上方加入:

html
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的位置加入此即可:

html
1
<div class="aplayer" data-id="1815105886" data-server="netease" data-type="song" data-mode="single"></div>

方法三 使用插件

這個方法因為我嘗試過後是失敗的哭哭 所以就不放上來的 不過網路上都有很多教學呦~








markdown
1
2
3
4
5
6
7
8
9
10
{% gallery %}
![](https://www.most.gov.tw/most/attachments/191e8ff8-4eab-4ef1-b067-4d8ea0758edd)
![](https://gics.tw/Images/pic/20210424_%E5%B0%8B%E6%89%BE%E8%B3%87%E5%AE%89%E5%A5%B3%E5%A9%95%E6%80%9D_1673.jpg)
![](https://gics.tw/Images/pic/20210424_%E5%B0%8B%E6%89%BE%E8%B3%87%E5%AE%89%E5%A5%B3%E5%A9%95%E6%80%9D_0326.jpg)
![](https://www.flickr.com/photos/presidentialoffice/51157580984/in/dateposted/)
![](https://www.flickr.com/photos/presidentialoffice/51157585569/in/dateposted/)
![](https://gics.tw/Images/pic/20210424_%E5%B0%8B%E6%89%BE%E8%B3%87%E5%AE%89%E5%A5%B3%E5%A9%95%E6%80%9D_0414.jpg)
![](https://gics.tw/Images/pic/20210424_%E5%B0%8B%E6%89%BE%E8%B3%87%E5%AE%89%E5%A5%B3%E5%A9%95%E6%80%9D_0469.jpg)
![](https://gics.tw/Images/pic/20210424_%E5%B0%8B%E6%89%BE%E8%B3%87%E5%AE%89%E5%A5%B3%E5%A9%95%E6%80%9D_0751.jpg)
{% endgallery %}

Tag Plugins Plus

https://akilar.gitee.io/posts/615e2dec/