我試著調整 Hexo 的一些細節，包含了解 Themes 結構、修改 CSS、加入 Facebook 的功能、RSS、了解 Plugin 的概念等等。把這些過程心得，都記錄在這裡。調整部分大概如下：

• 寫文章的小技巧
• Theme 目錄結構、CSS 微調
• 好用的 plugins
• 輔助工具

寫文章的小技巧

toc

toc 是 Table of Content 的縮寫，就是文章的目錄結構，可以讓讀者很快掌握文章結構，寫的人在寫文章過程，可以確認自己的思路是有組織的。

打開 toc 很簡單，只要在 .md 的 header 加入 toc: true 就可以了。

另外我也重新整理了原本 theme 的版面，讓他可以直接顯示在文章右邊的 sidebar，讀者可以很清楚的了解文章結構。

異地編輯

hexo 產生出的資料會放在 github 讓大家瀏覽，但是如果在不同電腦也要寫的時候，就無法寫。所以必須要把 hexo 的原始資料 commit 到 git，然後在另一台電腦 clone 下來。

不過我遇到一個問題就是，即使在另一台電腦將 source clone 下來之後，寫完文章卻無法透過 hexo generate 正常的產生 html。後來發現，原來對應的 hexo plugin 也要裝好才行。

所以在 hexo blog 根目錄的 node_modules 確認裝了哪一些 plugins，以下是我的：

1
2
3
4
5
6

rick@iWish:17:21:44 node_modules$ ls
hexo-generator-sitemap
hexo-renderer-ejs
hexo-renderer-stylus
hexo-generator-feed
hexo-renderer-marked

在另一台電腦確認也有裝這些 plugins，那麼應該就可以正常產生 html 了。

寫個 scripts 放到 git，到其他電腦就可以很快安裝了。

Editing and debugging

hexo 可以在本地開啟 node.js 來測試，就是 hexo server。除了測試之外，其實也是可以直接 debug 的。

我現在都是直接開著 server ，然後開始寫文章，除了用 MacDown 這種 editor 寫，同時也可以在 browser 直接 preview。

另外如果在編輯過程中，改了 _config.yml，那麼是需要重啟 hexo server 的。

Themes / CSS 調整

目錄結構

整個 theme 的目錄結構跟 hexo 原始結構差不多，也是以 _config.yml 做主要設定檔。我是拿 Freemind 做基礎，然後做基本配置的調整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$ theme
   |-- _config.yml
   |-- languages/ 語言翻譯檔
   |-- layout/ 主要面板 template 都在這裡, 檔案都是 .ejs
   |   |-- _partial/
   |   |   |-- post/
   |   |-- _widget/ 小組件，像是 categories, tagcloud 等
   |-- LICENSE
   |-- README.md
   |-- source
   |   |-- css/
   |   |-- fancybox/
   |   |-- fonts/ 一些 icon, freemind 使用 Font-Awesome
   |   |-- img/
   |   |-- js/

• _config.yml: 主要的 theme 設定檔，裡面有頁面配置的基本資訊，另外還有 sidebar 的連結設定.

其實我在調整過程發現 layout 目錄結構 / 分類有點亂，code 也寫的不是很乾淨，所以之後應該會整個重新整理。整頓好了之後再放到 github 上。

ejs template

ejs (Embedded Javascript Templates) 是 Node.js 的 html template engine，直接使用 Node.js 的 expression tag，語法大概就像 JSP 的 EL 那樣。

基本的用法就是抓 hexo blog 設定檔 _config.yml 的值使用，例如我在系統定義了 profile_title，所以在 ejs 就是 <%= config.profile_title %>；如果變數是定義在 theme 裡面的 _config.yml，像是我定義了變數：facebook_app_id，那就是 <%= theme.facebook_app_id %>

其他一些流程控制、function、includes 等用法，(Embedded Javascript Templates) 的說明很清楚，或者直接看也不難懂。

Font-Awesome

一些可以點綴的圖示，使用的是 Font-Awesome。不難使用，只要套 CSS 即可，像這樣 <i class="fa fa-info-circle"></i> 就可以產生：。到官方有一堆可以用，不過記得確認根目錄的 /fonts/ 裡面有沒有對應的資料。

Bootstrap

我套用了一些 bootstrap class，讓整個 blog 有別於原本的生冷，讓他有一點溫度，但也不想太輕浮。

其他調整

• 在首頁加入 Jumbotron (大看板)
• 調整文章 header css，包含首頁跟單篇的都重新定義
• 加入 facebook like 按鈕, comment 功能
• 調整時間格式: YYYY/MM/dd mm:HH
• 調整單篇文章右邊的 tagcloud, categories 顯示方式
• 在文章瀏覽頁面，把右邊 sidebar 的 toc 打開，搬到最上面

好用的 Hexo Plugins

• hexo-generator-feed: 可以產生 RSS，提供給其他網站讀取。我個人的 入口網站 就是用 RSS 做的。
• hexo-generator-sitemap: 產生網站地圖

安裝 npm install hexo-generator-feed --save

然後在 _config.yml 加入以下兩個 sections 設定，最後去 theme 加入對應的 link 即可。

1
2
3
4
5
6
7
8
9

# Plugins
plugins:
    - hexo-generator-feed
    - hexo-generator-sitemap
# RSS hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20

延伸閱讀 (站內)

• Hello Hexo
• Migrate Hexo 2.8 to 3.1
• Migrate Hexo 2.8 to 3.3