5. 备受推荐的 Ghost 博客主题结构设计

任何一个项目,如果有一个良好的组织规范和结构设计,那么便成功了一半,这在工程实践上是至关重要的。

对于 Ghost 博客主题来说,一个比较规范的结构设计,会让我们的主题开发变得十分轻松。对此,官方教程里也有 Recommended Structure(推荐结构),如下:

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

在参考了大量优秀的 Ghost 主题源码后,对于 Recommended Structure 我自己有一些心得。 在这篇教程中我们会做一些调整,下面我会仔细解说。

Recommended Structure

直接上图吧,最后我们的主题结构如下:

这是一个基本的主题结构,大家可以在这个基础上去构建自己的主题。为了方便大家,我专门建了一个分支:https://github.com/KINGMJ/maple-test/tree/features/tutorials-5

partials

partials 目录是 Ghost 主题里一个十分重要的目录,我们可以在这里面建立很多小的模板文件,把一个页面拆分成很多个小的组件。

按照现在前端组件化的思想,一个页面通常是由各种小的组件拼装起来的。比如 index.hbs 里面可能包含文章列表等内容,我们可以在 partials 里面建一个 list-post.hbs 专门负责输出文章列表,然后在 index.hbs 中使用 {{> list-post}} 输出它。

partials 目录还有一个很重要的功能,就是我们可以建立一些模板文件用来覆盖系统内置的模板文件。 比如:系统提供了 {{navigation}} 助手表达式用来输出导航,{{pagination}} 助手表达式用来输出分页。我们可以在 partials 目录里建立 pagination.hbsnavigation.hbs 文件覆盖系统默认的模板。需要注意的是,这种方式直接通过 {{pagination}}{{navigation}} 来输出,而不是用 {{> pagination}} partial 表达式

src

前面讲到主题里的所有资源都放在 assets 目录里,需要引入资源的时候使用 {{asset}} 助手表达式即可。比如:

 <link rel="stylesheet" href="{{asset 'css/style.css'}}">

在实际的开发过程中,assets 目录里面的内容往往是通过 gulp 等构建工具生成的,src 目录才是我们各种资源存放的地方,发布到生产环境时会删掉该目录。

其实,我们也可以不用 assets 目录和 {{asset}} 助手表达式,但官方强烈推荐大家用,毕竟它有以下好处:

  • 确保资源文件的相对路径始终正确
  • 可以缓存资源文件
  • 为主题开发者提供了稳定性......

Templates

在主题文件夹的根目录里,我们可以看到有index.hbspost.hbs这些文件。前面讲到在 partials 里面我们可以创建自定义的模板文件,但根目录里的这些模板文件都必须遵循严格的命名约定,我们称之为系统模板吧。

每个模板用于呈现博客的特定页面或部分(称为 Context),并且每个模板都可以访问特定的数据。有关模板的更多信息,我们之后会在具体的操作中介绍到,你也可以直接访问官网的 模板页面 了解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容