如何開啟公眾號寫作新思路
1. 本文概述
1.1 適用人群
嘗試使用Markdown語言作為編寫文檔的同學
在多個平臺發布同一文章的同學
使用微信公眾號排版時希望可以節約排版時間的同學
苦各個平臺寫作時插入圖片操作流程太長的同學
1.2 閱讀完本文你可以獲得什么
不再為文章中插入圖片而煩惱，統一管理你的圖片；
同一文章不同平臺（知乎，微信公眾號，人人都是PM，產品壹佰，PmCaff）快速發布，文章風格統一；
實現微信公眾號文章排版簡潔化，統一化，不再繁瑣的導入本地圖片，添加圖片；
定制屬于自己的排版風格，節約你的時間。
1.3 你需要什么
- 軟件包或者賬號
Typora安裝包
PicGo安裝包
node.js安裝包
Gitee(碼云)賬號（或者其他做圖床的平臺，例如Github或者七牛云等）
- 代碼知識
基本不需要任何代碼知識，如果你對微信排版樣式的要求比較高，可以自學一些CSS知識（或者下載寫好的CSS文件，自己修改格式即可），定制屬于自己的格式
Markdown語言，基本每個人都可以在半個小時內學會，大家可以用某度搜索關鍵詞
Markdown看一些相關教程，半個小時搞定。
1.4 原理
PicGo將圖片上傳到你的gitee倉庫，然后返回給你圖片的具體地址，這樣你用該地址便可以訪問到位于倉庫的圖片了。
獲取到你的圖片地址后，利用軟件為你復制好的Marddown格式，復制粘貼到文本中
利用Typora的導出功能，導出為定制好樣式的HTML文件，打開HTML文件，粘貼到微信公眾號平臺
2. 安裝npm
由于PicGo的插件需要使用npm進行安裝，如果你的電腦上沒有安裝npm，那么你是無法安裝PicGo插件的，而我們接下來要使用一個額外的插件獲得gitee支持，所以在此之前先完成npm的安裝。
訪問node.js的官網，根據官網的指導下載并安裝node.js，在控制臺輸入npm -v,如果輸出npm -v 6.13.4確認安裝成功。
3. 注冊碼云Gitee
3.1 新建倉庫
在官網網站碼云注冊賬號，注冊完成后，點擊新建New Repository新建倉庫，填寫倉庫名。倉庫名隨意，但是必須要是公開的倉庫，這樣圖片才能被外部訪問。我創建的地址為：https://gitee.com/guohaoxin/TestForPIcGo。
3.2 創建私人令牌
創建完成后，記住你的倉庫名，然后創建你的私人令牌。私人令牌是用來允許PicGo訪問并更新你的倉庫的。創建Gitee私人令牌步驟如下：
setting->Security Settings ->Personal access tokens-> Generate new token -> 填寫 Token description -> Select Scopes-> user_info projects -> 提交commit ->復制你的Token號
注意你需要保存該
token，因為該token只會出現一次，離開頁面過后再不會出現。
4. 安裝PicGo
4.1 為什么安裝PicGo
現有插入圖片的流程：
將截圖（圖片）保存到本地文件夾->將圖片文件上傳到網絡服務器中->復制圖片的網絡地址->在markdown中輸入
[圖片上傳失敗...(image-627ec6-1583759881010)]將截圖（圖片）保存到本地文件夾->將本地文件插入到文檔中
安裝picGo后，利用picGo插入圖片的流程：
將本地截圖（圖片）插入到文檔中->自動上傳圖片到網絡地址
將網絡的（圖片）上傳到圖床->復制格式化的信息插入圖片
PicGo在上傳圖片之后自動會將圖片鏈接復制到你的剪貼板里，可選5種復制的鏈接格式：Markdown、HTML、URL、UBB、Custom。
PicGo是一款免費的圖床管理應用，支持拖拽上傳，剪切板上傳等方式。你可以用它快捷地將圖片上傳到圖床并獲得網絡鏈接，而且你可以設置鏈接格式為markdown，這就意味著你只要直接粘貼到markdown編輯器就可以插入圖片了。
4.2 如何安裝picGo
訪問PicGo的官方文檔以了解PicGo的基本安裝和使用方法。如果不想讀文檔的話，訪問PicGo Releases直接下載你的操作系統對應的安裝包并完成安裝。
tip:注：在安裝的時候安裝目錄千萬不能選C:\Program Files\下的任何地方，如果你不知道安裝在哪里的話，選擇僅為我安裝，否則在設置Typora時會出現以下錯誤：
failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe 'C:\Program' ????????????????????????е???? ?????????????`
如下圖所示
5. 設置Gitee為PicGo的圖床
5.1 安裝Gitee插件為PicGo的圖床
運行PicGo,單擊插件設置，在搜索中輸入Github，安裝搜索結果中的github-plus，如下圖所示。設置完成后可以在圖床設置中看到Github plus這一選項,即安裝成功。
5.2 配置PicGo可以訪問Gitee的圖床
點擊圖床設置->GitHubPlus,在設置中填入你新建的倉庫名repo和 token，并選擇origin為gitee，點擊確定完成設置。其中repo要填入你gitee的用戶名/新建的倉庫名，例如，倉庫地址為https://gitee.com/guohaoxin/TestForPIcGo，則repo填入的內容為guohaoxin/TestForPIcGo。
5.3 如何上傳和管理圖片
針對截圖，你可以直接使用Ctrl/command+shift+p快捷鍵上傳，然后使用Ctrl+V復制粘貼到你的Markdown編輯器里。
針對現有圖片，你可以單擊上傳區上傳文件，或者把文件拖拽到上傳區進行上傳。單擊相冊，你可以看到你上傳的所有圖片，你可以對所有圖片進行復制，修改圖片URL與刪除操作，并可以批量復制或批量刪除。
6. 使用Typora+picGo體驗快捷寫博客
使用PicGo有效避免了使用圖片時候的上傳->編寫markdown代碼的步驟，但是我們能不能把添加到PicGo這一步也省略掉呢？答案當然是可以，Typora內置了使用PicGo自動上傳圖片的功能，也就是說，在需要使用圖片的時候，你只要直接將圖片粘貼到Typora就好了，這樣就跟使用本地圖片的體驗毫無差距了。
6.1 設置Typora
如果你未按照Typora，你可以去官網網站下載安裝。安裝完成后安裝一下步驟進行設置Typora。
點擊Typora左上角的
文件->偏好設置在彈出的頁面中點擊
圖像，選擇插入圖片時選項為'上傳圖片'，并勾選所有選項
- 選擇
上傳服務為PicGo(app)，點擊驗證圖片上傳選項，如果出現如下圖所示界面，說明配置已成功，然后你就可以直接在Typora中插入圖片了，Typora會自動上傳并替換圖片地址為網絡地址。
6.2 錯誤解決
-
如果出現以下錯誤，請參考安裝PicGo
failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe 'C:\Program' ????????????????????????е???? ????????????? 如果出現以下錯誤，請點擊PicGo的
PicGo設置->設置Server，按照下圖進行設置。
- 建議在
PicGo設置不打開選項上傳前重命名和時間戳重命名這兩個選項，這樣就不會出現圖片重復上傳的問題了。
7. Typora撰寫的Blog生成微信公眾號的格式
7.1 編寫CSS文件
Typora已經內置了多種主題的文件供大家排版用，最常用的就是Github主題，為了能夠導出符合微信公眾號的格式，我們需要自己編寫CSS文件，符合我們需要的格式。如果你沒有興趣編寫自己的CSS文件，那么你可以下載我的文件主題直接使用。將你的CSS文件復制到如下位置：C:\Users\你的電腦名\AppData\Roaming\Typora\themes。或者通過文件->偏好設置->外觀->打開主題文件夾找到你的文件夾位置。
例如對標題，圖片等內容格式的修改：
h1 {/*對導出HTML一級標題的修改*/
font-size: 15px;
font-weight: bold;
color: #333333;
padding-left: 12px;
border-left: 4px #108EE9 solid;
}
h2{/*對導出HTML二級標題的修改*/
border-bottom:2px solid rgb(11,113,186);
font-size: 15px;
}
h2 span{/*增加對h2標題字體的修改*/
display:inline-block;
font-weight:bold;
background:rgb(11,113,186);
color:#ffffff;
padding:3px 10px 1px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
margin-right:3px;
}
h2:after{/*增加對h2標題后面的修飾*/
display: inline-block;
content:" ";
vertical-align: bottom;
border-bottom: 36px solid #C7E6FC;/*更改標題后的三角形方塊*/
border-right: 20px solid transparent;
}
p img {/*增加圖片的陰影*/
box-shadow: 0 0 10px rgba(0,0,0,0.5);
overflow: visible;
padding: 10px;
}</pre>
我們可以在Typora主題->Wechat直接看到效果如下圖所示，也可以導出HTML后看到結果。你在下圖看到的效果和微信公眾號看到的效果是一樣的。
當然你也可以根據需求在CSS文件中修改自己常用微信公眾號排版格式。
7.2 導出為HTML
單擊文件->導出->HTML，導出HTML文件的格式。
7.3 復制到微信公眾號后臺
打開HTML，復制網頁上的所有內容，直接粘貼到微信公眾號編輯框里即可。然后在稍微修改內容即可。
- 因為微信會對照片和Gif圖片有大小的限制，會出現上傳不成功的現象，但是只需要少量修改即可。
- 我一般把2級標題和3級標題作為公眾號內的常用標題。
7.4 文件下載地址
點擊閱讀原文，百度云下載文件；
關注公眾號，回復“軟件”獲取下載。
