第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代码中表现为
标签

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

1. 在PPT中将幻灯片调整为合适尺寸
2. 将下载好的视频拖进PPT中，裁剪修饰
3. 插入蒙层、插入文字
4. 调整视频、蒙层、文字出现顺序
5. 加入过渡特效
6. 使用ScreenToGif将作品转化为Gif，去掉不需要的帧
7. 保存

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的全局设定，需要改用

标签调整正文样式，并使用!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。