文章目录 如何开启公众号写作新思路1. 本文概述1.1 适用人群1.2 阅读完本文你可以获得什么1.3 你需要什么1.4 原理 2. 安装npm3. 注册码云Gitee3.1 新建仓库3.2 创建私人令牌 4. 安装PicGo4.1 为什么安装PicGo4.2 如何安装picGo 5. 设置Gitee为PicGo的图床5.1 安装Gitee插件为PicGo的图床5.2 配置PicGo可以访问Gitee的图床5.3 如何上传和管理图片 6. 使用Typora+picGo体验快捷写博客6.1 设置Typora6.2 错误解决 7. Typora撰写的Blog生成微信公众号的格式7.1 编写CSS文件7.2 导出为HTML7.3 复制到微信公众号后台7.4 文件下载地址
如何开启公众号写作新思路 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中输入将截图（图片）保存到本地文件夹->将本地文件插入到文档中安装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 FilesPicGoPicGo.exe
‘C:Program’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���`
如下图所示
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 FilesPicGoPicGo.exe 'C:Program' �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ���
如果出现以下错误，请点击PicGo的PicGo设置->设置Server，按照下图进行设置。
建议在PicGo设置不打开选项上传前重命名和时间戳重命名这两个选项，这样就不会出现图片重复上传的问题了。 7. Typora撰写的Blog生成微信公众号的格式 7.1 编写CSS文件Typora已经内置了多种主题的文件供大家排版用，最常用的就是Github主题，为了能够导出符合微信公众号的格式，我们需要自己编写CSS文件，符合我们需要的格式。如果你没有兴趣编写自己的CSS文件，那么你可以下载我的文件主题直接使用。将你的CSS文件复制到如下位置：C:Users你的电脑名AppDataRoamingTyporathemes。或者通过文件->偏好设置->外观->打开主题文件夹找到你的文件夹位置。
例如对标题，图片等内容格式的修改：
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;}我们可以在Typora主题->Wechat直接看到效果如下图所示，也可以导出HTML后看到结果。你在下图看到的效果和微信公众号看到的效果是一样的。
当然你也可以根据需求在CSS文件中修改自己常用微信公众号排版格式。
7.2 导出为HTML单击文件->导出->HTML，导出HTML文件的格式。
7.3 复制到微信公众号后台打开HTML，复制网页上的所有内容，直接粘贴到微信公众号编辑框里即可。然后在稍微修改内容即可。
因为微信会对照片和Gif图片有大小的限制，会出现上传不成功的现象，但是只需要少量修改即可。我一般把2级标题和3级标题作为公众号内的常用标题。 7.4 文件下载地址 阅读原文下载文件；关注公众号“优雅的芝麻产品成长之路”，回复“软件”获取下载。