中文博客排版指南
标题
正确:(Markdown 语法)
1 | # 文章的标题 |
原则:
(1)文章内容的标题一般用 ##
和 ###
。为保证层级的简单,请尽量避免出现 ####
的标题。
(2)为保证标题的连贯性,#
的标题下不要直接出现 ###
的标题。
图片
1、图片大小
为方便网络传输,且保证清晰度,图片大小尽量控制在 100 KB 至 500 KB 之间。
如果图片过大,可以使用网址 https://tinypng.com/ 进行压缩;如果图片不够清晰,请重新制图。
2、图片格式
静态图片用 png、jpg 格式。
动态图用 gif 格式。gif 动图可以使用软件 LICEcap 录制屏幕生成。
gif 图的帧数不要超过 300 帧,否则无法上传到公众号。一般情况下,gif 图的大小控制在 500kb 以内,基本能符合要求。
3、图片文件名
图片的文件名使用当前时间戳,格式:YYMMDD_HHMM
。格式举例:
1 | 20190902_1010.png |
4、流程图制作工具
流程图、思维导图(在线):https://www.processon.com
思维导图(在线):https://naotu.baidu.com
思维导图(本地):https://www.xmind.cn
列清单、思维导图(在线):https://mubu.com
5、图片素材网站
Unsplash 是国外知名度最高的免费高清网站(图片素材免费、无版权),是现代年轻人喜欢的 ins 简约风,到处都充满生活剪影。
免费正版高清图片素材库。
Markdown 规范
1、换行
每两段的中间,需要空出一行。
正确:
1 | 段落 1(这里是第一行) |
错误:
1 | 段落 1(这里是第一行) |
2、四级标题
文中的四级标题,请不要用 ####
,建议使用加粗文本即可。
正确:
1 | **我是四级标题**: |
错误:(四级标题渲染出来的字体大小,其实跟普通文本差不多,所以不要用)
1 | #### 我是四级标题 |
空格
中英文之间需要增加空格
正确:
1 | 任何可以使用 JavaScript 来编写的应用,最终都会由 JavaScript 编写。 |
错误:
1 | 任何可以使用 JavaScript 来编写的应用,最终都会由 JavaScript 编写。 |
中文和数字之间需要增加空格
正确:
1 | 一年有 12 个月。 |
错误:
1 | 一年有 12 个月。 |
数字和单位之间需要加空格
正确:
1 | 正确:一部容量为 16 GB 的智能手机 |
错误:
1 | 错误:一部容量为 16GB 的智能手机 |
完整的英文整句时标点与单词之间需要加空格
正确:
1 | Stay hungry, stay foolish. That is Steve's famous quote. |
错误:
1 | Stay hungry,stay foolish.That is Steve's famous quote. |
例外:度的标志、百分号不加空格
正确:
1 | 今天气温有 35° 的高温。 |
例外:全角标点与其他字符之间不加空格
正确:
1 | 全球最大的同性交友社区 GitHub,已被微软收购。 |
专有名词使用正确的大小写
正确:
1 | 想要学习 Web 前端,应该首先学习 HTML、CSS、JavaScript、jQuery、Ajax、Vue.js、React 等基础内容。 |
错误:
1 | 想要学习 web 前端,应该首先学习 html、css、Javascript、Jquery、ajax、vue.js、react 等基础内容。 |
正确:
1 | GitHub、Android、iOS、iPhone 6s、iPhone SE、MacBook Pro |
标点
关于全角和半角
简单来说,全角占两个字节,半角占一个字节。你可以理解成中文汉字和中文标点是全角,英文字母和英文标点是半角。体现在排版上的差异就是,全角字符屏幕打印宽度是两个,而半角字符屏幕打印宽度是一个,如中文逗号和英文逗号他们的显示分别是「,」和「,」。
更详细的介绍,可以查看维基百科的词条「全角和半角」
使用全角中文标点
中文排版中,所有的标点都应该使用全角中文标点。
示例:
1 | 大家好,我正在使用 GitHub。 |
遇到英文整句、特殊名词时使用半角标点
示例:
1 | 乔布斯说过:「Stay hungry, stay foolish.」 |
需要特别强调的词,建议用直角引号
示例:
1 | 互联网上充斥着大量的内容,「知识付费」成为下一个风口。我每天使用「得到」App,阅读一小时。 |
图床工具
写文章免不了要做图片传图片,推荐使用 PicGo 工具,不论屏幕截图、还是复制图片,都可以自动上传、保存 Markdown 格式的链接,直接粘贴插入。
对了,在使用 PicGo 之前,先要保证你要有一个保存图片的图床服务器,配置到 PicGo 上,然后再让 PicGo 帮你生成图片的 url 链接。
排版相关
公众号 Markdown 编辑器推荐
- 【荐】markdown 在线转换工具 1:https://www.mdnice.com/
这个 markdown 排版网站用的人最多。还可以针对外链,自动生成脚注。
- markdown 在线转换工具 2:http://prod.zkqiang.cn/wxeditor/index.html
可以针对外链,自动生成脚注。
markdown 在线转换工具 3:https://lab.lyric.im/wxformat
markdown 在线转换工具 4:http://md.aclickall.com/
markdown 在线转换工具 5:http://blog.didispace.com/tools/online-markdown/
文本纠错
写作猫(文本纠错网站):https://xiezuocat.com/