第5课：微信终极排版指南随堂笔记
前言：从低效的排版工作流中解脱出来，通过Markdown排版的工作流实现自动化、可自定义的公众号的排版，从而可以有更多的时间去投入到运营和推广的工作上去。
1. 语言准备：Markdown基础入门
1.1 Markdown 基础入门
- Markdown是一门为互联网写作而诞生的标记性语言。
- 阅读容易
- 撰写容易
- 上手容易
1.2 使用Markdown编辑器
- 在线编辑器
- StackEdit
- 简书
- 离线编辑器
- Typora：支持Windows、Mac、Linux，无预览功能
- MarkdownPad：支持Windows
- Mou：支持Mac
- 补充：小书匠
- 同时有离线版与在线版，支持Windows、Mac、Linux
- 可以单文章或者全局设置CSS样式
- 拓展功能丰富，可以搭配Evernote、为知、Github使用，数据可以储存到多个平台或者离线储存，图片可以通过绑定图床服务在线保存
- 可以绑定第三方个人博客主页，直接发布文章
- 语法拓展功能丰富，支持序列图、流程图、统计图等拓展语法
- 免费
1.3 Markdown基础语法
1.3.1 标题标记：#、=、-
- #：在标题前加上
#表示标题，可同时使用多个#，表示1-6级标题，注意需要在#后添加空格 - =：在标题下方加上
=表示标题，可同时使用多个=，效果等同一个= - -：用法与
=相同
1.3.2 段落标记：回车
注意：原生编辑器需要两次回车，部分优化过的编辑器只需要一次。
换行：shift+回车，效果为强制换行而不分段，在html代码中表现为<br>标签
1.3.3 插入超链接
-
[example](这里放链接)：效果示例 -
<这里放链接>：http://www.baidu.com
1.3.4 插入图片：
1.3.5 插入列表
- 无序列表：文本前加
*或-，符号后面需要添加空格 - 有序列表：文本前加
数字.，符号后面需要添加空格 - 可以通过
Tab增加列表层级进行嵌套，两者可以混合使用，效果参见本条。
1.3.6 引用块标记：>，引用嵌套：>>，符号后面需要添加空格
这是引用效果
这是引用嵌套效果
1.3.7 强调标记：
- 加粗：
**文本**或者__文本__，示例 - 斜体：
*文本*或者_文本_，示例
1.3.8 代码块标记
- 行内代码：`文本`，
示例 - 代码块：
```
文本
```
示例
1.3.9 分割线标记
-
-：文本下方使用三个或以上-，两个-之间可以加入空格 -
*：用法同-
2. 规范准备：公众号排版设计规范
2.1 公众号设计规范的要素
- 配色方案
- 价值定位区块
- 导语区块
- 标题区块
- 正文区块
- 强调文本区块
- 行动呼唤区块
2.2 配色方案的应用
配色方案案例
- 配色方案包括彩色系和无彩色系
- 彩色系一般不使用超过3种色彩
- 彩色系一般用于标题或强调处
- 无彩色系黑白灰一般选用3-4个梯度
- 无彩色系一般使用在正文和引用文本
2.3 价值定位区块
价值定位区块的应用
- 提供关于公众号的竞争优势、用户价值等信息
- 通常是关于公众号的一句话简介
- 公式：目标用户+痛点问题+解决方式
- 通常的表现形式为：文章头图／作者名称
头图创作工具：创客贴
2.4 导语区块
导语区块的应用
- 一般出现在文章的头部
- 通常用于表现创作背景、写作动机或构造悬念
- 通常的表现形式为：左边框+右缩进
- 在正文中，引用的表现形式和导语通用
2.5 标题区块
标题区块的应用
- 公众号文章标题级别通常不超过三个级别
- 二级标题使用频率最高
- 字体表现形式：放大／加粗／主色
- 对齐方式常见：左对齐／居中
- 其他修饰风格各异，下边框居多
2.6 正文区块
正文区块的应用
- 公众号的主体，创建设计氛围的重要载体
- 公众号默认正文字体大小16px
- 公众号默认正文字体颜色值#3e3e3e
- 公众号支持的字体有限，但可自定义
- 正文字体15px、颜色#333333，1.8倍行距可以快速构建一种优雅感
2.7 强调文本区块
强调文本区块的应用
- 强调文本区块用于突出重点、表明身份等场景
- 具体的表现形式包括加粗、倾斜、加主色、放大、下划线等
- 公众号常用的两种强调形式为：加粗和加主色
- 外站超链接在公众号图文中无法使用，所以强调文本会与超链接文本混用
2.8 行动呼唤区块
行动呼唤区块的应用
- 行动呼唤一般放置于公众号的文末，是所有文章的最终目的
- 常用的形式包括二维码、商业购买、原文链接、相关阅读等
- 通常需要进行额外的图片设计和嵌套
- 二维码扫描的形式会再次加入经过变形的价值定位
3. 一键排版：公众号自动排版工作流
3.1 安装Markdown渲染插件
工具：Markdown Here浏览器插件
3.2 公众号自动排版工作流
- 在Markdown Here中配置CSS样式
- 用markdown语言撰写文章
- 把文章粘贴到微信公众号后台编辑器中
使用Markdown Here渲染（图片需要重新插入）
4.样式准备：自定义公众号排版样式
4.1 价值定位区块的自定义样式
价值定位区块可以为图片或一句话简介，图片直接上传即可。
如何制作动态头图：
需要工具：PowerPoint、Pexels／Wedistill／Mazwai、ScreenToGif
- 在PPT中将幻灯片调整为合适尺寸
- 将下载好的视频拖进PPT中，裁剪修饰
- 插入蒙层、插入文字
- 调整视频、蒙层、文字出现顺序
- 加入过渡特效
- 使用ScreenToGif将作品转化为Gif，去掉不需要的帧
- 保存
4.2 导语区块的自定义样式
关键字：blockquote
参考样式：
blockquote {
border-left:4px solid #DDD;
padding:0 1em;
color:#777777;
quotes:none;
}
4.3 标题区块的自定义样式
关键字：h2、h3、h4、h5、h6
参考样式：
h2 {
font-size:1.4em;
border-bottom:1px solid #DDDDDD;
}
4.4 正文区块的自定义样式
关键字：.markdown-here-wrapper
参考样式：
.markdown-here-wrapper {
font-family:Avenir;
font-size:15px;
color:#333333;
line-height:1.8em;
margin:0.5em 1em;
text:align:justify;
text:align中justify表示两端对齐，为了避免公众号左对齐或右对齐时出现空白
微信公众号编辑器升级调整后不再支持Markdown Here中.markdown-here-wrapper的全局设定，需要改用<p>标签调整正文样式，并使用!important强制应用样式。
参考样式：
p {
margin:0 0 1.2em 0 !important;
font-family:Avenir,PT-sans !important;
padding:0.5em 1em !important;
font-size:14px !important;
lint-height:1.8em;
}
Notes | 如何在自定义微信正文字体
微信上支持的字体有限，这个取决于微信内的浏览器支持那些网页字体，所以最妥当的就是使用它默认的字体(点击“清除格式”)后显示的那一个。
但是根据目前在IOS设备的尝试，支持的中文字体有：平方(PingFangSC)，微软雅黑(Microsoft YaHei)，华文细黑（STHeiti Light）等等，具体的常见字体代号参见：中文网页用什么字体最合适？
那应该如何在Markdown Here中修改呢？我们可以挑选出对应的正文标签P，然后做如下属性声明：p { font-family: PingFangSC-regular, "Microsoft YaHei", STXihei, serif; }上面之所以有多个字体，主要的规则有三条：
优先使用排在前面的字体。
如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。
4.5 强调文本区块的自定义样式
关键字：strong
参考样式：
strong {
color:#00F9A5;
font-weight:bold;
}
4.6 行动呼唤区块的自定义样式
行动呼唤区块与价值定位区块类似，可以使用图片作为结尾，具体参考价值定位区块相关内容。
微信公众号后台编辑器中，如果结尾为引用，那么插入行动呼吁区块的图片时会将图片包含进引用部分，因此需要在开始编辑时预先插入图片，避开这个bug。
