结构复用

对 HTML 所描述结构的复用,可分为「布局」与「片段」两大类。

布局

名称/路径 说明
default 作为其他布局的基础结构,包含了 <head> 及其内容,继承该布局的其他布局的内容会被渲染在 <body>
page 继承了 default,用于常规页面
post 继承了 page,用于文章
doc 继承了 default,用于使用指南、API 文档等
blank 没有任何 HTML 标签,完全空白

片段

像 Jekyll 这类静态网站生成器并没有「组件」相关支持,但通过它提供的 include 机制可以进行一定程度上的模拟。

虽没明说,但 include 这种复用机制就相当于是模板引擎的「partial」,故在此也将通过 include 使用的片段都称为「partial」。

常规

每个页面顶多会用到一次的非功能性片段:

名称/路径 说明
meta/seo SEO 相关标签
meta/render 页面渲染及兼容性相关标签
meta/feed Feed 订阅相关标签
meta/brand 网站品牌相关标签
head <head> 内非样式与脚本内容
header 页面头部
footer 页面底部

组件

多次使用的一般性可复用片段,通常会传入参数:

名称/路径 说明
link 用于站内或站外链接的 <a> 标签
brand-link 网站品牌链接
nav-list 导航菜单条目列表
copyright 版权声明文本及链接
doc-toc 用于使用指南、API 文档等的文档目录树

部件

为完成特定业务功能的片段,没有传入的参数:

名称/路径 说明
disqus Disqus 评论框
comment 综合评论框
share 分享到 SNS
toc 页内目录树

目录