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 不同，須要注意一下。