备受推荐的 Ghost 博客主题结构设计

任何一个项目,如果有一个良好的组织规范和结构设计,那么便成功了一半,这在工程实践上是至关重要的。

对于 Ghost 博客主题来说,一个比较规范的结构设计,会让你的主题开发变得十分轻松。对此,官方教程里也有 Recommended Structure(推荐结构),如下:

.
├── /assets
    ├── /css
        ├── screen.css
    ├── /fonts
    ├── /images
    ├── /js
├── /partials
    ├── list-post.hbs
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]
└── package.json [required]

当然,实际的开发过程中,我们可能要借助一些构建工具,比如:gulp.js 等等。在参考了大量优秀的 Ghost 主题源码后,对于 Recommended Structure 我们会做一些调整,下面我会细细解说。

Recommended Structure

直接上图吧,最后我们的主题结构如下:

image_1c7ed7ari17pq1f1pftoudbqs9.png-22.9kB

这是一个基本的主题结构,大家可以在这个基础上去构建自己的主题。为了方便大家,我专门建了一个分支:点击获取,别忘了,点一下 star 噢。

里面包括了简单的 gulp 脚手架,进入项目根目录,执行一下 npm install 就可以了。

default.hbs

从前面官方推荐的结构可以看出 default.hbs 并不是必须的,但在实际的主题开发中,它往往是必须的。为什么这么说呢,之前我们介绍 Layout Expressions 也提到过,default.hbs是一个默认模板,我们其他的模板都可以扩展默认的模板。

所以它里面的内容我们也很清楚了。它里面包含<html><head>以及<body>标签,还有{{ghost_head}}{{ghost_foot}}助手表达式。如果你的博客所有页面的主体部分是一样的,比如 header 和 footer ,你还可以在该模板里面构建好基础的页面结构。

然后我们需要扩展的内容,也就是不同的页面展示的部分,我们可以用{{{body}}}来填充

最后,给大家看一下我的default.hbs示例代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>{{meta_title}}</title>
    {{ghost_head}}
</head>
<body class="{{body_class}}">
{{{body}}}
{{ghost_foot}}
</body>
</html>

partials

partials 目录是 Ghost 主题里一个十分重要的目录,你可以在这里面建立很多小的模板文件。

按照现在前端组件化的思想,一个页面通常是由各种小的组件拼装起来的。比如 index.hbs 里面可能包含文章列表等内容,你可以在partials里面建一个list-post.hbs专门负责输出文章列表,然后在index.hbs中使用{{> list-post}}输出它。

partials 目录还有一个很重要的功能,就是你可以建立一些模板文件用来覆盖系统内置的模板文件。比如:系统提供了{{navigation}}助手表达式用来输出导航,{{pagination}}助手表达式用来输出分页。你可以在partials目录里建立pagination.hbsnavigation.hbs文件覆盖系统默认的模板。需要注意的是,这种方式直接通过{{pagination}}{{navigation}}来输出,而不是用{{> pagination}} partial 表达式

assets

你只需要确保一点,主题里的所有资源都放在assets目录里,需要引入资源的时候使用{{asset}}助手表达式即可。比如:

 <link rel="stylesheet" href="{{asset 'css/style.css'}}">

大家可能会问,那项目里的src目录又是干什么的。我这里主要是为了开发时方便一些,专门建了一个用于开发的目录,里面的内容会通过 gulp 打包到 assets 目录,最后发布的时候会删掉该目录。

其实,你也可以不用 assets 目录和{{asset}}助手表达式,但官方强烈推荐大家用,毕竟它有以下好处:

  • 确保资源文件的相对路径始终正确
  • 可以缓存资源文件
  • 为主题开发者提供了稳定性......

Templates

在主题文件夹的根目录里,我们可以看到有index.hbspost.hbs这些文件。前面讲到在 partials 里面我们可以创建自定义的模板文件,但根目录里的这些模板文件都必须遵循严格的命名约定,我们称之为系统模板吧。

每个模板用于呈现博客的特定页面或部分(称为 Context),并且每个模板都可以访问特定的数据。有关模板的更多信息,我们之后会在具体的操作中介绍到,你也可以直接访问官网的 模板页面 了解。

image_1c7egrhf731cgpq25j1gb91ks29.png-17kB

Contexts (上下文)

Ghost 博客主题的每个页面都属于上下文。Contexts 对应着不同的 URL,并且告诉你哪些模板将会被使用,哪些数据是可以使用的,不同的上下文body_class输出的内容也是不一样的。主题里所有的 Context 在 Context Table 里面都有详细说明

image_1c7ehg88n2bv1qep6i8eq618qfm.png-11.2kB


预览地址 我的主页 ,项目主页:maple,欢迎 star

专题教程 持续更新中,想要自己制作主题的同学可以关注一下

阅读 2.4k发布于 2018-03-01
推荐阅读
目录