此图片来自微信公众平台,未经允许不可引用

一直以来,我都是用 Markdown 语法写作,写完后先发表到微信公众号里,然后同步到我的个人博客 hxz.ink(这可作为微信公众号的一个备份,防止公众号被封后文章无可访问的尴尬)。

博客用 hexo 部署,每次需要发表文章时,先用 hexo g 命令渲染成 html 再用 hexo d 命令一键部署,两个命令搞定,真的不要太 easy~

但,便捷之余还是有一点小疙瘩,困扰我许久:Markdown 文章里插入图片的用户体验。

繁琐+闹心

这个问题,且让我细说如下:

Mardown 中显示图片的语法为:

1
![some_info](pic_address)

其中,pic_address 是必须的,它支持本地路径和网络 url,比如:

1
2
3
4
5
![](test.jpg)  //相对路径

![](/Users/hxz/Desktop/screenshot.png) //绝对路径

![](some_picture_url) //网络地址

假设你要往文章里插入一张图片,这分为两种不同情况:

本地图片

你需要先自己准备好素材,然后用相对或绝对路径引用它。但,这图片目前只能你的电脑里显示,为了保证你发布文章后,别人也能看到这张图片,你还需要手动地 one by one 地把图片上传到微信公众号后台,然后拷贝该图片地址,再粘贴到 ![]() 后面的那个括号里。

网络图片

大多数情况下都能正常显示,但是,微信公众平台的图片链接有防盗链功能,只有在公众平台才可显示,如果是外网去加载公众号图片,偶尔能正常加载,但大多数时候只显示那个恶心的*灰色水印:“此图片来自微信公众平台未经允许不可引用”。

比如,在公众平台浏览我之前写的《小李子拿影帝和长者有什么关系?》,它是这样的:

但,在我的 个人博客 上面,图片显示却是这样:

问题来了:

  • 本地图片要 one by one 地上传,繁琐
  • 网络图片又时不时遭遇防盗链水印,闹心

这两个问题恶心了我有段时间了。

造轮子

我希望实现:

写作过程中,图片可以随意引用,不管是来源于本地还是网络,文章发布后,保证每张图片都能在微信公众号和博客里正常显示。

网上找了找,都没有能满足我需求的解决方案,还是决定自己造个轮子吧。

我不想自己维护博客中的图片资源,专业的活交给专业的机构去办,维护图片资源这等琐事,就让七牛云存储来干吧,我只需专注于博客内容本身。

为什么是 七牛云存储?因为人家免费稳定还速度快啊,用它做图床管理博客中的图片资源还是比较靠谱的。

在七牛云存储上创建个内容空间,注册个 API-KEY,利用七牛开放的 API 接口,很容易就实现出来了。

这个轮子其实造起来很容易,简单的几十行 Python 代码搞定,第一个简陋版本,我已经开源到 GitHub 上了:

https://github.com/hxzqlh/qiniu-markdown-pics.git

目前只实现了主要功能,有些细节还没有考虑周全,不过勉勉强强能用了,测试了下,效果还不错。

1
2
3
4
5
6
7
8
9
Allen@MacBook-Pro:~ $ ./qn.py /Users/Allen/Desktop/test.md
origin markdown file backup in: /Users/Allen/Desktop/test.md.bak
process: /Users/Allen/Downloads/test.jpg
process: http://mmbiz.qpic.cn/mmbiz/yjWTowicdvibD5H6jmklGnwZicztwfR8vbb2rF0dic5tAmv58c8O5iaLhKesSfGpKVTIicGA5iaiaFKAS8n4cNWUicB4aUw/640?wx_fmt=png&tp=webp&wxfrom=5
Complete!
total :2
success :2
failure :0
ignore :0

简单来说,它只专心干一件事:

自动检测 Markdown 文件中所有的图片链接,将原始图片上传到七牛云存储并修改图片源。

对于那些用 hexo 来部署个人博客,希望便捷地往博客中插入图片且纠结于图片防盗链的人来说,这个工具还是挺实用的。

这样,发布文章到微信公众号和博客时,图片都改从七牛云存储读取,博客里面引用的是七牛的公开链接,没有加其他防盗链处理,任何网站都可直接引用,这样图片都能正常显示了。

至于公众平台,它从七牛云存储加载图片后依然会加上防盗水印并存放于公众平台自身的图片服务器 http://mmbiz.qpic.cn/上,最后读者浏览文章时,也是从该服务器读取图片,这就是为什么微信公众平台文章里的图片会有防盗链的原因。

比如,前几天发表的那篇《你女朋友撤回了一条消息还亲了你一口》中最后一张图片的地址为:

1
http://mmbiz.qpic.cn/mmbiz/yjWTowicdvibD5H6jmklGnwZicztwfR8vbboP6538TL637q1eCwegjxrjtfzUic0Yeb81xib4k4SBbLickdGH7P2UQ7w/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1

但,那又如何?我已绕过了你的马其诺防线,曲线救国,你再怎么牛逼,对我而言,也是浮云了。

这下好了,写完文章后,一行命令搞定图片等那些事儿:

1
./qn.py markdown_file
彦祖老师 wechat