如何优雅的多平台发布文章?
本文使用全程使用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:
写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 的编辑器里,然后编辑器会生成预览。复制预览的内容,粘贴到微信公众号编辑器里,当然我觉得没有上面的方法好看,但排版还是很不错的!
教程到这了就结束了, 我觉得这样还算是比较优雅.
但还有个致命的问题, 我们的图床万一坏了, 服务器跑路了. 我们的图片都会瘫痪, 这时候我们就要做备份, 而这就是下一章的内容了。。。。。。
谢谢大佬分享的方法,我现在写文章就用这个方法,真的太方便了,再也不用鼠标点点点了