2019独角兽企业重金招聘Python工程师标准>>> 
本文讲述如何给ghost博客系统创作主题，以创建一个简单的主题为例。我使用的ghost版本是0.5.2。
##以development mode启动ghost
$ cd ghost/
$ NODE_ENV=development node index.js
这种模式下，修改主题后，直接刷新浏览器就可以看到修改后的主题效果，利于主题开发。但是也会遇到不好使的情况，如果遇到，重启即可。
在实际的使用环境中，以下面的形式启动ghost：
$ NODE_ENV=production forever start index.js
这种模式下，主题中的模板文件会被加载并缓存到内存中，所以修改主题后，需要重启ghost，才能生效。
##创建主题
我们姑且把自己制作的主题叫做my-theme。
进入ghost的主题目录，创建目录my-theme：
$ cd ghost/content/themes
$ mkdir my-theme
$ cd my-theme
$ vim package.json
在package.json中加入以下内容：
{
"name": "my-theme",
"version": "0.1.0",
"description": "a simple theme",
"author": "letian",
"homepage": "http://www.letiantian.me/my-theme"
}
在浏览器中访问http://127.0.0.1:2368/ghost/settings/general/，在Theme的下拉框里可以看到出现了my-theme。将Theme选为my-theme，然后保存设置。
然后在浏览器中访问http://127.0.0.1:2368/，可以看到：
##分页显示文章
在http://127.0.0.1:2368/ghost/settings/general/将Posts per page的值设置为4，意味着在访问http://127.0.0.1:2368/时，没每页显示4篇文章。
要分页显示所有的文章，在my-theme目录下创建index.hbs：
$ cd my-theme
$ vim index.hbs
在index.hbs下添加内容：
{{meta_title}}
{{@blog.title}}
{{@blog.description}}
{{#foreach posts}}
{{title}}
{{excerpt characters="40"}} »
{{/foreach}}
{{pagination}}
效果如下：
index.hbs可以用于分页显示所有文章，分页显示某个标签下的所有文章。也就是说，上图中如果点击“机器学习”的链接、“Older Posts”的链接，新的网页都会使用index.hbs来渲染。
{{meta_title}}根据页面的不同，显示不同的标题。例如：
- 访问
http://127.0.0.1:2368/，meta_title的值是樂天笔记。 - 访问
http://127.0.0.1:2368/page/2/，meta_title的值是樂天笔记 - Page 2。 - 访问
http://127.0.0.1:2368/tag/ji-qi-xue-xi/，meta_title的值是机器学习 - 樂天笔记。 - 访问
http://127.0.0.1:2368/tag/ji-qi-xue-xi/page/2/，meta_title的值是机器学习 - Page 2 - 樂天笔记。
当然，如果访问的是一篇文章，meta_title的值会是文章的title。下文会提到。
{{@blog.title}}显示博客名称，例如“樂天笔记”。{{@blog.description}}显示博客的描述。
{{#foreach posts}}...{{/foreach}}用来遍历当前分页下的所有文章（而且只是post类型的文章，文章类型在下面有介绍）。其内包含的{{url}}、{{title}}等都单指一篇文章的url和标题。
{{pagination}}用来显示分页信息，以及“上一页”和“下一页”的链接。
##显示一篇文章 ghost中文章的类型有post和page之分。page是用来显示“关于我”、“友情链接”这些类型的页面的。post则是博主写的文章。
新写的文章默认是post类型，可以手动将其设置为page类型。若在主题下只有post.hbs，则post和page类型的文章均用post.hbs渲染。若在主题下既有post.hbs，又有page.hbs，则post类型的文章用post.hbs渲染，page类型的文章用page.hbs渲染。post.hbs的规范和page.hbs是相同的，这里只说post.hbs。
$ cd my-theme
$ vim post.hbs
post.hbs内容如下：
{{meta_title}}
{{@blog.title}}
{{@blog.description}}
{{#post}}
{{title}}
{{content}}
{{/post}}
其中，{{meta_title}}是显示文章的标题。
访问http://127.0.0.1:2368/2014-12-23-nmf-pca-vq/，效果如下：
##分页显示某个标签下的文章
tag.hbs用来分页显示某个标签下的文章，如果主题中没有tag.hbs，那么默认调用index.hbs。
$ cd my-theme
$ vim tag.hbs
下面为tag.hbs添加一些简单的内容：
{{meta_title}}
{{@blog.title}}
{{@blog.description}}
标签： {{tag.name}}
{{#foreach posts}}
{{title}}
{{/foreach}}
{{pagination}}
浏览器访问http://127.0.0.1:2368/tag/ji-qi-xue-xi/，效果如下：
##模板继承
模板继承可以让我们更好地维护主题，下面使用模板继承机制来重构上面编写好的index.hbs、post.hbs、tag.hbs。首先创建layout.hbs（文件名看自己习惯，例如default.hbs）：
$ cd my-theme
$ vim layout.hbs
layout.hbs内容如下：
{{meta_title}}
{{@blog.title}}
{{@blog.description}}
{{!子模板的内容将替换body}}
{{{body}}}
{{!...}}是注释。{{{body}}}用来存放继承layout.hbs的模板的内容。
将index.hbs内容修改如下：
{{!< layout}}
{{#foreach posts}}
{{title}}
{{excerpt characters="40"}} »
{{/foreach}}
{{pagination}}
将post.hbs内容修改如下：
{{!< layout}}
{{#post}}
{{title}}
{{content}}
{{/post}}
将tag.hbs内容修改如下：
{{!< layout}}
标签： {{tag.name}}
{{#foreach posts}}
{{title}}
{{/foreach}}
{{pagination}}
齐活了。在浏览器中访问博客，效果和之前的相同。
另外，由于使用了模板继承，layout.hbs可以叫做父模板，index.hbs、post.hbs、tag.hbs可以叫做子模板。
##引入css等文件
首先在主题下创建assets等目录：
$ cd my-theme
$ mkdir assets
$ mkdir assets/css
$ mkdir assets/js
$ mkdir assets/img
assets用于存放主题所需要的css、js、图片等文件。这个目录下的文件结构可以根据习惯定制。
下面以创建一个css文件为例子。
创建style.css：
$ vim assets/css/style.css
assets/css/style.css内容如下：
.post-excerpt {
background-color: #B0B0B0;
}
然后，我们在layout.hbs中的之间加入：
好了，现在访问http://127.0.0.1:2368/，效果如下： 
##模板片段
在多个模版文件中可能会有重复出现的代码片段，但是不宜使用模板继承来重构。比如说要在page.hbs和post.hbs下添加第三方评论系统disuqs的代码。我们可以这样做：
$ cd my-theme
$ mkdir partials
$ vim partials/disqus.hbs
partials/disqus.hbs内容如下：
然后在page.hbs和post.hbs的适当位置添加以下代码：
{{> disqus}}
浏览器访问http://127.0.0.1:2368/2014-12-23-nmf-pca-vq/，效果如下： 
##修改pagination
{{pagination}}的默认效果可能不合心意，我们可以修改一下。
在partials目录下创建文件pagination.hbs：
$ vim partials/pagination.hbs
内容如下：
浏览器访问http://127.0.0.1:2368/，效果如下：
##如何显示所有的page类型的文章
page类型的文章常常放在博客的导航栏里。目前好像没有下面这种形式的支持：
{{#foreach pages}}
{{ title }} {{url}}
{{/foreach}}
建议手动把自己的page的链接放入主题中。
##更多
官方教程
Building a Ghost Theme From Scratch