美文网首页玩转Ghost博客Ghost博客Ghost博客的使用日常
读Ghost博客源码与自定义Ghost博客主题

读Ghost博客源码与自定义Ghost博客主题

作者: chardlau | 来源:发表于2018-01-03 16:33 被阅读58次

我使用的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,应该可以有一种更轻巧的自定义主页的方式。

同步博客

相关文章

  • 读Ghost博客源码与自定义Ghost博客主题

    我使用的Ghost博客一直使用者默认的Casper主题。我向来没怎么打理过自己博客,一方面认为自己不够专业,很难写...

  • ghost博客主题自荐

    演示示例 一、ghost-theme-mj主题简介 这是一个Ghost博客主题,Ghost博客是一个很不错的写作平...

  • ghost-theme-mj主题介绍

    演示示例 一、ghost-theme-mj主题简介 这是一个Ghost博客主题,Ghost博客是一个很不错的写作平...

  • Ghost博客主题更换

    主题文件目录 项目根目录/content/themes/ 默认有两个主题,如果你想要更多主题,那么去下载开源的、免...

  • 博客软件ghost

    ghost是用node.js写的博客平台,开源软件,准备用ghost搭一个自己的博客

  • 101-Ghost博客

    Ghost 中国站点Ghost博客 帮助文档 http://docs.ghostchina.com/zh/inst...

  • 使用脚本快速搭建Ghost博客

    Ghost是比较新的博客平台,相比最流行的Wordpress博客平台,Ghost非常轻量、简洁、高效,平台只专注于...

  • 使用脚本快速搭建Ghost博客

    Ghost是比较新的博客平台,相比最流行的Wordpress博客平台,Ghost非常轻量、简洁、高效,平台只专注于...

  • Nginx 配置 fastcgi cache

    在尝试 Ghost (https://tlanyan.me/ghost-experience/)中提到过托管博客的...

  • 在CentOS 7 中搭建Ghsot博客平台

      Ghost是基于Node.js构建的开源博客平台。Ghost 具有易用的书写界面和体验,博客内容默认采用 Ma...

网友评论

    本文标题:读Ghost博客源码与自定义Ghost博客主题

    本文链接:https://www.haomeiwen.com/subject/zczhnxtx.html