本文最后更新于 302 天前，如有失效请评论区留言。

如何优雅的多平台发布文章？

本文使用全程使用Markdown进行编写

由于有把文章同步到多平台的想法，所以折腾起了同步的方法，看到网上有浏览器同步多平台的插件 Wechatsync，试用了一下效果并不理想，排版有很大问题，微信公众号会出现同步失败的情况，有的平台图片上传不上去。

所以我们就要从文章上下手，既然他同步过去格式有错误，我们就使用一种多平台支持且方便转换的语言来写，所以在经过查找后，我决定使用一种叫Markdown的标记语言。

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。GitHub大家都用过吧，他的README文件就是用Markdown语言编写的

初步使用Markdown

Markdown既然是一种语言，那么我们肯定要找一件趁手的兵器来编写他,我觉得比较好用的Markdown编辑器有Typora VScode marktext

我选择了VScode，一是因为电脑上正好有，装两个插件就能达到不错的效果。二是Typora已经收费，听说字数越多越卡？

下载VScode

访问 VScode 官网，直接下载，下载完成后安装即可。

进入VScode，此时是英文界面，按 Ctrl+Shift+X 会弹出安装扩展的界面，我们先安装中文搜索插件 Chinese (Simplified) 安装即可。

重启VScode后，可以看到界面已经变成中文。接下来我们安装Markdown的几个扩展插件。

Markdown ALll in One 这是一款Markdown组合包，一股脑把最常用的Markdown优化都给你装好。

Markdown Preview Github Styling Github风格的预览。

Markdown Emoji Emoji表情。:smile: :sob: :joy:

Emoji表情包

写Markdown

由于Markdown的语法符号都是英文状态的符号, 所以推荐你进入设置打开中文输入时使用英文标点,这样可以获得最好的使用体验!

创建一个扩展名为 md 的文件，用VScode打开它。

这时你已经可以开始写了，你可以百度Markdown语法，相信你10分钟就能掌握日常生活90%的语法。

Ctrl+Shift+V 可以预览你写的东西，把预览窗口的标签页拖到右边你就可以边写作边预览了。

假设你已经学习完了，但你有没有发现写到这还没有一张配图？

Markdown中图片的格式是感叹号+中括号+小括号，中括号里面是描述，小括号里面是图片的URL，这时我们就要借助图床服务，把我们的图片上传上去，之后他会给我们一串链接，这就是我们要用的。有的图床还会给我们提供Markdown代码，我们只需粘贴它即可使用。

搭建图床服务

你可以选择现有的图床服务，百度就有一大堆，只需把图片上传即可。但我不怎么喜欢东西放在别人那里，所以我选择了自建 chevereto 图床服务。

首先我们下载chevereto1.6.2版本，因为chevereto在1.6.2版本去除了多语言支持，所以我们这次不用官方库。改用 chevereto-free-multi-language 这个库:

撤消“删除多语言支持”
撤消“删除审核”
撤消“删除批量内容导入”

搭建环境

Centos7.9
php7.4
MySQL5.7

首先还是请出我们的老朋友，宝塔面板，新建站点, 删除站点根目录下的所有文件, 把你刚才下载的代码解压到网站根目录下。(若不删除,会直接访问宝塔默认新建的 index.html 文件,不能进入安装界面)

接下来ssh赋予文件夹权限，ssh进入服务器，cd到网站根目录，可以看到 app/ content/ images/ 三个文件夹，依次输入下面命令。

chmod -R 777 app/
chmod -R 777 content/
chmod -R 777 images/

此时，访问你的网站，会出现404错误，接下来我么要修改配置文件。

进入到宝塔面板>网站>设置>配置文件，添加以下代码。

    #REWRITE-END

    location / {
         if (-f $request_filename/index.html){ rewrite (.*) $1/index.html break; } if (-f $request_filename/index.php){ rewrite (.*) $1/index.php; } if (!-f $request_filename){ rewrite (.*) /index.php; } try_files $uri $uri/ /api.php; } location /admin { try_files $uri /admin/index.php?$args;
     }

    #禁止访问的文件或目录

注意看，实际代码添加到配置文件39行处，代码第一行和最后一行不用复制，这里粘出来是为了方便给你们定位。

若您还是有疑问，请查看 Chevereto安装教程这篇博客，里面详细的说明了代码应该如何添加。(这篇博客代码添加在了25行处)

当上面的步骤配置完后，你可以再次尝试访问，若网页正常（提示连接数据库），说明你配置成功了，若还是显示404，请检查并重新配置或添加伪静态。

这时候你就可以去宝塔后台创建一个数据库了，然后去网页中安装即可。这里和Wordpress的安装方式大同小异，无非就是输入数据库名字，用户名，密码，就不多赘述了。相信您都来自建图床并发布文章，连接个数据库肯定不在话下。:stuck_out_tongue_winking_eye:

配置图床

首先我们先设置中文,先登录你的控制台,可以看到界面为英文.
例如我安装的域名为 picture.renetxi.com 那就访问 https://picture.renetxi.com/dashboard/settings/languages (把域名替换为你自己的),设置语言,可以借助谷歌翻译,把默认语言设置为简体中文,启用语言选择器,设置为简体中文,保存刷新即可。可能会出现还是英文的情况，自行百度 Chevereto 汉化教程即可，我这里没有遇到。

相关设置还是很简单易懂的,自己摸索摸索就能很流畅的使用了.

现在我们就来上传一张图片,像图床里拖入一张图片上传,点击嵌入代码,可以看到Markdown嵌入链接,复制它,粘贴到你的文章中试试看.

可以看到,我们上传成功了.但有没有发现,我们想要在文章里插入图片还要上传到图床里,在复制Mardown嵌入链接.属实有点麻烦.有没有一种优雅的方法,例如截图后自动上传图床,自动复制Markdown嵌入链接到剪切板中?

答案是有的,我们为了博客加载速度最大化,通常使用webp格式的图片.

webP是由谷歌推出的一种全新图片文件格式，与JPEG格式一样，WebP是一种有损压缩格式。不同的是，WebP格式的压缩效率更为出色，在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。目前互联网的流量中有65%为图片，这意味如果Google让WebP格式得到普及的话，浏览网页的速度将大幅提升。

若您只在您自己的自建博客上发表文章，那么推荐你使用 webp 格式的图片。

但如果您想要在博客和国内平台都发文章的话，下一节关于 webp 的内容选着做,不做的我会标注出来。

截图配置

webp格式转换教程开始（多平台写作用户跳过）

由于Chevereto不支持转换上传图片为Webp格式,所以我们要借助工具本地转换,今天我们要用到的是 ShareX 这款工具,这款工具的功能非常强大,虽说上手难度有点高(比Markdown稍微难一些),但是一旦熟练掌握他会成为你离不开的一款工具.

下载它之后我们想要自动转换截图文件为webp格式还需要个小插件. 访问imagemagick的官网,更具你的操作系统下载对应版本,我下载的是 ImageMagick-7.1.0-57-Q16-x64-dll.exe 下载完成后安装即可. 安装完成后打开安装目录
找到 magick.exe 文件,那么把你的安装目录和这个软件拼在一起就是 替换你的安装目录\magick.exe

首先我们配置它让他支持webp格式.

按照下面两张图进行设置,设置完记得勾上对勾.

你可以对各个选项进行调整,参数:

名称: 随便起
文件路径: 与上面你拼起来的安装目录一致
参数: quality 后面数字越大越清晰,这里给出两个参数,对照上图输入. "$input" -quality 50 -define WebP:lossless=true "$output" "$input" -quality 50 "$output"
输出文件的扩展名: 你要转换为的格式
扩展名过滤: 字面意思
隐藏窗口(必勾): 不然会一闪一闪地
删除输入文件: 是否删除你的源文件 (若您不使用微信公众号,这个可以勾选)

webp格式转换教程结束

推荐把截图到的源文件格式设置为png

这里我还设置了多区域截图模式,你可以根据自己的喜好进行研究调整, 一般半个小时即可上手.

现在我们设置截图后自动上传图床的操作.

我们先到图床的控制台

打开API选项,复制这串 API v1 密钥,图中已打马.

回到 ShareX 打开下面这个设置

替换你自己的域名即可. (注意后面的/api/1/upload不变)

这时候就设置好了, 但截完图他还不会执行我们的程序. 我们还需进行以下设置, 先回到主界面。

多平台用户不用勾选【执行操作（实际就是转换webp的操作）】

这里这样设置是先打开图像编辑器方便修改图像(修改完成后可能会弹出画图程序,关闭即可),然后执行转换webp的操作,转换完成后上传图床 .然后再进行下面的设置: 把上传目标修改为你的图床

然后进行最后一步: 上传完成后复制url

现在,你可以去设置中查看截图的快捷键记忆一下, 现在截一张图, 修改完图片点击绿色对勾确认后会自动执行上面的操作, 现在你什么也不用管, 回到的 Markdown 编辑器, 你只需输入Markdown插入图片的语法中括号的描述随便写, 小括号直接 Ctrl + V 粘贴,你的图片就会出现在你的Markdown编辑器中.

虽然说现在还有些麻烦, 不能直接粘贴 Markdown 格式的嵌入代码, 但我觉得能够接受, 你可以试试其他的方法来获取更好的体验.

文章上传之前的必要工作

例如本人发布文章的平台有 WordPress Typecho 知乎微信公众号

(这里推广一波: 搜索微信公众号 Biuioi Blog 关注即可第一时间获取文章 :satisfied: )

Typecho 原生支持 Markdown 语法和 webp 图像, 知乎支持 Markdown 语法却不支持 webp 图像（经我测试不支持，而且国内很多平台都不支持！） WorePress 不支持 Markdown 语法，支持 webp 图像。现在我们要解决这些问题。

WordPress上传

图片格式无所谓

搜索 WP Githuber MD 插件安装即可使 WordPress 支持 Markdown 语法.

整篇复制到 WordPress 编辑器即可!

微信公众号和知乎等国内平台的上传 (推荐先看一遍在做 :satisfied: )

图片格式确保为 png 或 jpg
首先是知乎 csdn 等国内平台

还记得我之前说过，多平台写作用户不推荐使用转换为 webp 格式的图片，因为它们根本不支持！

当你使用 webp 格式的图像时，上面两个平台无一例外全部失败，不能上传。所以我们要用jpg或png格式的图片，这两平台都支持 Markdown 语法，根据提示操作即可，应该就这一点要注意的吧。

微信公众号平台上传
图片格式确保为 png 或 jpg

由于微信公众号既不支持 webp 格式，也不支持 Markdown 语法，更要命的是还不支持外链获取图片。所以我们要解决的事情第一是排版，第二是图片上传的问题，而这一切都要比较优雅。

这里我借助 wxmp 这个 GitHub 仓库为大家搭建了一款微信公众号 Markdown 排版编辑器供大家使用. 搭建过程很简单, 这里就不在讲了, 想搭建的可以去他们的 GitHub 页面看一看.

您有以下方式使用:

(点我进入)

我的博客的实验室选项中进入

微信公众号进入 ( 公众号搜索 Biuioi Blog )

我们现在进入网址,把你写的 Markdown 粘贴到左侧 ( 开源项目, 我们不会保存任何数据 )

可以看到, 效果还是非常不错的，这时，我们完成了文章的排版工作。

你可在上面的工具栏进行微调, 调整完成后点击右上角的复制按钮或全选复制整篇文章即可!

现在，新建一个 word 文件，我们将采用导入文章的方法来实现微信公众号图片的上传。

把你刚才复制的排版好的文章粘贴进来，图片可能有大有小，不用在意，直接保存。

打开微信公众号写作平台，右上角头像旁边的 文档导入 导入你刚才保存的word即可！

还有一种方法，就是先粘贴到 CSDN 的编辑器里，然后编辑器会生成预览。复制预览的内容，粘贴到微信公众号编辑器里，当然我觉得没有上面的方法好看，但排版还是很不错的！

教程到这了就结束了, 我觉得这样还算是比较优雅.

但还有个致命的问题, 我们的图床万一坏了, 服务器跑路了. 我们的图片都会瘫痪, 这时候我们就要做备份, 而这就是下一章的内容了。。。。。。

如何优雅的多平台发布文章？