折騰部落格系列之發布自己的主題：PureBlue

2019 年 11 月 7 日
筆記

這篇文章用來記錄自己開發 PureBlue 主題過程中的感想。

先立一個 Flag

部落格內容固然是最重要的，但是拋開內容不講，部落格本身也應該帶有自己的Tag，而不是光會用別人的輪子。

最早接觸的部落格平台是 CSDN 和部落格園，在上面學習到了很多網友的經驗，於是萌發了想要創建自己部落格的念頭，在寫了幾篇文章後又覺得：為何不自己搭建一個部落格平台呢？因此在今年一月份的寒假搗鼓了 hexo 和 github pages，包括下載各種漂亮的主題、添加各種有意思的插件，一時樂在其中。平靜下來之後，我開始進行知識遷移的工作，把以前存放在印象筆記中的東西重新修改並整合，轉移到個人部落格里，於是內容慢慢充實起來。

直到十幾天前，我用的還是 Next 主題，這的確是一個相當成熟和漂亮的主題，我特別喜歡它的簡潔。直到某天看到一句話：

當你看到你用的主題出現在兩個以上的部落格時，那你就要考慮自己寫一個了。

別說兩個了，Next 主題的用戶數應該是目前所有主題中最多的，而部落格外觀的雷同很顯然是一件非常尷尬的事情。正好在那時我也陷入了一個糾結，就是我一直處於知識輸入的狀態卻鮮有項目上的輸出，簡單地說就是學的多、做的少—-這是很要命的事，畢竟「紙上得來終覺淺」。也就是說我面臨兩個問題：

缺少項目實踐
部落格主題缺少個性化

這兩個問題恰巧有共同的答案，那就是自己製作一個主題。當時想的是這學期能做出來都算好的了，於是立了一個 flag：

不過很欣慰的是，我趕在月底之前把它完成了，前後大約花了14天。（大概是這個 flag 給我的動力）

這是項目地址。

體會和感想

雖然是一個小項目，而且程式碼也寫得比較亂，但是收穫頗豐——接觸到了兩個新的技術，一是模板引擎ejs，二個是css預處理器stylus，還有就是對hexo的原理有了更為深入的理解，至少知道了我寫的markdown文件是怎麼在網頁上渲染出來的，而不是光會用卻不知道原理。

萬事開頭難，前期準備工作的時候真的是一頭霧水。首先是Hexo的官方文檔，寫得很不友好，所以讀起來雲里霧裡；其次是不同主題使用的模板引擎和css預編譯都不同，主題文件的結構也不同，這大大提高了閱讀源碼的難度和花在上面的時間成本。雖然經過「搜刮」，我找到了幾篇教程，但是大部分還是講的不夠淺顯易懂，越看越暈。這時候我意識到兩個重要的問題：

這些東西不是給純新手準備的，我需要先了解基礎的概念
善用搜索引擎，不要將視野局限在中國平台

所以我開始去youtube上尋找相關的影片，幸運的是我的確找到了純新手向的主題製作教程。每集只有幾分鐘，但是對於理解一些基礎概念來說已經足夠。不用擔心聽不懂，因為自帶字幕，再配合up主的操作演示，還是很好理解的。

之後我又Google了相關的文章，成功找到了這個系列教程，這是目前找到的最詳細的教程，真真正正的從零開始教你怎麼做一個主題，所以說實話真的很感謝這位老外。為了加深對主題製作的理解以及方便其他有需求的人，我將這個系列翻譯了過來，可以在我的部落格里找到，當然也可以去Segment Fault。目前我只翻譯了兩篇，第三篇會另外找個時間搞定。

教程看下來，發現難點主要集中在兩個地方：一是理清項目結構，進行合理的組織，二個是設計樣式並具體實現。準備工作差不多之後，就可以開始動工了，不需要太著急，每天完成一部分就行。印象比較深的難點就是垂直時間軸的製作，也就是下面這個東西：

一個是要做出樣式，主要涉及偽元素的使用，以及考慮怎麼讓垂直軸隨著頁面高度增加而延長；二個是邏輯，遍歷所有文章並根據年份進行劃分，這裡需要使用ejs的語法，對Hexo的內置變數也要熟悉。

踩了哪些坑

當然，做這個主題的時候也踩了很多坑，這裡做一下踩坑記錄：

路徑問題。為了使程式碼更容易管理，通常製作主題都是採用模組化的方式，因此存在著大量的文件引用。而A文件引用B文件時，不一定是使用B相對於A的路徑，而要看最終A文件被誰引用。
某篇文章中出現了一行很長的程式碼，因為沒有對它進行換行和溢出處理，導致圖片尺寸無法正常設置，同時所有的文本內容都被擠出div。
在本地測試的時候某些文章無法顯示全文內容，並且底部div消失。這個問題比較奇葩，而且至今無解。猜想應該是渲染出錯還是什麼= =。
寫stylus文件時混用了空格和tab，git報錯。（這個是真的坑，開了sublime的提示才看出來的）
第三方插件失效。返回頂部按鈕是用的第三方jq插件，坑的地方就在於，作者引用jq庫時是用的http鏈接，被瀏覽器阻止了，導致插件失效。一開始以為是快取問題導致的樣式無法修改，在反覆修改和刷新了一個半小時後才想到去控制台看報錯資訊：

所以，為了保險一點還是在項目中放jq文件比較好，當然更好的做法應該是直接用原生js來寫。

改動不生效的問題。比較常見的狀況，在本地預覽一切正常，通過域名訪問的時候改動卻遲遲沒有生效，而且通常的清除瀏覽器快取或者hexo clean還不一定有效。只能說改動的同步還是需要時間的= =
page頁面共用。這個嚴格來說不算坑，而是應該留意的一個地方。Hexo中並沒有專門的展示所有標籤或者所有類別的頁面，拿我用的ejs來說，layout文件夾下的tag.ejs實際指的是單一標籤下的所有文章，同理categories.ejs指的是單一類別下的所有文章。而我們需要的展示頁面實際上是統一放在page.ejs中，再根據條件判斷生成對應頁面。不過我實際操作的時候發現分類頁走的是歸檔頁的布局。~~所以目前這個主題的分類頁無法正常工作，也許之後會找到原因吧~~問題已解決，目前分類頁可以正常工作。
在 js 中引用 hexo 的內置變數。做導航欄時需要區分不同類型的頁面。這個其實也很好解決，因為頁面鏈接和導航欄條目是一一對應的（比如archive頁面的鏈接是/archive，導航欄條目是archive），所以做一個判斷就好。然而尷尬的是，首頁壓根就沒有這種鏈接，首頁就是一個/，儘管有 is_home() 函數可以用，不過 js 里是用不了的。所以這個時候我想到了直接通過配置文件拿到首頁的 url，之後再做判斷，但是又有一個問題 —— 這是hexo的內置變數，只能在ejs中使用，在js里是不識別的。考慮到ejs會生成dom元素，所以解決的思路是：~~將內置變數存放在dom元素里並生成，之後在js中獲取它的值，並設置該元素不可見~~ 直接作為dom元素的data-*屬性即可。後面的 TOC 文本也是用的這個辦法。

總結

主題基本的東西都做好了，剩下的就是上傳到 github，並且向 Hexo 官方站點發起 PR—-這些對於我這個菜鳥來說還很陌生，所以不得不去b站找了 github 和 git 使用的相關教程。本來應該一切順利了，但是本地這邊一直報錯，原來是沒有先 pull 遠程倉庫進行同步。

當然，git 和 github 是每個技術人的必備技能，所以之後我會另外找個時間系統學習一下這兩者的使用。

最後當然就是編寫說明文檔了，這很像以前做漢化時寫的使用說明。

感觸比較深的兩點：一個是注意閱讀源碼。如果實在沒有思路，可以先參考別人是怎麼寫的，一開始製作主題的時候很難理清項目結構，所以我選擇了先看看別人是怎麼寫的；二個是英語的重要性——1/5的答案在百度，4/5的答案在Google，學會英語就意味著你找到了解決問題的另一條途徑，而且無疑是更加寬廣的途徑。比如 Hexo 主題的製作，中國是沒有人真的會去為這個而做系列影片的，但是國外有；同樣地，提問題時也可以考慮選擇國外平台，如果你注意了提問禮儀，很大幾率問題會得到秒回。

到這裡差不多就告一段落了，之後的時間我會慢慢完善和更新這個主題。目前來說用戶只有我自己，所以也算是為我自己而去努力地塑造它吧。