我使用的Ghost博客一直使用者默认的Casper主题。我向来没怎么打理过自己博客,一方面认为自己不够专业,很难写出质量比较高的文字;另一方面认为博客太耗时间,很容易影响正常的工作内容。最近公司即将搬迁,我的开发工作也告一段落,因此抽点时间自定义一个自己的博客主页。

备注:上图来自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这个文件中才能获取对应的值。该结论尚未在代码上得到验证

若在这个问题继续下去是可以实现我的需求的,但考虑到偏离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博客主题的更多相关文章

  1. SpringMVC+Spring+MyBatis个人技术博客源码

    项目描述 Hi,大家好,又到了源码分享时间啦,今天我们分享的源码一个<个人技术博客>,该博客是基于SSM实现的一个个人博客系统,适合初学SSM和个人博客制作的同学学习.有了这个源码,直接买 ...

  2. java个人博客源码

    初入博客园,请各位多关照,来而不往非礼也. 如需要源码以及学习内容,qq:1397617269,我看到就回你们资源. 直接给链接: 链接:https://pan.baidu.com/s/1S_awtg ...

  3. 如何读懂Framework源码?如何从应用深入到Framework?

    如何读懂Framework源码? 首先,我也是一个应用层开发者,我想大部分有"如何读懂Framework源码?"这个疑问的,应该大都是应用层开发. 那对于我们来讲,读源码最大的问题 ...

  4. 修改VCL源码实现自定义输入对话框

    来自:https://yq.aliyun.com/wenji/88428 通过修改VCL源码实现自定义输入对话框 在BCB中有两个函数可以实现输入对话框:InputBox和InputQuery,其实I ...

  5. Android菜鸟的成长笔记(6)——剖析源码学自定义主题Theme

    原文:Android菜鸟的成长笔记(6)--剖析源码学自定义主题Theme 还记得在Android菜鸟的成长笔记(3)中我们曾经遇到了一个问题吗?"这个界面和真真的QQ界面还有点不同的就是上 ...

  6. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. Java并发指南10:Java 读写锁 ReentrantReadWriteLock 源码分析

    Java 读写锁 ReentrantReadWriteLock 源码分析 转自:https://www.javadoop.com/post/reentrant-read-write-lock#toc5 ...

  8. 读源码【读mybatis的源码的思路】

    ✿ 需要掌握的编译器知识 ★ 编译器为eclipse为例子 调试准备工作(步骤:Window -> Show View ->...): □ 打开调试断点Breakpoint: □ 打开变量 ...

  9. 从无到有开发自己的Wordpress博客主题---代码环境准备

    注意这里说的是代码环境准备哦,而不是L(M)AMP运行环境哦,运行环境会在后述文章中在写. 一.在本地初始化git环境并且链接上gitee 1.在gitee上创建一个项目托管你的代码 这个不在赘述,按 ...

随机推荐

  1. 51 Nod 1029 大数除法【Java大数乱搞】

    1029 大数除法 基准时间限制:4 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 给出2个大整数A,B,计算A / B和A Mod B的结果.   Input 第1行:大数A ...

  2. BZOJ2744: [HEOI2012]朋友圈

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2744 最大团是一个np问题.. 对于本题,做它的逆问题,建反图做最大独立集. 对于A最多取出两 ...

  3. 如何在SecureCRT中给linux上传和下载文件 安装redis

    首先建立文件 /download sz和rz命令无法用.则用以下1.和2.3步骤   需要上传或者下载,需要使用rz和sz命令.如果linux上没有这两个命令工具,则需要先安装.可以使用yum安装.运 ...

  4. Eclipse安装JD-Eclipse反编译插件成功看源码

    Eclipse安装JD-Eclipse反编译插件 转载 2017年12月24日 15:19:27   http://heavengate.blog.163.com/blog/static/202381 ...

  5. Kubernetes volumes简介

    容器中的磁盘文件生命周期比较短暂,在一些比较复杂的容器应用中会产生一些问题.一.容器crash后,kubelet会重启该容器,但这些文件会丢失掉.二.pod中的多个容器经常需要共享文件.因此,Kube ...

  6. pycharm中一直跳出updating indices...indexing

    直接比较明显的就是cpu直冲天际. pycharm是一款用了就不愿意换的ide,因为他的功能十分强大,同时也有着让人诟病的问题,就是他功能太全了,以至于有的功能你这辈子可能都不会去触碰,带来的直接问题 ...

  7. Unity Object Pool

    using System.Collections; using System.Collections.Generic; using UnityEngine; [System.Serializable] ...

  8. 【ELK_Log4net】.net Core重写一个TcpAppender

    最近再搞ELK,三个工具部署完毕,想再继承上log4net.没想到.net core版Log4net竟然没有直接Tcp发送消息的appender.醉了.log4net 1.RemotingAppend ...

  9. Oracle:对表的CREATE、ALTER、INSERT、RENAME、DELETE操作练习以及主外键约束

    -创建一个student表,设定表的主键为学号CREATE TABLE student( sno VARCHAR2(10) PRIMARY KEY, --列级约束 sno VARCHAR2(20) C ...

  10. vue项目中使用ueditor

      以vue-cli生成的项目为例 1.static文件夹下先放入ueditor文件 2.index.html添加如下代码 <script type="text/javascript& ...