到原文查看最新更新: https://yunist.cn/hexo/hexo_modify_theme_butterfly/

所有魔改均可取消! 配置默認不開啟, 因此可以平滑換到魔改 butterfly 主題.

首先推介 butterfly 文檔, 這里只介紹魔改部分的配置. 這里的示例僅為合法示例, 即你填了該示例不一定能正確顯示, 僅供參考.

魔改主題 Github 地址

使用主題 & 平滑更換

下載并配置

進入主題目錄, 下載主題

git clone https://github.com/yunwanjia-cloud/hexo-modify-theme-butterfly.git

將下載下來的主題文件夾名字改為 Butterfly , 同時修改hexo配置文件_config.yml，把主題改為Butterfly

theme: Butterfly

如果你沒有 pug 以及stylus的渲染器, 請下載安裝:

npm install hexo-renderer-pug hexo-renderer-stylus --save

or

yarn add hexo-renderer-pug hexo-renderer-stylus

如果你之前不是使用 butterfly 主題, 那么到這里你已經配置完畢, 接下來更改主題下 _config.yml 文件以個性化.

更換

對比魔改主題的 _config.yml 與原主題 _config.yml 的區別, 將魔改配置加上 (默認關閉, 所以加上并不會有什么變化), 并且將原主題多出的配置刪除 (可能沒有). 然后將更改過的 _config.yml 替換魔改主題的 _config.yml 就可以成功啟用.

配置項

random_background

首先你要準備一系列的圖片作為隨機背景的圖片. 你應該把圖片放在 Github 的倉庫. 圖片的命名要求有一定的格式. 比如說, 如果有 5 張圖片, 那么應該命名為 0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg . 或者是 0.png, 1.png, 2.png, 3.png, 4.png . 即編號從 0 開始遞增且后綴必須相同. 將這些圖片存在 Github 倉庫中的某個文件夾中, 就可以開始下一步配置.

• post

值為 true 或 false , 值為 true 即在文章頁開啟隨機背景, false 即在文章頁不開啟隨機背景.

示例: false

• page

值為 true 或 false , 值為 true 即在 page 頁開啟隨機背景, false 即在 page 頁不開啟隨機背景.

示例: true

• username

填你的 Gthub 用戶名.

示例: yunwanjia-cloud

• repo

填存放圖片的 Github 倉庫名

示例: banner

• path

填存放圖片的路徑, 記得在最后和前面加上一個 / . 比如說, 我將圖片存放在倉庫中的 source/img 文件夾中, 那么你應該填 /source/img/ . 如果你直接就放在根目錄, 那么直接填一個 / 即可.

示例: /img/

• img_num

即你的圖片的數量

示例: 55

• suffix

圖片的后綴, 比如 .png , .jpg , .webp 等等.

示例: .jpg

footer_transparent

這個配置常常與隨機背景配合 (更好看) . 與頁腳動態顏色沖突, 請不要同時設置都為 true, 但是可以一個 post 是 true 一個 page 是 true.

• post

值為 true 或 false , 值為 true 即在文章頁使頁腳透明, false 即在文章頁不使頁腳透明 (即原來頁腳).

示例: false

• page

值為 true 或 false , 值為 true 即在 page 頁使頁腳透明, false 即在 page 頁不使頁腳透明 (即原來頁腳).

示例: true

footer_color_change

此配置是用來和隨機背景配合使用的.

與頁腳透明沖突, 請不要同時設置都為 true, 但是可以一個 post 是 true 一個 page 是 true.

• post

值為 true 或 false , 值為 true 即在文章頁使頁腳具有動態顏色, false 即在文章頁不具有動態顏色 (即原來頁腳).

示例: true

• page

值為 true 或 false , 值為 true 即在 page 頁使具有動態顏色, false 即在 page 頁不具有動態顏色 (即原來頁腳).

示例: false

banner_transparent

值為 true 或 false , 值為 true 即隱層 banner, false 即保持原樣. 此配置是用來和隨機背景配合使用的.

示例: true

classify_fold

你們想要的分類折疊! 開啟后, 主頁側邊欄小卡片會啟用目錄折疊.

• enable

值為 true 或 false , 值為 true 即開啟分類折疊, false 即保持原狀.

• post

值為 true 或 false , 值為 true 即可從側邊欄直達文章, false 即保持原狀.

示例: true

效果圖:

jsdelivr_post

自動將圖片替換為 cdn 加速過的鏈接, 僅對圖片有部署在 github 上的博客有效 (雙部署也算) , 因此不能有外鏈..

• post_img

值為 true 或 false , 值為 true 即在文章自動將圖片替換, false 即保持原狀.

示例: true

• dpost_cover

謹慎開啟! 開啟后文章 cover 只能使用文章資源文件夾中的圖片, 否則會出錯. 同時開啟后本地預覽可能會沒有圖片, 這是因為沒有上傳到 Github 倉庫, 請執行 hexo d 后重試. 文章資源文件夾詳情請看 文章資源文件夾.

值為 true 或 false , 值為 true 即將所有 cover 圖片替換, false 即保持原狀.

示例: true

• jsdelivr_url

格式為 "https://cdn.jsdelivr.net/gh/github用戶名/博客倉庫/ , 雙引號要加.

示例: "https://cdn.jsdelivr.net/gh/yunwanjia-cloud/blog/"

blog_opacity

設置透明度.

• post

設置文章頁透明度, 值為 0~1, 0為完全透明, 1為完全不透明.

示例: 1

• page

設置 page 頁透明度, 值為 0~1, 0為完全透明, 1為完全不透明.

示例: 0.8

總結

以上是生活随笔為你收集整理的Hexo 魔改主题 butterfly的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。