10分钟打造一款属于本身的Ghsot博客主题，持续更新中......

就我目前所知，对我的博客感兴趣的有这些群体：学生、做者、程序员、设计师...

对于开源的博客框架也有不少种选择，你能够用老牌的 WordPress 、 也能够用 Github + Jekyll 搭一个静态的站点、也能够用二次元码农喜欢的 Hexo ， 还有 Hugo 等等，固然还有咱们的 Ghost

以上的大部分博客框架我都有尝试过，最终仍是以为 Ghost 用得比较顺手。优缺点什么的我这里就不作对比了，没有最好的，只有最合适的。

下面是我本身作的一款主题，能够去个人主页预览，项目主页：maple，欢迎 star

专题教程持续更新中，想要本身制做主题的同窗能够关注一下

需要用到的技能

对于主题制做其实不须要太多的知识，你只须要知道简单的 HTML + CSS 就能够了 ， 若是知道一点 JS那更好了。

但若是你想为所欲为地打造一款看起来不错并且工程上比较规范的主题，你须要掌握如下技能

• HTML5 + CSS3 + JavaScript （ES6）
• Sass 或 Less
• Handlebars （ghost所用的模板语言）
• gulp 或 webpack （构建工具）
• 英文文档阅读能力
• 设计能力

HTML 的基础知识能够去 w3school get 到。Sass 和 Less 是动态的 CSS 语言，也不是很难，网上有不少十分钟入门教程，花十分钟看一下就会了。构建工具咱们选择 Gulp 吧，也不是什么大的工程，这个相对易于学习一点。Handlebars 是一种模板语言，它有本身的官网，但对于咱们开发主题来讲，只须要了解几个简单的表达式就能够了。

Handlebars

Handlebars 能够说是 Ghost 主题的灵魂了。咱们用它配合后台提供的上下文数据，就能够很方便地在 HTML 中使用动态的数据。

咱们先看一下它官网提供的示例吧

<div class ="entry"> 
  <h1> {{title}} </h1> 
  <div class = "body">
     {{body}} 
  </div> 
</div>

Handlebars 模板是由普通的 HTML 和 Handlebars 表达式组成的。全部的 Handlebars 表达式都是用大括号包裹起来的。

而后咱们须要提供 context （上下文数据）

{
  title: "My New Post",
  body: "This is my first post!"
}

最终的结果以下

<div  class = "entry"> 
  <h1> My New Post </h1> 
  <div class = "body">
     This is my first post!
  </div> 
</div>

在咱们的 Ghost 主题里，每一个模板都有特定的 context ， 咱们经过官方提供的 context-table ，能够找出当前模板能够访问的数据。

模板能够访问的全部数据实际上都是一个很大的 JSON 对象 （ 一组嵌套的属性及其值），这对于一篇文章来讲看起来像这样：

{
  post: {
    id: "xyz",
    title: "My blog post title",
    slug: "welcome",
    ... 
      author: {
      id: "abc",
      name: "Jo Bloggs",
      ...
    }
  }
}

Data Expressions （数据表达式）

数据表达式是最简单也是最经常使用的，主要用来输出模板能够访问的数据，好比 {{title}}
能够输出文章的标题

HTML Data Expressions

例如：{{{bio}}}

有时，咱们须要输出的数据可能包含 HTML ，但默认的 {{}}表达式会将 HTML 当成纯文本输出，使用 {{{}}} 才能正确呈现 HTML

Global Data

例如：{{@blog.title}}

Ghost 能够经过 {{@blog}} 属性访问一些全局数据，@标志也能够在块级表达式中提供特殊的属性，后面会在具体的使用场景中介绍到

Path Expressions

例如：{{author.name}}

有时，你想要输出的属性在当前的做用域中不可用，由于它属于另外一个对象。例如，若是你想输出你文章的做者姓名，用{{name}}是不行的。只能经过 {{author.name}}来访问。

Block Expressions (Scopes)

例如：{{#post}}{{/post}}

有时，你想要输出比较多的属性，例如，在文章里须要访问大量做者属性。你可使用块级表达式来框定一个做用域，那样就不用频繁使用 Path Expressions 了。

块级表达式相似于 HTML 标签，有开始和结束标记，在它们之间咱们能够直接访问当前对象的属性，例如：

{{#author}}
    My name is {{name}}, visit my <a href="{{website}}">Website!</a>
{{/author}}

Block expressions vs path expressions

{{#author}}{{name}}{{/author}}与{{author.name}}在很大程度上是同样的。这两种写法最大的不一样就是在块级表达式中咱们可使用 handlebars helpers 。直接这样解释有点很差懂，咱们举个例子吧

{{#post}}
    <small>
        {{author.name}}
        {{author.url}}
    </small>

    <br>

    <small>
        {{#author}}
            {{name}}
            {{url}}
        {{/author}}
    </small>

{{/post}}

输出结果

能够看到第一种写法是不能输出做者的 url 的。官方文档里的解释是，author 是没有 url 这个属性的，因此{{author.url}}不起做用，可是它提供了{{url}}助手表达式，因此第二种写法是 OK 的

Block + Path Expressions

这两种表达式还能够有更高级的用法，好比结合起来使用以达到你但愿的结果。下面的例子显示了如何使用主页上的最新帖子

{{#posts.[0]}}
  <h3 class="first_title">{{title}}</h3>
  <div class="first_content">{{content}}</div>
{{/posts.[0]}}

在实际的主题开发中，这是颇有用的。好比你想针对最新的文章设计样式，突出显示

Helpers （助手）

例如：{{content}}， {{url}}

助手表达式与其它表达式的区别在于它提供了一些方法，而不只仅是输出数据。本质上，数据表达式是变量，助手表达式是函数。

官方文档里提供了全部的助手参考，具体的用法能够去看一下

Block Helpers

例如：{{#if}}{{/if}}， {{#foreach posts}}{{/foreach}}

这个就很好懂了，见名知意。列举一下比较经常使用的：

• {{#if}}{{else}}{{/if}}
• {{#is}}{{/is}}
• {{#unless}}{{else}}{{/unless}} ，与 if 相反
• {{#foreach}}{{/foreach}}

Layout Expressions （布局表达式）

例如：{{!< default}}， {{{body}}}

布局的做用是容许你你定义一个其余模板能够扩展的基本模板。在 Ghost 主题中常见的作法是新建一个default.hbs的默认模板，里面包含一个 HTML 页面的核心元素：header 、 footer 和 内容。而后咱们会用 {{{body}}}这个助手函数来加载其余模板的内容。其余模板都以{{!< default}}表达式开始，代表它扩展了默认的布局

Partial Expressions

例如：{{> loop}}

Partial 也是 Ghost 主题里面很重要的内容。它容许你建立包含在其余模板里的小型可重用模板。一般咱们会在根目录建立一个partials目录来存放你建立的各类小的模板，好比：loop.hbs，而后在其余的模板中可使用{{> loop}} 输出内容。注意：若是partials目录里面还有子目录，咱们输出的时候要将路径带上，好比：{{> author/mini-bio}}

Comments （注释）

例如：{{!-- comments --}}

Handlebars 有本身的注释方式，跟 HTML 不同，须要注意一下。