Tocas-UI

Tocas-UI 是一個樣式框架,其改善 Semantic UI 的語意化標籤,讓 CSS 寫起來更簡潔,有效率。

Tocas-UI Official: https://tocas-ui.com/

關於摩根 - Morgan 佈景

佈景安裝、Github: https://github.com/hpcslag/hexo-theme-morgan

在開發這個佈景之前,原本是依照 Tocas-UI 的風格去開發,但是發覺只有清一色的佈景,恐怕容易造成使用者撞版型,所以我只好讓封面、Menu 條可以更改顏色:

整體設計 (非預設風格) 是這長這樣的:

手機版 (預設風格):

設計佈景時,參考了 知乎專欄 的設計,在讀文章的頁面,特意把元素清空,只留下文字和簡單的網站介紹,然後再頁底放上 Disqus 的留言區塊元素。

然後在 Archive 區塊採用本 Hexo 預設佈景 landscape 的做法,把文章作成一個小區塊。

Hexo 佈景開發

開發 Hexo 佈景,其實只要參考官方預設的佈景 Landscape 就可以開發了,然後再參考一下官方文件:

  1. Template: 說明系統模板的路徑名稱
  2. Variables: 說明模板的 Render 變數
  3. Helper: 說明模板 Render 可用函數

錯誤

在 EJS 之類的模板情況下開發,存取變數可能會發生 TypeError: Converting circular structure to JSON 的錯誤,所以要避免存取 Hexo 像是 post.tag 之類的變數,這類無法直接存取的變數,都可以在 Helper 說明文件找到可用函數使用。

不過 Helper 不方便的地方,就是這些 Helper 提供的函數,就直接會幫你組織成 HTML 字串了,這樣對於自行定義的樣式,會有點麻煩,所以建議先嘗試用過後,再決定佈景開發的標籤。

像是什麼 tag,categories ...etc 之類的變數,請務必先參考 Helper 函數。

測試佈景

當你的佈景設計完後,需要將佈景做單元測試,不過不是在 CLI 做單元測試,而是先把單元測試的框架下載回去: Hexo-Theme-Unit-Test 這個框架已經是一個設定好的 Hexo 目錄,執行 hexo server 就可以執行的專案,下載回去後,先把設計好的佈景丟到 /themes/xxxx ,然後去修改 hexo-theme-unit-test 根目錄底下的 _config.yml 把主題名稱改成自己的專案名稱,然後再啟動 hexo server,打開瀏覽器測試。

等確定瀏覽每一頁都正常後,就算是通過單元測試了。

刊登佈景

寫完之後,接著就是刊登佈景啦!

首先要去 fork hexo 的 site 專案,修改 source/_data/themes.yml ,並且在最後一行把自己的佈景資料放進去,然後提供一張 800 x 500 的佈景截圖,就可以發 pull requestsite 的專案。

刊登後,等待 pr 被 merge ,就可以到 Hexo 官網的 Themes 找到自己發布的主題。