文章目录

如何开启公众号写作新思路
- 1. 本文概述
- - 1.1 适用人群
  - 1.2 阅读完本文你可以获得什么
  - 1.3 你需要什么
  - 1.4 原理
- 2. 安装npm
- 3. 注册码云Gitee
- - 3.1 新建仓库
  - 3.2 创建私人令牌
- 4. 安装PicGo
- - 4.1 为什么安装PicGo
  - 4.2 如何安装picGo
- 5. 设置Gitee为PicGo的图床
- - 5.1 安装Gitee插件为PicGo的图床
  - 5.2 配置PicGo可以访问Gitee的图床
  - 5.3 如何上传和管理图片
- 6. 使用Typora+picGo体验快捷写博客
- - 6.1 设置Typora
  - 6.2 错误解决
- 7. Typora撰写的Blog生成微信公众号的格式
- - 7.1 编写CSS文件
  - 7.2 导出为HTML
  - 7.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 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;
}

我们可以在Typora主题->Wechat直接看到效果如下图所示，也可以导出HTML后看到结果。你在下图看到的效果和微信公众号看到的效果是一样的。

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

7.2 导出为HTML

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

7.3 复制到微信公众号后台

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

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

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

7.4 文件下载地址

阅读原文下载文件；
关注公众号“Kris产品成长之路”，回复“软件”获取下载。

用Typora+PicGo搞定多个平台发文和微信公众号排版相关推荐

避免资源放在收藏夹里面吃灰的方法（如从typora上直接能导出html并且无缝连接到微信公众号的神奇网站）
就是写一篇csdn的博客用你自己的话来给别人介绍这个资源这样你自己就知道怎么用这个资源了以后你就可以找到这个资源创造价值! 我来做个例子 http://md.aclickall.com/ 这 ...
公众号自动回复不生效php,php,微信公众平台开发者_微信公众号开发者自动回复设置没反应，php,微信公众平台开发者 - phpStudy...
微信公众号开发者自动回复设置没反应在新浪sea平台设置了微信公众号应用,设置关注自动回复功能,接口设置成功,,代码写好,url也修改代码的页面,但是测试后没反应. //define your tok ...
微信公众平台接口调试工具json格式不对怎么搞_一步步教你打造微信公众号文章爬虫(3)-批量下载...
本文为本专题第3篇,如果你基础不错的话只看这一篇的讲解及源代码应该就能轻松实现批量下载所有文章了,基础稍差的可以先看一下前两篇,只要你有点基础,有点耐心,八成朋友都至少能照葫芦画瓢实现批量下载文章的功 ...
微信公众平台编辑器教程-微信公众号使用教程32
用微信公众号后台写文章, 进行排版时, 会发现一个尴尬的问题: 我们想要让文章的样式丰富些, 而微信编辑器提供给我们的样式功能却非常少. 但是你又发现有些公众号的文章排版却很漂亮, 有动态图片, 彩色 ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
平台化思维——微信公众号研究
前言很多年前读过一本书<重构-改善既有的代码>,里面有一个能快速提升编程水平的方式就是,代码中需要尽量减少重复的部分,1000行代码可以优化为800行,800行可以优化到500行,方法就 ...
微信公众平台开发[3] —— 微信公众号支付功能(PHP)
直言无讳,我就是一个初涉微信开发的小白,写这篇博客的原因:一是为了给自己做下备忘记录,以便以后能回忆这条程序猿的坎坷路:二是希望能帮助到同是自学开发的小白们:三是对那些不屑一顾于我等尘埃的大牛们的控诉 ...
微信开放平台（第三方平台）代替微信公众号发送模板消息（基于lavarel框架开发，EasyWeChat）
1.公众号必须得把模板消息授权到第三方平台. 2.我用的是 EasyWeChat 3.通过接口修改账号所属行业 (实质上就是开通模板消息) //修改账号所属行业public function set_ ...
微信公众平台服务器反馈,微信公众号开发之大坑
问题:'ascii' codec can't encode characters in position 0-25: ordinal not in range(128) 解决:import sys r ...

用Typora+PicGo搞定多个平台发文和微信公众号排版