排版设计
利用设计思维写出一篇排版好看的文章。
📑 用大纲还是标题?
- 为了更好的移动端阅读体验,建议优先选择标题加正文(无序列表或段落文本)的排版方式,且无序列表层级控制在二级无序列表,不要出现三级无序列表,否则移动端排版会很难看。标题层级控制在 h2-h4, 不要使用 h5-h6,改用粗体代替 h5-h6。操作手册类的尽量不使用大纲笔记来排版,因为这类型的文章要求内容详细。
- 对于层级较多的文章可考虑使用大纲笔记进行排版,使用大纲笔记排版可使内容紧凑、层级明显且减少留白,节省文章篇幅,但会损失移动端阅读体验,可在每个系列的文章汇总页面就可用大纲笔记来整理。
🎉 文章规范
主要介绍正文与标题的规范
✨ 标题
- 每个小节的标题使用二级或者三级标题(h2|h3)
- 小节中进一步分层组织时使用四级标题(h4)
- 尽量少用五级标题和六级标题,考虑用有序列表和无序列表或者加粗普通文本代替
- 标题不加注数字章节,如:1,1.1,2.2 等
- 标题请不要随意使用颜色,只使用黑色
- 每个标题前面添加「分割线」(可选)
✨ 正文
- 正文尽量以普通文本为主,着重强调时可使用粗体,英文姓名 Isacc Newton 或某些专有名词可使用斜体。英文、数字与中文之间需要空格,例如:还有 30 天,一个 HTML 页面,使用 Webpack 打包
- 中文文档使用全角标点符号
- 英文文档使用半角标点符号
- 段落之间空一行加深层次感,也可不加空行
- 不要随意在正文中使用标题类的文字
- 标记颜色强调的时候,前后空格并使用 蓝色,例如 这里是标记颜色强调 的文字。
- 正文中合理使用 无序列表 和 数字列表。注意多级列表使用 tab 缩进
- 无序列表主要用于枚举或者无顺序关系的含义可以并列的句子
- 数字列表主要用于有顺序关系的动作序列或者计划事项
- 辅助性的提示文字和备注,请使用灰色普通文本
- 用代码块来显示一段代码,请注意选择对应的代码语言,以正确高亮;如果代码过长,记得换行
- 正文中嵌入图片,调整图片宽度以便更好地显示,可将图片并列显示
- 文本样式主要服务于要表达的内容,所以样式尽量规范、统一。在不需要使用样式的情况下则不宜滥用样式,只在必要的时候使用样式。比如这样的颜色标记,就是一个坏例子。
- 一定要牢记“分层”思想,比较长的文章可以分割成一个个小的片段(类似卡片笔记法中的卡片),然后将这些卡片进行组合。
- 可以使用 vuepress 自带的容器(如:tab 栏、提示块、detail 容器)等对内容进行封装美化。
- 使用 svg 图标,从 iconpark icon 复制 svg 代码(图标大小设定为 16px ),删除开头的
<?xml version="1.0" encoding="UTF-8"?>