基于BlogHelper一文多发的图片排版优化方式

基于BlogHelper一文多发的图片排版优化方式

---

前言：本文初编辑于2024年1月30日

CSDN：https://blog.csdn.net/rvdgdsva

博客园：https://www.cnblogs.com/hassle

---

总结：

我这些天捣鼓出了一种不需要图源且统一图片排版的一文多发方式

还是图源方便，但是这个也可以凑合着用

配合**BlogHelper使用的自制小工具：Markdown-to-Html**

---

问题：

大多数正规且不容易跑路的图床公司，通过以为客户提供下行流量的方式来维持收支。不过对于用户而言，要是之后没有写博客的习惯了，还是需要继续缴纳费用来支持过去写的博文提供观看。

那么此时我们注意到，各个网站，比如CSDN、博客园、知乎等都具有上传图片的功能。

也许有一种方法，可以在本地攥写Markdown文章，调用本地的图片，然后将自己的MD文章上传到网站时，图片也一并上传，岂不美哉！

---

方法：

BlogHelper是一个帮助国内用户写作的托盘助手，一键发布本地文章到主流博客平台（知乎、简书、博客园、CSDN、SegmentFault、掘金、开源中国）的软件。我们可以在本地进行Markdown文章的攥写，并且配置自己的图床并调用其中的图片进行使用。

然后开始尝试：能否将本地攥写调用本地的图片的Markdown文件上传至各个网站。然后发现**BlogHelper**确实能够提供这样的功能，但是格式是不会自动排版好的，难道要每篇文章都调一下格式吗？

---

局限：

Markdown文件中

<div align='center'><img src='https://123.jpg' width='50%'></div>

格式的图片插入方式可以在上传至CSDN和博客园时自动进行图片的上传

但是MD文件中以HTML格式插入的图片是没有办法在文章上传的时候也把图片上传上去的

那么我们就在本地编写以Markdown格式进行本地图片插入的文章

再将文章上传到各个网站

然后会发现在CSDN上，如果使用CSDN的编辑器，默认的图片插入格式是这样的

<div align='center'><img src='https://123.jpeg#pic_center' width='50%'></div>

如果使用BlogHelper进行本地Markdown文章上传，默认的图片插入格式是这样的

<div align='center'><img src='https://123.jpeg' width='50%'></div>

在博客园上，不论在博客园上编辑还是上传至博客园，默认的图片插入格式是这样的

<div align='center'><img src='https://123.jpeg' width='50%'></div>

但是默认的图片插入格式是真的丑，因为markdown图片插入默认靠左（部分通过#pic_center居中）而且图片尺寸无法更改，如果需要修饰一下图片的话就需要使用html格式了

我在震惊！关于CSDN和博客园难以言说的秘密这篇文章中总结了CSDN和博客园的图片插入语法不兼容的表现，并且发现特定形式的Html插入的图片格式可以符合两个网站的要求

<div align='center'><img src='https://123.jpg' ></div>

但是麻烦啊，难道需要我一个一个手动改吗？

---

方法：

我在**Markdown-to-Html**仓库中实现了将使用Markdown语法进行图片插入的语句转换为使用Html进行图片插入的语句，同时填充了图片居中和图片尺寸缩放的操作，具体表现是这样的

好棒啊，这样就方便多了

---

操作：

1、在本地进行Markdown文件的编写，调用的是自己电脑本地的图片，而不是图源的图片。需要注意，这里Markdown中的图片插入格式能且只能是Markdown的格式，不能是Html的格式，否则会影响第2步

2、使用**BlogHelper**将自己的文章上传至要发的网站，同时文章中的图片也会被上传上去。需要注意，进行的是“存稿”而不是“发布”，否则影响第3步

3、不出意外的话，在每个平台的默认图片插入格式都是不一样的，而且图片不好好排版的话真的有点丑，所以需要把Markdown格式插入的图片语句转换为Html格式插入的图片语句。把草稿copy一下变成一个txt文档，拖动到**Markdown-to-Html**仓库实现的exe文件上，会生成另一个txt文档，把这个文章的内容copy一下粘贴到平台的草稿上。如果还需要调整一下图片的话就自己操作一下。

4、发布文章，结束