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

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

Ghost與Ghost主題

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

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

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

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

自定義主頁

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)。

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

去除針對/page/1的重定向；

為/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，應該可以有一種更輕巧的自定義主頁的方式。

總結

以上是生活随笔為你收集整理的ghostblog主题_读Ghost博客源码与自定义Ghost博客主题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。