之前用的主題沒有很喜歡,所以想要試試看其他的主題。

這次選擇的是butterfly。

jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly

這個主題也是屬於比較熱門的,所以比較不用擔心發生一些沒人發現的錯誤,基本上越多人使用的話,會踩的雷,其他人已經都幫我踩過了。

會選擇這主題除了是熱門的之外,它整體的特效外觀也是我比較喜歡的,名字也聽著順耳(蝴蝶),選擇好主題之後,就開始研究如何無痛轉換過去。

紀錄一些比較印象深的點。

使用hexo g -d 失敗,沒辦法成功部署

使用新的主題重新部署之後,專門部署的那個github repo就被重新清空重新開始,這是一開始我沒遇想到的,會這麼做主要是我想看看網站資料會不會繼承,結果看起來是不會的。

然後就部署時遇到了問題,如圖下:

後來去網路上找到這篇:
(7条消息) hexo d命令报错 ERROR Deployer not found: git_蓝蓝223的博客-CSDN博客

下這一串指令就好了

1
npm install hexo-deployer-git --save

切換主題想要試試結果大報錯

錯誤內容:

1
extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

去網路上找結果,找到這篇完美解決我的問題:
使用hexo theme Butterfly 报错 - 簡書

就是安裝這個然後打開就好了

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

我再度測試換成另外一個網址去部署,但是錯掉了

我決定先不管這個了。

首先我想加大最右邊的滑動條,預設的太小

參考:hexo-matery主题美化(四) - 知乎

就不一個一個寫了,我設置主要參考文章

Hexo 進階補充系列(3) - 更換 NexT 主題: Butterfly 主題客製化設定 | Bosh’s Blog

喂魚功能

看了很多網頁,但是一直失敗,失敗的點我後來發現在於引入jq的問題,後來似乎弄成最新的之後有好點。

成功的第一次,是看這個文章:

Hexo页脚养鱼效果 | 花猪のBlog

相關對我有幫助的文章:

如何在页脚养鱼 | Ln’s Blog

Hexo页脚养鱼效果 - 腾讯云开发者社区-腾讯云

最左邊滾動條優化

我是參考這篇:
【Butterfly】Butterfly自定义1-图片与滚动条 | 云与海

改變加載動畫

我是參考這篇:
Hexo-Butterfly加载动画的魔改 | H

Hexo站点加载动画修改(齿轮效果) - 腾讯云开发者社区-腾讯云

Loading Animation | Akilarの糖果屋

研究歸檔一頁化

歸檔 | 我的倉庫 | ouoholly