Ghost Themes Docs 里面的教程十分详细,如果英文能力比较强的同学可以看一遍。前面我们将环境都准备好了,现在可以开始让我们自己的主题运行起来了
创建自己的主题
我们可以从头到尾自己创建一个全新的主题,也可以使用另一个主题(如 Casper)作为基础。为了使大家深入了解一个主题的制作过程,这里我们采用从一个空的文件夹开始逐步完成。
一个最基础的 Ghost 主题必须包括以下三个文件,我们先创建好:
-
index.hbs
-
post.hbs
-
package.json
package.json 文件
package.json 文件官方文档里有详细的说明,这里简单地介绍一下。
以下的 package.json 文件是官方推荐的一个最简单的示例:
{
"name": "your-theme-name",
"description": "A brief explanation of your theme",
"version": "0.5.0",
"engines": {
"ghost-api": "v3"
},
"license": "MIT",
"author": {
"email": "your@email.here"
},
"config": {
"posts_per_page": 10,
"image_sizes": {}
}
}
我们将这段代码复制到 package.json 文件中即可。
需要注意的几点:
-
name
、version
和author
是必须的属性。name
的格式用小写字母和中划线连接,比如:maple-test
;author
必须包含email
属性,url
和name
是可选的 -
推荐的属性
config.posts_per_page
。Ghost1.0 开始后台管理删除了每页文章个数的设置,通过该属性可以控制每页的文章个数 -
config.image_sizes
可以配置响应式的图片,具体可以参考 Responsive Images
当然实际应用中还有一些参数需要设置,比如我们用来推广的一些信息,还有源代码的位置等。最后我们的 package.json
文件如下:
{
"name": "maple-test",
"description": "A test theme about ghost",
"demo": "https://demo.ghost.io",
"version": "0.1.0",
"engines": {
"ghost-api": "v3",
"ghost": ">=3.0.0"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/KINGMJ/maple-test.git"
},
"keywords": [
"ghost",
"blog",
"theme",
"maple"
],
"author": {
"name": "jerry.mei",
"email": "328047478@qq.com",
"url": "http://www.jerrymei.cn"
},
"bugs": {
"url": "https://github.com/KINGMJ/maple-test/issues"
},
"homepage": "https://github.com/KINGMJ/maple-test#readme",
"config": {
"posts_per_page": 10,
"image_sizes": {}
}
}
运行Ghost
前面我们介绍了 nodemon 与 gscan 这两款工具,这里派上用场了。
我们先执行以下代码检查一下我们的主题:
gscan content/themes/maple-test
可以看到有很多错误。这些错误是 Ghost2.x 版本后新增了Gallery
和Bootmark
导致的。它要求主题中必须实现这两个功能的样式,是一个强制性的要求。感觉这对主题开发者来说并不友好,升级到新版本还要解决这个问题。
我们先不管这个问题,切到 Ghost 的根目录执行下面的语句启动 Ghost
# 停止掉正在运行的 Ghost
ghost stop ghost-local
# 使用 nodemon 来运行 Ghost
nodemon current/index.js --watch content/themes/maple-test --ext hbs,js,css
我们用这种方式启动了Ghost,现在访问 http://localhost:2368/ghost
,进入后台 Design 页面,可以看到主题列表里面有我们的主题了
我们尝试点击 active 激活我们的主题试一下,看会发生什么。可以看到出现了和刚才用gscan
检查时一样的错误。
我们先忽略掉这个问题,直接访问 http://localhost:2368/
吧。虽然是个空白页面,但是不管怎么说,这个主题已经可以运行起来了。接下来,我们只需要慢慢地完善它就可以了。
示例代码:https://github.com/KINGMJ/maple-test/tree/features/tutorials-2