如何开启公众号写作新思路

1. 本文概述

1.1 适用人群

1. 尝试使用Markdown语言作为编写文档的同学

2. 在多个平台发布同一文章的同学

3. 使用微信公众号排版时希望可以节约排版时间的同学

4. 苦各个平台写作时插入图片操作流程太长的同学

1.2 阅读完本文你可以获得什么

1. 不再为文章中插入图片而烦恼，统一管理你的图片；

2. 同一文章不同平台（知乎，微信公众号，人人都是PM，产品壹佰，PmCaff）快速发布，文章风格统一；

3. 实现微信公众号文章排版简洁化，统一化，不再繁琐的导入本地图片，添加图片；

4. 定制属于自己的排版风格，节约你的时间。

1.3 你需要什么

• 软件包或者账号

1. Typora安装包

2. PicGo安装包

3. node.js安装包

4. Gitee(码云)账号（或者其他做图床的平台，例如Github或者七牛云等）

• 代码知识

1. 基本不需要任何代码知识，如果你对微信排版样式的要求比较高，可以自学一些CSS知识（或者下载写好的CSS文件，自己修改格式即可），定制属于自己的格式

2. Markdown语言，基本每个人都可以在半个小时内学会，大家可以用某度搜索关键词Markdown看一些相关教程，半个小时搞定。

1.4 原理

1. PicGo将图片上传到你的gitee仓库，然后返回给你图片的具体地址，这样你用该地址便可以访问到位于仓库的图片了。

2. 获取到你的图片地址后，利用软件为你复制好的Marddown格式，复制粘贴到文本中

3. 利用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。

image

image

3.2 创建私人令牌

创建完成后，记住你的仓库名，然后创建你的私人令牌。私人令牌是用来允许PicGo访问并更新你的仓库的。创建Gitee私人令牌步骤如下：

setting->Security Settings ->Personal access tokens-> Generate new token -> 填写 Token description -> Select Scopes-> user_info projects -> 提交commit ->复制你的Token号

注意你需要保存该token，因为该token只会出现一次，离开页面过后再不会出现。

image

image

image

4. 安装PicGo

4.1 为什么安装PicGo

现有插入图片的流程：

1. 将截图（图片）保存到本地文件夹->将图片文件上传到网络服务器中->复制图片的网络地址->在markdown中输入[图片上传失败...(image-627ec6-1583759881010)]

2. 将截图（图片）保存到本地文件夹->将本地文件插入到文档中

安装picGo后，利用picGo插入图片的流程：

1. 将本地截图（图片）插入到文档中->自动上传图片到网络地址

2. 将网络的（图片）上传到图床->复制格式化的信息插入图片

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' �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ���`

如下图所示

image

5. 设置Gitee为PicGo的图床

5.1 安装Gitee插件为PicGo的图床

运行PicGo,单击插件设置，在搜索中输入Github，安装搜索结果中的github-plus，如下图所示。设置完成后可以在图床设置中看到Github plus这一选项,即安装成功。

image

5.2 配置PicGo可以访问Gitee的图床

点击图床设置->GitHubPlus,在设置中填入你新建的仓库名repo和 token，并选择origin为gitee，点击确定完成设置。其中repo要填入你gitee的用户名/新建的仓库名，例如，仓库地址为https://gitee.com/guohaoxin/TestForPIcGo，则repo填入的内容为guohaoxin/TestForPIcGo。

image

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左上角的文件->偏好设置

• 在弹出的页面中点击图像，选择插入图片时选项为'上传图片'，并勾选所有选项

image

• 选择上传服务为PicGo(app)，点击验证图片上传选项，如果出现如下图所示界面，说明配置已成功，然后你就可以直接在Typora中插入图片了，Typora会自动上传并替换图片地址为网络地址。

image-20200309132124003

6.2 错误解决

• 如果出现以下错误，请参考安装PicGo

  failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe 'C:\Program' �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ���

• 如果出现以下错误，请点击PicGo的PicGo设置->设置Server，按照下图进行设置。

image

• 建议在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后看到结果。你在下图看到的效果和微信公众号看到的效果是一样的。

image-20200309140350200

当然你也可以根据需求在CSS文件中修改自己常用微信公众号排版格式。

7.2 导出为HTML

单击文件->导出->HTML，导出HTML文件的格式。

7.3 复制到微信公众号后台

打开HTML，复制网页上的所有内容，直接粘贴到微信公众号编辑框里即可。然后在稍微修改内容即可。

1. 因为微信会对照片和Gif图片有大小的限制，会出现上传不成功的现象，但是只需要少量修改即可。

2. 我一般把2级标题和3级标题作为公众号内的常用标题。

7.4 文件下载地址

1. 点击阅读原文，百度云下载文件；

2. 关注公众号，回复“软件”获取下载。