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