Ghost博客主题制作简明教程

原创
2016/03/08 18:47
阅读数 3.2K

本文讲述如何给ghost博客系统创作主题,以创建一个简单的主题为例。我使用的ghost版本是0.5.2。

##以development mode启动ghost

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

这种模式下,修改主题后,直接刷新浏览器就可以看到修改后的主题效果,利于主题开发。但是也会遇到不好使的情况,如果遇到,重启即可。

在实际的使用环境中,以下面的形式启动ghost:

$ NODE_ENV=production forever start index.js

这种模式下,主题中的模板文件会被加载并缓存到内存中,所以修改主题后,需要重启ghost,才能生效。

##创建主题

我们姑且把自己制作的主题叫做my-theme

进入ghost的主题目录,创建目录my-theme

$ 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.hbspost.hbstag.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.hbspost.hbstag.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.hbspost.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.hbspost.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

展开阅读全文
打赏
1
5 收藏
分享
打赏
0 评论
5 收藏
1
分享
返回顶部
顶部