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

时间 2019-11-08

标签备受推荐 ghost 博客主题结构设计繁體版

原文原文链接

任何一个项目，若是有一个良好的组织规范和结构设计，那么便成功了一半，这在工程实践上是相当重要的。css

对于 Ghost 博客主题来讲，一个比较规范的结构设计，会让你的主题开发变得十分轻松。对此，官方教程里也有 Recommended Structure（推荐结构），以下：html

.
├── /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

直接上图吧，最后咱们的主题结构以下：git

这是一个基本的主题结构，你们能够在这个基础上去构建本身的主题。为了方便你们，我专门建了一个分支：点击获取，别忘了，点一下 star 噢。github

里面包括了简单的 gulp 脚手架，进入项目根目录，执行一下 npm install 就能够了。web

default.hbs

从前面官方推荐的结构能够看出 default.hbs 并非必须的，但在实际的主题开发中，它每每是必须的。为何这么说呢，以前咱们介绍 Layout Expressions 也提到过，default.hbs是一个默认模板，咱们其余的模板均可以扩展默认的模板。npm

因此它里面的内容咱们也很清楚了。它里面包含<html>，<head>以及<body>标签，还有{{ghost_head}}和{{ghost_foot}}助手表达式。若是你的博客全部页面的主体部分是同样的，好比 header 和 footer ，你还能够在该模板里面构建好基础的页面结构。json

而后咱们须要扩展的内容，也就是不一样的页面展现的部分，咱们能够用{{{body}}}来填充gulp

最后，给你们看一下个人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.hbs和navigation.hbs文件覆盖系统默认的模板。须要注意的是，这种方式直接经过{{pagination}}和{{navigation}}来输出，而不是用{{> pagination}} partial 表达式

assets

你只须要确保一点，主题里的全部资源都放在assets目录里，须要引入资源的时候使用{{asset}}助手表达式便可。好比：

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

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

其实，你也能够不用 assets 目录和{{asset}}助手表达式，但官方强烈推荐你们用，毕竟它有如下好处：

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

Templates

在主题文件夹的根目录里，咱们能够看到有index.hbs、post.hbs这些文件。前面讲到在 partials 里面咱们能够建立自定义的模板文件，但根目录里的这些模板文件都必须遵循严格的命名约定，咱们称之为系统模板吧。

每一个模板用于呈现博客的特定页面或部分（称为 Context），而且每一个模板均可以访问特定的数据。有关模板的更多信息，咱们以后会在具体的操做中介绍到，你也能够直接访问官网的模板页面了解。

Contexts （上下文）

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

预览地址个人主页，项目主页： maple，欢迎 star
专题教程持续更新中，想要本身制做主题的同窗能够关注一下