前言：從低效的排版工作流中解脫出來，通過Markdown排版的工作流實現(xiàn)自動化拦惋、可自定義的公眾號的排版寻仗，從而可以有更多的時間去投入到運營和推廣的工作上去。
1. 語言準備：Markdown基礎(chǔ)入門
1.1 Markdown 基礎(chǔ)入門
- Markdown是一門為互聯(lián)網(wǎng)寫作而誕生的標記性語言昧穿。
- 閱讀容易
- 撰寫容易
- 上手容易
1.2 使用Markdown編輯器
- 在線編輯器
- StackEdit
- 簡書
- 離線編輯器
- Typora：支持Windows勺远、Mac、Linux时鸵，無預(yù)覽功能
- MarkdownPad：支持Windows
- Mou：支持Mac
- 補充：小書匠
- 同時有離線版與在線版胶逢，支持Windows厅瞎、Mac、Linux
- 可以單文章或者全局設(shè)置CSS樣式
- 拓展功能豐富初坠，可以搭配Evernote和簸、為知、Github使用碟刺，數(shù)據(jù)可以儲存到多個平臺或者離線儲存锁保，圖片可以通過綁定圖床服務(wù)在線保存
- 可以綁定第三方個人博客主頁，直接發(fā)布文章
- 語法拓展功能豐富半沽，支持序列圖爽柒、流程圖、統(tǒng)計圖等拓展語法
- 免費
1.3 Markdown基礎(chǔ)語法
1.3.1 標題標記：#抄囚、=霉赡、-
- #：在標題前加上
#表示標題，可同時使用多個#幔托，表示1-6級標題穴亏，注意需要在#后添加空格 - =：在標題下方加上
=表示標題，可同時使用多個=重挑，效果等同一個= - -：用法與
=相同
1.3.2 段落標記：回車
注意：原生編輯器需要兩次回車嗓化，部分優(yōu)化過的編輯器只需要一次。
換行：shift+回車谬哀，效果為強制換行而不分段刺覆，在html代碼中表現(xiàn)為<br>標簽
1.3.3 插入超鏈接
-
[example](這里放鏈接)：效果示例 -
<這里放鏈接>：http://www.baidu.com
1.3.4 插入圖片：
1.3.5 插入列表
- 無序列表：文本前加
*或-，符號后面需要添加空格 - 有序列表：文本前加
數(shù)字.史煎，符號后面需要添加空格 - 可以通過
Tab增加列表層級進行嵌套谦屑，兩者可以混合使用，效果參見本條篇梭。
1.3.6 引用塊標記：>氢橙，引用嵌套：>>，符號后面需要添加空格
這是引用效果
這是引用嵌套效果
1.3.7 強調(diào)標記：
- 加粗：
**文本**或者__文本__恬偷，示例 - 斜體：
*文本*或者_文本_悍手，示例
1.3.8 代碼塊標記
- 行內(nèi)代碼：`文本`，
示例 - 代碼塊：
```
文本
```
示例
1.3.9 分割線標記
-
-：文本下方使用三個或以上-袍患，兩個-之間可以加入空格 -
*：用法同-
2. 規(guī)范準備：公眾號排版設(shè)計規(guī)范
2.1 公眾號設(shè)計規(guī)范的要素
- 配色方案
- 價值定位區(qū)塊
- 導(dǎo)語區(qū)塊
- 標題區(qū)塊
- 正文區(qū)塊
- 強調(diào)文本區(qū)塊
- 行動呼喚區(qū)塊
2.2 配色方案的應(yīng)用
- 配色方案包括彩色系和無彩色系
- 彩色系一般不使用超過3種色彩
- 彩色系一般用于標題或強調(diào)處
- 無彩色系黑白灰一般選用3-4個梯度
- 無彩色系一般使用在正文和引用文本
2.3 價值定位區(qū)塊
價值定位區(qū)塊的應(yīng)用
- 提供關(guān)于公眾號的競爭優(yōu)勢坦康、用戶價值等信息
- 通常是關(guān)于公眾號的一句話簡介
- 公式：目標用戶+痛點問題+解決方式
- 通常的表現(xiàn)形式為：文章頭圖／作者名稱
頭圖創(chuàng)作工具：創(chuàng)客貼
2.4 導(dǎo)語區(qū)塊
導(dǎo)語區(qū)塊的應(yīng)用
- 一般出現(xiàn)在文章的頭部
- 通常用于表現(xiàn)創(chuàng)作背景、寫作動機或構(gòu)造懸念
- 通常的表現(xiàn)形式為：左邊框+右縮進
- 在正文中诡延，引用的表現(xiàn)形式和導(dǎo)語通用
2.5 標題區(qū)塊
標題區(qū)塊的應(yīng)用
- 公眾號文章標題級別通常不超過三個級別
- 二級標題使用頻率最高
- 字體表現(xiàn)形式：放大／加粗／主色
- 對齊方式常見：左對齊／居中
- 其他修飾風格各異滞欠，下邊框居多
2.6 正文區(qū)塊
正文區(qū)塊的應(yīng)用
- 公眾號的主體，創(chuàng)建設(shè)計氛圍的重要載體
- 公眾號默認正文字體大小16px
- 公眾號默認正文字體顏色值#3e3e3e
- 公眾號支持的字體有限肆良，但可自定義
- 正文字體15px仑撞、顏色#333333赤兴，1.8倍行距可以快速構(gòu)建一種優(yōu)雅感
2.7 強調(diào)文本區(qū)塊
強調(diào)文本區(qū)塊的應(yīng)用
- 強調(diào)文本區(qū)塊用于突出重點、表明身份等場景
- 具體的表現(xiàn)形式包括加粗隧哮、傾斜、加主色座舍、放大沮翔、下劃線等
- 公眾號常用的兩種強調(diào)形式為：加粗和加主色
- 外站超鏈接在公眾號圖文中無法使用，所以強調(diào)文本會與超鏈接文本混用
2.8 行動呼喚區(qū)塊
行動呼喚區(qū)塊的應(yīng)用
- 行動呼喚一般放置于公眾號的文末曲秉，是所有文章的最終目的
- 常用的形式包括二維碼采蚀、商業(yè)購買、原文鏈接承二、相關(guān)閱讀等
- 通常需要進行額外的圖片設(shè)計和嵌套
- 二維碼掃描的形式會再次加入經(jīng)過變形的價值定位
3. 一鍵排版：公眾號自動排版工作流
3.1 安裝Markdown渲染插件
工具：Markdown Here瀏覽器插件
3.2 公眾號自動排版工作流
- 在Markdown Here中配置CSS樣式
- 用markdown語言撰寫文章
- 把文章粘貼到微信公眾號后臺編輯器中
使用Markdown Here渲染（圖片需要重新插入）
4.樣式準備：自定義公眾號排版樣式
4.1 價值定位區(qū)塊的自定義樣式
價值定位區(qū)塊可以為圖片或一句話簡介榆鼠，圖片直接上傳即可。
如何制作動態(tài)頭圖：
需要工具：PowerPoint亥鸠、Pexels／Wedistill／Mazwai妆够、ScreenToGif
- 在PPT中將幻燈片調(diào)整為合適尺寸
- 將下載好的視頻拖進PPT中，裁剪修飾
- 插入蒙層负蚊、插入文字
- 調(diào)整視頻神妹、蒙層、文字出現(xiàn)順序
- 加入過渡特效
- 使用ScreenToGif將作品轉(zhuǎn)化為Gif家妆，去掉不需要的幀
- 保存
4.2 導(dǎo)語區(qū)塊的自定義樣式
關(guān)鍵字：blockquote
參考樣式：
blockquote {
border-left:4px solid #DDD;
padding:0 1em;
color:#777777;
quotes:none;
}
4.3 標題區(qū)塊的自定義樣式
關(guān)鍵字：h2鸵荠、h3、h4伤极、h5蛹找、h6
參考樣式：
h2 {
font-size:1.4em;
border-bottom:1px solid #DDDDDD;
}
4.4 正文區(qū)塊的自定義樣式
關(guān)鍵字：.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表示兩端對齊，為了避免公眾號左對齊或右對齊時出現(xiàn)空白
微信公眾號編輯器升級調(diào)整后不再支持Markdown Here中.markdown-here-wrapper的全局設(shè)定哨坪，需要改用<p>標簽調(diào)整正文樣式庸疾，并使用!important強制應(yīng)用樣式。
參考樣式：
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 | 如何在自定義微信正文字體
微信上支持的字體有限齿税，這個取決于微信內(nèi)的瀏覽器支持那些網(wǎng)頁字體彼硫，所以最妥當?shù)木褪鞘褂盟J的字體(點擊“清除格式”)后顯示的那一個。
但是根據(jù)目前在IOS設(shè)備的嘗試凌箕，支持的中文字體有：平方(PingFangSC)拧篮，微軟雅黑(Microsoft YaHei)，華文細黑（STHeiti Light）等等牵舱，具體的常見字體代號參見：中文網(wǎng)頁用什么字體最合適串绩？
那應(yīng)該如何在Markdown Here中修改呢？我們可以挑選出對應(yīng)的正文標簽P芜壁，然后做如下屬性聲明：p { font-family: PingFangSC-regular, "Microsoft YaHei", STXihei, serif; }上面之所以有多個字體礁凡，主要的規(guī)則有三條：
優(yōu)先使用排在前面的字體高氮。
如果找不到該種字體，或者該種字體不包括所要渲染的文字顷牌，則使用下一種字體剪芍。
如果所列出的字體，都無法滿足需要窟蓝，則讓操作系統(tǒng)自行決定使用哪種字體罪裹。
4.5 強調(diào)文本區(qū)塊的自定義樣式
關(guān)鍵字：strong
參考樣式：
strong {
color:#00F9A5;
font-weight:bold;
}
4.6 行動呼喚區(qū)塊的自定義樣式
行動呼喚區(qū)塊與價值定位區(qū)塊類似，可以使用圖片作為結(jié)尾运挫，具體參考價值定位區(qū)塊相關(guān)內(nèi)容状共。
微信公眾號后臺編輯器中，如果結(jié)尾為引用谁帕，那么插入行動呼吁區(qū)塊的圖片時會將圖片包含進引用部分峡继，因此需要在開始編輯時預(yù)先插入圖片，避開這個bug匈挖。
