这是我的第一篇文章，心情日志
心情日志，第一篇寻觅着自己的伤心之处，请给我一处哭泣的角落
失去了尊严与理想，我只能偷偷的哭泣。
Butterfly 安裝文檔(一) 快速開始
📖 本教程更新於 2022 年 02 月 13 日，教程的內容針對最新穩定版而更新（如果你是舊版，教程會有些出入，請留意）
🦋 Butterfly 已經更新到 4.1.0
📚 文檔目錄
🚀 快速開始 - 📑 主題頁面 - 🛠 主題配置-1 - ⚔️ 主題配置-2 - ❓ 主題問答 - ⚡️ 進階教程 - ✨ 更新日誌 - 🤞 打賞
你可以通過右下角的 簡 按鈕切換為簡體顯示
hexo-theme-butterfly是基於 hexo-theme-melody 的基礎上進行開發的。
安裝Git安裝 (Github)Git安裝 (Gitee)npm安裝穩定版【建議】
在你的 Hexo 根目錄裏
1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
測試版
測試版可能存在 bug，追求穩定的請安裝穩定版
如果想要安裝比較新的 dev 分支，可以
1git clone -b dev https://github.com/je ...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
页脚Footer设置游动的小鱼
前言本文摘自code-anan的博客，此文主要参考花猪老哥的文章，但是老哥有一些细节没有说好，所以遇到了一些困难，好在最后解决了,效果在最下方的页脚
操作步骤
修改footer.pug：根目录下\themes\butterfly\layout\includes\foot.pug文件最后一行中添加以下代码：
1234567#jsi-flying-fish-container.containerscript(src='/js/fish.js')style. @media only screen and (max-width: 767px){ #sidebar_search_box input[type=text]{width:calc(100% - 24px)} }
注意这里引入fish.js的路径是放在/js下，上面的代码最好直接复制不然容易出现有时候游动鱼儿效果失效的情况
首先必须引入需要的jquery文件，网址为https://cdn.bootcss.com/jquery/3.4.1/jquery. ...
关于我的butterfly主题配置文件的一些修改
本文适用于没有Hexo基础的童鞋，这里我会介绍我主题配置文件所有的修改
准备工作首先是下载butterfly主题，在博客根目录下
1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
如果出现克隆失败，把上面的https改成git即可，克隆完成之后根目录下的/themes中就会出现butterfly的主题文件夹，然后要把博客根目录下的_config.yml中的theme属性改成butterfly,注意要有一个空格缩进，改完之后：
123hexo cleanhexo ghexo s
在本地打开是否主题，这里很容易出现一大串数字没有界面这种情况需要安装pug以及 stylus 的渲染器，回到博客根目录下输入；
1npm install hexo-renderer-pug hexo-renderer-stylus --save
安装完成之后再次重复上面的那三个操作，然后出现下面这个图就表示主题配置成功了
这里强烈建议把主题下面的配置文件放到根目录下 ...
自定義側邊欄
適用於 >= 3.8.0
側邊欄現在支持自定義了，可以添加自己喜歡的 widget。
可添加自己的 widget，也可以對現有的 widget 進行排序（博客資料和 公告這兩個固定，其它的能排序）
widget 排序只需要配置 sort_order就行。（使用了 Flex 佈局的 order 屬性，具體可查看 mozilla 文檔。簡單來講，就是配置數字來實現排序，如果不配置，則默認為 0。數字越小，排序越靠前。
12345678910111213141516aside: ... card_recent_post: sort_order: # Don't modify the setting unless you know how it works card_categories: sort_order: # Don't modify the setting unless you know how it works card_tags: sort_order: # Don't modify the setting ...
當設置 top_img 為 false 時
當設置 top_img 為 false 時，不顯示頂部圖
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" class="apl ...
自定義代碼配色
在Butterfly-安裝文檔-三-主題配置中已經介紹瞭如何使用自定義代碼配色。
這篇文章是使用自定義代碼配色的實例教程。
Highlight以使用Kimbie dark主題配色為例子
配置hljs為true修改Hexo根目錄下的_config.yml
123456highlight: enable: true line_number: true auto_detect: false tab_replace: hljs: true
配置highlight_theme為false修改主題配置文件
1highlight_theme: false
下載和修改CSS文件在Github上找到這個CSS
在Hexo的根目錄source文件夾下創立一個self文件夾，在self文件夾創建一個Kimbiedark.css文件
把Github上Kimbie dark的CSS代碼複製到Kimbiedark.css去。（你也可以直接從Github上下載這個CSS）
Kimbiedark.css代碼如下
123456789101112131415161718192021222324252627282930 ...
Butterfly 打賞
非常感謝以下網友的打賞
更新於 2022 - 02 - 04
微信支付寶
名字
金額
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
...