theme

themes - 网站主题模板

一个网站需要一套精心维护的主题模板(themes),wordpress、ghost 等博客都有 themes store 可以购买别人精心维护的主题模板。

主题模板(themes)是一个网站的门面,设计合格的主题模板不仅要能适应不同设备的响应式布局,更应该具有良好的可用性、美观性。

今天我们讨论的话题是如何为 ghost 博客实现一套自己的模板。

参考文档:https://themes.ghost.org/docs

注意文档对应的 ghost 版本

这里我们主要为 ghost 0.11.11 设计模板:https://themes.ghost.org/v0.11.11/docs

themes 使用的模板引擎

目前主要有:handlebars、twig、pug 等。ghost 示例主题选用的是 handlebars: http://handlebarsjs.com/

从零开始独立完成一套 themes 的开发并不是明智之举,更好的做法是站在巨人的肩膀上:https://github.com/TryGhost/Casper

casper 是 ghost 官方开源的主题,我们可以以此项目为基础来实现我们自己的 themes。

首先我们需要在本地搭建一个 ghost 开发环境,注意,使用 npm start 而不是 npm start --production,因为生产环境看不到 themes 的实时修改!

The recommended file structure is:

.
├── /assets
|   └── /css
|       ├── screen.css
|   ├── /fonts
|   ├── /images
|   ├── /js
├── default.hbs 
├── index.hbs [required]
└── post.hbs [required]
└── package.json [required]

启用我们新建的主题,这样修改 hbs 文件后就能看到变化。

注意,如果新增了 hbs 文件,必须重启 ghost 才能生效。

Ghost 除了使用了 handlebars 之外,还大量使用了另外一个库express-hbs ,它为 handlebars 增加了一些特性,例如 layoutspartials.

default.hbs 是一个默认布局文件(layout)

Helper Overview

Ghost has a number of built in helpers which give you the tools you need to build your theme. Helpers are classified into two types: block and output helpers.

阅读记录:https://themes.ghost.org/v0.11.11/docs/index-context

王浩冰

继续阅读此作者的更多文章