关于Markdown引用图片地址的尝试

lightsmile

计算机

字数：1.4k字

时长：5分钟

发布于：2017年12月24日

前两天某刻突然想到学习不能只有输入，更应该有输出，有时历程和心得更需要记录下来，于是就萌发起了写博客的念头，如今写博客的平台很多，比如博客园、CSDN、简书、新浪博客，甚至知乎等等，也可以通过GitHub pages来实现，甚至于购买云服务器搭建自己的博客网站。
由于个人知识浅薄，并且想要拥有更高的自由度，以及一些其他因素限制，最终选择了通过GitHub pages+hexo来搭建自己的个人博客站点，借助于网上丰富详致的相关搭建博客教程终于把自己的小窝搭建起来了，吼吼！

随后学习一些Markdown的语法发现这个图片的链接还真是一个问题，网上搜索的结果主要是通过七牛云啥的云图网站来实现的，然而一方面可能有数据量的限制，另外还要注册一些信息啥的，好屌麻烦，于是就想能不能直接通过GitHub仓库来实现呢？
经过简单的分析之后，发现这个是可以实现的：

首先在GitHub上新建自己的图片仓库，以后的图片都可以放到这个里面。

我的图片仓库

随后可以把仓库克隆到本地计算机文件系统中，需要添加图片时，可以通过创建相关文件夹，然后在里面放入需要链接的图片。

本地图片仓库

通过Git命令实现仓库的提交。

git add .
git commit -m "change the images"
git push

通过对应GitHub上图片资源绝对地址的引用实现自己Markdown文章图片的引用工作。

引用图片

在实际应用中，以上第1步只需要做一次，而每次需要在Markdown文章引用图片时，都需要做第4步，同时视是否需要引入新的图片可能也需要2、3步的工作。

在具体实现的过程中，发现第3步和第四步存在着一些问题和待优化之处。
如第3步的提交过程中，可以通过浏览器的GitHub仓库页面实现添加，也可以通过本地的Git命令调用，本地的Git命令调用也可分为图形式的命令调用和shell下的命令句调用，以上无论哪种操作，都比较繁琐，这是绝对不行的。

由于通过Git命令的操作主要就是:

git add .
git commit -m "change the images"
git push

这三步，所以很容易可以想到通过编写批处理文件来完成这样重复的工作。

所以我们可以创建一个名字为auto.bat的文件放到本地仓库的根目录下，里面的内容就是：

git add .
git commit -m "change the images"
git push

经过测试发现，如果能把命令行的显示尽量隐藏掉就好了，于是可以在开头加上一个@echo off关闭命令的回显，然而毕竟Git提交是将本地数据提交到远端，需要有一个过程，同时也应该有一个结果提示，所以基本上不可避免的还是会弹出显示上传结果的shell界面，如：

提交结果

然而，其工作一旦完成，便自动退出，也算可以接受的吧。

以后把要上传的图片放进该文件夹下，然后双击auto.bat文件就可以啦！

而在第4步下，发现直接通过右键获取图片链接地址，得到的并不是图片的绝对链接地址，不是很准确，直接拿来引用的话不行，我们还需要对路径进行进一步的处理才可以。

如：

这张图片，如果直接复制的话，我们将得到的路径为:https://github.com/smilelight/images/blob/master/lightsmile.png(通过右击链接)或者https://github.com/smilelight/images/blob/master/lightsmile.png?raw=true(通过右击图片)，而其实际路径可以为：https://github.com/smilelight/images/raw/master/lightsmile.png或者https://raw.githubusercontent.com/smilelight/images/master/lightsmile.png或者https://github.com/smilelight/images/blob/master/lightsmile.png?raw=true。因此我们具体要做的工作也很简单，就是原本得到的路径转化为有效的绝对路径，我这里采取的策略是将其转化为第一种有效路径，即如果路径带有?raw=true，我就把它去掉，然后通过字符串替换，将blob替换为raw。工作是知道怎么做，可是到底怎么具体实现呢？写一个桌面小程序？之前查看知乎上有人就自己写了插件，我想我也可以试一试啊！说做就做，于是就上网寻找关于编写chormium拓展插件的博客教程和视频资源，经过一系列的尝试和探索之后，终于完成了功能简洁、有时还会报错的小插件。。。