玩转Ghost博客Ghost博客主题教程程序员

3. 打造一款 Awesome 的主题，你只需要掌握以下技能

2018-02-26  本文已影响60人  jerry_mei

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

对于开源的博客框架也有很多种选择，你可以用老牌的 WordPress 、 也可以用 Github + Jekyll 搭一个静态的站点、也可以用二次元码农喜欢的 Hexo ， 还有 Hugo 等等，当然还有我们的 Ghost

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

须要用到的技能

对于主题制作其实不需要太多的知识，你只需要知道简单的 HTML + CSS 就可以了 ， 如果知道一点 JS那更好了。

但如果你想随心所欲地打造一款看起来不错而且工程上比较规范的主题，你需要掌握以下技能

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}}

输出结果

image_1c735ghjd13rghuj1dgv5c21uvm9.png-2.1kBimage_1c735ghjd13rghuj1dgv5c21uvm9.png-2.1kB

可以看到第一种写法是不能输出作者的 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}}

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

官方文档里提供了所有的助手参考，具体的用法可以去看一下

image_1c736gslu1bpg1ekest41euako9m.png-15.8kBimage_1c736gslu1bpg1ekest41euako9m.png-15.8kB

Block Helpers

例如：{{#if}}{{/if}}， {{#foreach posts}}{{/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 不一样，需要注意一下。

上一篇下一篇

猜你喜欢

热点阅读