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