4. 开始构建我们的主题

Ghost 博客之所以简单,是因为它将后台的一切实现都屏蔽掉。对于主题制作者来说,我们只需关注在前端的 UI 设计和效果实现上就可以了。

在前面的教程中,我们把主题必要的文件都建好了,如下图所示:

我们前面用gscan检测出主题有以下错误和警告信息。首先我们修复一下这些错误和警告信息吧。

default.hbs

Ghost 主题推荐用一个 default.hbs 来作为一个默认的布局模板,它提供了每个页面都需要的等 HTML 标签以及每个页面都必需的{{ghost_head}}{{ghost_foot}}

我们首先新建一个default.hbs来修复主题的警告信息吧。





  {{!-- Document Settings --}}
  
  

  {{!-- Base Meta --}}
  {{meta_title}}
  
  

  {{!-- Styles'n'Scripts --}}
  

  {{!-- This tag outputs SEO meta+structured data and other important settings --}}
  {{ghost_head}}




  
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} {{{body}}}
{{ghost_foot}}

可以看到,这里面包含了一个 HTML 页面的基本元素,然后我们用到了一些 Helpers。介绍几个比较重要的 Helpers 吧。

asset

asset 属于 Utility Helpers 里面一个比较重要的 Helper。它主要的作用是方便我们管理主题的各种资源,比如 css、js 和图片等资源。它确保了资源的相对路径始终正确,无论 Ghost 安装在哪个目录。

使用它的话,我们需要在主题的根目录中新建一个assets文件夹,然后指定资源的路径都是相对于它的路径。

// Styles


// Scripts


// Images

{{{body}}}

{{{body}}}实现的是一个插槽的功能,当其他页面的首行使用了{{!< default}}后,会把该页面的代码插入到{{{body}}}里面。

ghost_head/foot

这两个 Helpers 是每个页面都必须去指定的,它主要提供了一些实验性的功能,比如在后台可以注入一些自定义的代码。所以通过这个也看出来了default.hbs的好处,只需要在该文件指定就可以了,其他的页面只需要引入default.hbs模板。

修复样式错误

default.hbs 中我们引入了一个 main.css,当然我们还没有该文件。


它的路径是 assets/css/main.css,所以我们创建好文件夹及该文件

gscan 的错误信息中提示我们没有实现那些样式,那么我们先搞定它。

/* gallery and bookmark */
.kg-width-wide{

}
.kg-width-full{

}
.kg-gallery-container{

}
.kg-gallery-row {

}
.kg-gallery-image{

}
.kg-bookmark-card {

}
.kg-bookmark-container{

}
.kg-bookmark-content{

}
.kg-bookmark-title{

}
.kg-bookmark-description{

}
.kg-bookmark-metadata {

}
.kg-bookmark-icon{

}
.kg-bookmark-author{

}
.kg-bookmark-publisher{

}
.kg-bookmark-thumbnail{

}

虽然是空的样式,但我们再次用 gscan 去检测我们的主题,发现已经没有任何错误了。

index.hbs

index.hbs 作为文章列表页面,通常是博客的主页面,我们可以通过 foreach 助手函数 输出文章列表

{{!< default}}
{{#foreach posts}}
  

{{title}}

{{/foreach}}

保存代码,现在去访问 http://localhost:2368/ , 可以看到页面上显示出了文章的标题

post.hbs

post.hbs 作为文章详情页面,通常显示文章的内容,我们可以通过 post 块级表达式来输出文章的内容

{{!< default}}
{{#post}}
  

{{title}}

{{content}}

{{/post}}

文章详情页我们也写好了,但是这时候我们不知道如何访问文章详情页面,所以我们需要将 index.hbs改变一下,增加一个可以跳转到文章详情页的链接。这里我们使用 Functional Helpers 里面的 link 来实现一个链接

{{!< default}}
{{#foreach posts}}
  

{{#link href=url}} {{title}} {{/link}}

{{/foreach}}

点击链接可以跳转到文章详情页了,显示的就是 post.hbs 里面输出的内容

到这里,我们有文章列表了,也有文章详情了,一个基本的骨架已经出来了。

我们再加上一些样式什么的,为我们的博客披上一件华丽的衣裳,包装一下,就完美了。这也是我们接下来的工作,给这个骨架添砖加瓦,不断地优化。

示例代码:https://github.com/KINGMJ/maple-test/tree/features/tutorials-4

你可能感兴趣的:(4. 开始构建我们的主题)