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


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

ghost

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

Ghost與Ghost主題

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

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

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

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

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

pagination解釋

分頁相關的變量是模板驅動的,也就是說只能在固定的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.listcore/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,應該可以有一種更輕巧的自定義主頁的方式。

本文同步博客

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM