node-v12.18.1-blue.png

ghost-^3.0.0-blue.png

platform-macos _ linux-lightgrey.png

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

image_1ehol2b1j3cfbihlnn1t6v141c9.png-123kB

可以看到有很多错误。这些错误是 Ghost2.x 版本后新增了Gallery和Bootmark导致的。它要求主题中必须实现这两个功能的样式，是一个强制性的要求。感觉这对主题开发者来说并不友好，升级到新版本还要解决这个问题。

image_1eholagc71u1atr71f47kq81sprm.png-46.1kB

我们先不管这个问题，切到 Ghost 的根目录执行下面的语句启动 Ghost

# 停止掉正在运行的 Ghost
ghost stop ghost-local
# 使用 nodemon 来运行 Ghost
nodemon current/index.js --watch content/themes/maple-test --ext hbs,js,css

image_1eholp9271r3a1p8f3fadch1bh213.png-83.1kB

我们用这种方式启动了Ghost，现在访问 http://localhost:2368/ghost，进入后台 Design 页面，可以看到主题列表里面有我们的主题了

image_1eholqd4sq9ui9d1n291tvc14jf1g.png-557.2kB

我们尝试点击 active 激活我们的主题试一下，看会发生什么。可以看到出现了和刚才用gscan检查时一样的错误。

image_1ehols40l1i8b1i2on8v1d3fgdu1t.png-108.8kB

我们先忽略掉这个问题，直接访问 http://localhost:2368/ 吧。虽然是个空白页面，但是不管怎么说，这个主题已经可以运行起来了。接下来，我们只需要慢慢地完善它就可以了。

示例代码：https://github.com/KINGMJ/maple-test/tree/features/tutorials-2