PureBlue 主題更新記錄

• 2019 年 11 月 8 日
• 筆記

2019.6.3：

修復文章目錄過長覆蓋 footer 的問題 本來想集成 Alogolia 搜索，無奈問題一個接着一個，只好放棄

2019.5.29：

完成部分移動端適配工作 是的，終於填了一點坑了。用的是媒體查詢，雖說沒有適配全部尺寸的手機，但是大部分已經可以正常顯示了，第一次看到博客在手機上正常顯示還是很開心的哈哈哈。總的來說最近更新比較頻繁，兩天三頭就改一些地方，是時候 release 一下了。

2019.5.27：

修改導航欄布局 修復代碼塊與頂部條寬度不一致的 bug。 本來代碼塊和頂部條在同一個父元素里的話是很好控制寬度一致的，無奈插件是直接暴露代碼塊在外面。而我又不想用jq來給它們嵌套一個父元素，所以最後採用了計算代碼塊寬度再賦值給頂部條的方法。

2019.5.21：

改進代碼塊樣式，增加複製功能。 代碼高亮還是用現成的插件實現的，但是在樣式上借鑒了 Carbon，最主要的是在右上角添加了複製代碼功能（有 ZeroClipboard 插件可以用，但是不知怎地用不了，所以自己寫了一個。怎麼實現的就不說了，因為代碼比較丑）。現在代碼高亮效果是這樣的：

function fun(){.....}

2019.5.19：

修改了配色基調 添加站內搜索，現在可以搜索文章了

2019.5.14：

一直覺得banner光禿禿的，所以換上了隨機的背景圖 利用媒體查詢對手機端的樣式做了部分調整（雖然還是沒有達到想要的效果）。感覺是個大工程，還是以後再來弄吧。

2019.5.10：

一點小改動。翻譯文章時突然發現一件事，有的文章標題下是有類似subtitle的東西的，但不是hexo的內置變量，所以自己定義了一個（說實話之前沒考慮到這個問題）。

2019.4.2：

優化了部分代碼 (總算)引入分享插件，只需要在主題的config.yml文件配置即可。之前以為沒法在script標籤里寫ejs，所以採用了在js里拼接字符串的方法，想想真是又笨又奇葩。

2019.4.1：

幾個優化閱讀體驗的小變動 引入了font-awesome庫，增加了一些圖標 現在TOC目錄中的標題會隨着屏幕滾動而對應高亮。為了醒目，暫時採用了我比較喜歡的熒光黃採用紅色 取消純黑字體，現在閱讀文章不會那麼晃眼了 修復代碼塊背景顯示不正常的問題 增加文章字數統計和閱讀時長統計，可配置

2019.3.31:

發佈 Version 1.0

最近確實還是挺忙的。雖說主題做出來了，但是一些大大小小的毛病或者 bug 總是讓我心裏不太舒服，所以花了一些功夫進行了修復，並終於發佈了第一個版本。現在看起來已經好很多了（也已經與初版完全不同了）。至於響應式布局，目前沒打算做，因為我還是習慣用 PC 端瀏覽。

整體布局： 比較直觀的感受應該就是布局上的調整。為了讓整體更加趨向扁平化，我去除了初版中所有圓潤的元素，尤其是那個巨丑的導航欄。還有一個就是稍微美化了一下滑動條，現在和主題更加搭配了。

配色： 雖然主題叫做PureBlue，但並不是所有人都能接受默認的顏色，所以在以藍色為主配色的前提下，我提供了其他的幾種方案可供選擇，只要修改配置文件即可。這個也算是給我的一個tip：為了提高主題的可配置性，應該避免在一些地方採用硬編碼，而是代之以變量（stylus本身是支持書寫變量的）。

閱讀體驗優化： 之前比較尷尬的兩個問題，一個是圖片無法放大查看（= =無法放大的圖片要你何用），一個是沒有文章目錄（閱讀長文非常痛苦）。圖片問題我是用fancybox插件解決的，同時支持放大、下載和分享。這裡有一點比較關鍵:因為md文件引用的圖片默認是放在<p></p>中的，而插件針對的圖片必須有<a></a>嵌套，所以需要用js給所有的img嵌套上<a></a>；至於文章目錄，可以用TOC函數生成，之後再編寫樣式就行。當然，目錄是類似側邊欄的存在，所以必須用js做一些判斷，之後進行適當的定位。

瀏覽體驗優化： 首先是修復了分類頁無法正常進入的問題（之前的分類點擊之後會走archive頁面的布局，所以我暫時給了個空鏈接）；然後是重寫了分頁器，說到這個，之前的分頁器可以說是丑到無以復加，而且非常不人性化，只提供上一頁和下一頁的選擇簡直是不像話有木有！好在這個問題解決了，而且也簡化了一些不必要的代碼；再者一個是導航欄，導航欄條目可以根據當前所在頁面的類型對應高亮。

第三方插件支持： 目前引入了valine評論插件，用起來還是很舒服的。後面看情況可能會增加對gittalk的支持；分享插件，我個人使用的是Addthis，之所以只有個人使用= =，因為這個插件必須要到它的官網去配置，而我要的效果是用戶可以通過主題文件進行配置。所以雖然好用，但不會考慮作為主題的分享插件 增加了對Addthis的支持，現在用戶可以通過配置pubid使用這個插件了。說到插件，以後也許會增加Algolia站內搜索，現在看搜索功能還是比較雞肋的，畢竟標籤和分類其實已經足夠發揮索引功能了增加了本地搜索，用起來感覺還蠻不錯。

其他小改動： 顯示標籤數、分類數和文章數，至於文章閱讀時長和字數的統計可以以後再說；還有就是在after-footer.ejs中統一引用所有的js文件，沒有之前那麼亂糟糟的了；標籤雲的標籤，之前鼠標移入的時候會「鬼畜」，這個問題也得到了修復。

總而言之改動還是挺大的，不過隨着越來越多第三方插件的使用，以後實現去jq化也可能比較麻煩。