讀Ghost博客源碼與自定義Ghost博客主題

我使用的Ghost博客一直使用者預設的Casper主題。我向來沒怎麼打理過自己博客，一方面認為自己不夠專業，很難寫出質量比較高的文字；另一方面認為博客太耗時間，很容易影響正常的工作內容。最近公司即將搬遷，我的開發工作也告一段落，因此抽點時間自定義一個自己的博客主頁。

備註：上圖來自GhostChina官網，與本文內容無關。

Ghost與Ghost主題

Ghost自稱是專業的內容發佈平臺，實際上跟WordPress相比它只能算一個相對比較年輕的博客系統，在功能上完全無法與成熟的WordPress相比。

我之所以選擇Ghost作為博客系統除了它簡單方便，更因為它是基於Node.js且開源。畢竟基本的功能有了，如果有其他需求的話自己改代碼就可以實現。Ghost提供HTTP服務用的是Express框架。這是一種對我這類半路接觸js的人都可以輕易掌握的框架。

Ghost主題存放在安裝路徑的content/themes目錄中。安裝包自帶了Casper和Roon兩個主題，其中前者為預設主題。

Ghost支持HandleBars模板語言，自帶的兩個主題也是基於此語言編寫的，因此，定製Ghost主題最簡單的方法是複製一份Casper的代碼，基於它進行自定義。我就是這麼做的。

關於自定義主題的詳細介紹不在這裡展開，若有需要請參考該鏈接：http://docs.ghostchina.com/zh/themes/。

自定義主頁

Ghost只定義了幾個主要頁面，分別是文章列表頁（包含主頁）、文章內容頁、某標簽的文章列表、某作者的文章列表，以及一些rss或sitemap相關的頁面。

這麼一說你就發現了，博客的主頁和文章列表頁面是同一個頁面。主頁對應的路徑為/，列表對應的路徑為/page/:page，其中:page為占位符，表示某個頁碼值，如1、2、3等。這兩個路徑實際上渲染的都是同一個模板文件index.hbs。預設地，Ghost接收到請求時/page/1的GET請求時，返回301重定向到/，再結合一些樣式變化，從而讓你以為主頁和列表頁是分離開的。

我要做的就是讓主頁和列表頁面不一樣。

解決方法1

首先我想到的就是在index.hbs文件中通過變數渲染不一樣的內容。參考pagination.hbs我發現確實存在這兩個可用的變數：prev表示是否有前一頁，以及page表示當前為第幾頁。

如果能拿到這兩個變數中的一個，我就可以區別對待主頁和列表。遺憾的是不行。

分頁相關的變數是模板驅動的，也就是說只能在固定的pagination.hbs這個文件中才能獲取對應的值。該結論尚未在代碼上得到驗證

若在這個問題繼續下去是可以實現我的需求的，但考慮到偏離Ghost原來的設計太遠可能埋下更多坑，因此放棄該解決方法。

解決方法2

既然無法在模板上解決問題，那就讓路徑/渲染原來的index.hbs，讓路徑/page/:page渲染另一個HandleBars文件（我設定為list）。

實現這個方法只要兩個步驟：

1. 去除針對/page/1的重定向；
2. 為/page/:page指定新的渲染文件list.hbs。

需要改動ghost安裝目錄下的core/server/routes/frontend.js文件。下麵是改動後的結果：

其中，handleIndexPageParam是參考handlePageParam後新增加的一個函數，內容如下：

function handleIndexPageParam(req, res, next, page) {  
    var rssRegex = new RegExp('/rss/(.*)?/');

    page = parseInt(page, 10);

    if (page === 1 && rssRegex.test(req.url)) {
        // Page 1 is an alias, do a permanent 301 redirect
        return redirect301(res, req.originalUrl.replace(rssRegex, '/rss/'));
    } else if (page < 1 || isNaN(page)) {
        // Nothing less than 1 is a valid page number, go straight to a 404
        return next(new errors.NotFoundError());
    } else {
        // Set req.params.page to the already parsed number, and continue
        req.params.page = page;
        return next();
    }
}

另外/page/:page路徑對應的渲染對象frontend.list在core/server/controllers/frontend/index.js中定義。改後的內容如下圖所示：

描述list節點的配置在core/server/controllers/frontend/channel-config.js中定義，在defaults中增加一個節點：

...
list: {  
    name: 'list',
    route: '/',
    frontPageTemplate: 'home'
},
...

儘管需求實現了，但是這種解決方法產生了新的問題：以後無法直接使用第三方提供的主題，若要使用，需要複製index.hbs到新的文件list.hbs。

解決方法3

實際上方法2的解決方案增加list相關的代碼是多餘的，我在Ghost官網的文檔裡面查到，原來可以讓路徑/獨立渲染home.hbs文檔，而路徑/page/2+依舊渲染index.hbs。

因此結合方法2，應該可以有一種更輕巧的自定義主頁的方式。

本文同步博客