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