Ghost博客主題製做簡明教程

時間 2019-11-06

標籤 ghost 博客主題製做簡明教程简体版

原文原文鏈接

本文講述如何給ghost博客系統創做主題，以建立一個簡單的主題爲例。我使用的ghost版本是0.5.2。javascript

##以development mode啓動ghostcss

$ cd ghost/
$ NODE_ENV=development node index.js

這種模式下，修改主題後，直接刷新瀏覽器就能夠看到修改後的主題效果，利於主題開發。可是也會遇到很差使的狀況，若是遇到，重啓便可。html

在實際的使用環境中，如下面的形式啓動ghost：java

$ NODE_ENV=production forever start index.js

這種模式下，主題中的模板文件會被加載並緩存到內存中，因此修改主題後，須要重啓ghost，才能生效。node

##建立主題web

咱們姑且把本身製做的主題叫作my-theme。json

進入ghost的主題目錄，建立目錄my-theme：vim

$ cd ghost/content/themes
$ mkdir my-theme
$ cd my-theme
$ vim package.json

在package.json中加入如下內容：瀏覽器

{
    "name": "my-theme",
    "version": "0.1.0",
    "description": "a simple theme",
    "author": "letian",
    "homepage": "http://www.letiantian.me/my-theme"
}

在瀏覽器中訪問http://127.0.0.1:2368/ghost/settings/general/，在Theme的下拉框裏能夠看到出現了my-theme。將Theme選爲my-theme，而後保存設置。緩存

而後在瀏覽器中訪問http://127.0.0.1:2368/，能夠看到：

##分頁顯示文章

在http://127.0.0.1:2368/ghost/settings/general/將Posts per page的值設置爲4，意味着在訪問http://127.0.0.1:2368/時，沒每頁顯示4篇文章。

要分頁顯示全部的文章，在my-theme目錄下建立index.hbs：

$ cd my-theme
$ vim index.hbs

在index.hbs下添加內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{meta_title}}</title>

</head>
<body>

    <header>
        <h1>
            <a href="/" title="Home">{{@blog.title}}</a>
            <small>{{@blog.description}}</small>
        </h1>
    </header>

    {{#foreach posts}}
        <article>
          <header class="post-header">
              <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
              <section class="post-meta">
                  <time class="post-date">{{date format="YYYY MMMM DD"}}</time>
                  {{tags prefix=" 標籤："}}
                  文章id：{{id}}
              </section>
          </header>
          <section class="post-excerpt">
              <p>{{excerpt characters="40"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
          </section>
        </article>
    {{/foreach}}

    {{pagination}}

</body>
</html>

效果以下：

index.hbs能夠用於分頁顯示全部文章，分頁顯示某個標籤下的全部文章。也就是說，上圖中若是點擊「機器學習」的連接、「Older Posts」的連接，新的網頁都會使用index.hbs來渲染。

{{meta_title}}根據頁面的不一樣，顯示不一樣的標題。例如：

訪問http://127.0.0.1:2368/，meta_title的值是樂天筆記。
訪問http://127.0.0.1:2368/page/2/，meta_title的值是樂天筆記 - Page 2。
訪問http://127.0.0.1:2368/tag/ji-qi-xue-xi/，meta_title的值是機器學習 - 樂天筆記。
訪問http://127.0.0.1:2368/tag/ji-qi-xue-xi/page/2/，meta_title的值是機器學習 - Page 2 - 樂天筆記。

固然，若是訪問的是一篇文章，meta_title的值會是文章的title。下文會提到。

{{@blog.title}}顯示博客名稱，例如「樂天筆記」。{{@blog.description}}顯示博客的描述。

{{#foreach posts}}...{{/foreach}}用來遍歷當前分頁下的全部文章（並且只是post類型的文章，文章類型在下面有介紹）。其內包含的{{url}}、{{title}}等都單指一篇文章的url和標題。

{{pagination}}用來顯示分頁信息，以及「上一頁」和「下一頁」的連接。

##顯示一篇文章 ghost中文章的類型有post和page之分。page是用來顯示「關於我」、「友情連接」這些類型的頁面的。post則是博主寫的文章。

新寫的文章默認是post類型，能夠手動將其設置爲page類型。若在主題下只有post.hbs，則post和page類型的文章均用post.hbs渲染。若在主題下既有post.hbs，又有page.hbs，則post類型的文章用post.hbs渲染，page類型的文章用page.hbs渲染。post.hbs的規範和page.hbs是相同的，這裏只說post.hbs。

$ cd my-theme
$ vim post.hbs

post.hbs內容以下：

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <title>{{meta_title}}</title>

</head>
<body>

    <header>
        <h1>
            <a href="/" title="Home">{{@blog.title}}</a>
            <small>{{@blog.description}}</small>
        </h1>
    </header>

    <article>
    {{#post}}

        <header class="post-header">
            <h1 class="post-title">{{title}}</h1>
            <section class="post-meta">
                <time class="post-date">{{date format="YYYY MMMM DD"}}</time>
                {{tags prefix="標籤："}}
                文章id：{{id}}
            </section>
        </header>

        <section class="post-content">
            {{content}}
        </section>

    {{/post}}
    </article>

</body>
</html>

其中，{{meta_title}}是顯示文章的標題。

訪問http://127.0.0.1:2368/2014-12-23-nmf-pca-vq/，效果以下：

##分頁顯示某個標籤下的文章

tag.hbs用來分頁顯示某個標籤下的文章，若是主題中沒有tag.hbs，那麼默認調用index.hbs。

$ cd my-theme
$ vim tag.hbs

下面爲tag.hbs添加一些簡單的內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{meta_title}}</title>

</head>
<body>

    <header>
        <h1>
            <a href="/" title="Home">{{@blog.title}}</a>
            <small>{{@blog.description}}</small>
        </h1>
    </header>

    <h2>標籤： {{tag.name}}</h2>
    <hr/>

    {{#foreach posts}}
        <article>
          <header class="post-header">
              <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
          </header>
        </article>
    {{/foreach}}

    {{pagination}}

</body>
</html>

瀏覽器訪問http://127.0.0.1:2368/tag/ji-qi-xue-xi/，效果以下：

##模板繼承

模板繼承可讓咱們更好地維護主題，下面使用模板繼承機制來重構上面編寫好的index.hbs、post.hbs、tag.hbs。首先建立layout.hbs（文件名看本身習慣，例如default.hbs）：

$ cd my-theme
$ vim layout.hbs

layout.hbs內容以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{meta_title}}</title>

</head>
<body>

    <header>
        <h1>
            <a href="/" title="Home">{{@blog.title}}</a>
            <small>{{@blog.description}}</small>
        </h1>
    </header>

    {{!子模板的內容將替換body}}
    {{{body}}}
    

</body>
</html>

{{!...}}是註釋。{{{body}}}用來存放繼承layout.hbs的模板的內容。

將index.hbs內容修改以下：

{{!< layout}}

{{#foreach posts}}
    <article>
      <header class="post-header">
          <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
          <section class="post-meta">
              <time class="post-date">{{date format="YYYY MMMM DD"}}</time>
              {{tags prefix=" 標籤："}}
              文章id：{{id}}
          </section>
      </header>
      <section class="post-excerpt">
          <p>{{excerpt characters="40"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
      </section>
    </article>
{{/foreach}}

{{pagination}}

將post.hbs內容修改以下：

{{!< layout}}

<article>
{{#post}}

    <header class="post-header">
        <h1 class="post-title">{{title}}</h1>
        <section class="post-meta">
            <time class="post-date">{{date format="YYYY MMMM DD"}}</time> 
            {{tags prefix="標籤："}}
            文章id：{{id}}
        </section>
    </header>

    <section class="post-content">
        {{content}}
    </section>

{{/post}}
</article>

將tag.hbs內容修改以下：

{{!< layout}}

<h2>標籤： {{tag.name}}</h2>
<hr/>

{{#foreach posts}}
    <article>
      <header class="post-header">
          <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
      </header>
    </article>
{{/foreach}}

{{pagination}}

齊活了。在瀏覽器中訪問博客，效果和以前的相同。

另外，因爲使用了模板繼承，layout.hbs能夠叫作父模板，index.hbs、post.hbs、tag.hbs能夠叫作子模板。

##引入css等文件

首先在主題下建立assets等目錄：

$ cd my-theme
$ mkdir assets
$ mkdir assets/css
$ mkdir assets/js
$ mkdir assets/img

assets用於存放主題所須要的css、js、圖片等文件。這個目錄下的文件結構能夠根據習慣定製。

下面以建立一個css文件爲例子。

建立style.css：

$ vim assets/css/style.css

assets/css/style.css內容以下：

.post-excerpt {
    background-color: #B0B0B0;
}

而後，咱們在layout.hbs中的<head></head>之間加入：

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

好了，如今訪問http://127.0.0.1:2368/，效果以下：

##模板片斷

在多個模版文件中可能會有重複出現的代碼片斷，可是不宜使用模板繼承來重構。好比說要在page.hbs和post.hbs下添加第三方評論系統disuqs的代碼。咱們能夠這樣作：

$ cd my-theme
$ mkdir partials
$ vim partials/disqus.hbs

partials/disqus.hbs內容以下：

<div id="disqus_thread"></div>
    <script type="text/javascript">
      /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
      var disqus_shortname = 'your-forum-shortname'; // required: replace example with your forum shortname

      /* * * DON'T EDIT BELOW THIS LINE * * */
      (function() { 
      var dsq = document.createElement('script'); 
      dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

而後在page.hbs和post.hbs的適當位置添加如下代碼：

{{> disqus}}

瀏覽器訪問http://127.0.0.1:2368/2014-12-23-nmf-pca-vq/，效果以下：

##修改pagination

{{pagination}}的默認效果可能不合心意，咱們能夠修改一下。

在partials目錄下建立文件pagination.hbs：

$ vim partials/pagination.hbs

內容以下：

<nav class="pagination" role="navigation">
    <span class="page-number">第{{page}}頁，共{{pages}}頁</span><br/>
    {{#if prev}}
        <a class="newer-posts" href="{{page_url prev}}">上一頁</a>
    {{/if}}
    {{#if next}}
        <a class="older-posts" href="{{page_url next}}">下一頁</a>
    {{/if}}
</nav>

瀏覽器訪問http://127.0.0.1:2368/，效果以下：

##如何顯示全部的page類型的文章

page類型的文章經常放在博客的導航欄裏。目前好像沒有下面這種形式的支持：

{{#foreach pages}}
{{ title }} {{url}}
{{/foreach}}

建議手動把本身的page的連接放入主題中。

##更多

官方教程

Building a Ghost Theme From Scratch

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。