结构复用
对 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 | 页内目录树 |