让 Vuepress 支持图片放大功能

前两天接触到了 Vuepress，颜值很高，界面简洁，容易上手。因而打算把博客从 hexo 迁移过去。

可是发现图片是不能点击的。Markdown 在渲染的时候连 a 标签都没有添加，不只不能直接点，也不能放大。然而个人博客中是有不少大图的，因此这个功能是刚需。

我试了下最新版本 1.x alpha 仍是没有这个功能。因此直接本身动手了。

因为我并不熟悉 vue，因此从源代码上改比较困难。

最后我使用了 fancybox 库，并开发了一个辅助 VSCode 插件。

引入 fancybox

.vuepress/config.js 文件的 head 标签中能够直接添加 fancybox 的 cdn，因为它依赖 jquery，因此还要引入 jquery。

module.exports = {
    head: [
        // add jquert and fancybox
        ['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js' }],
        ['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js' }],
        ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css' }]
    ],
    themeConfig: {
        // your config
    }
}

而后修改图片的 markdown

![xx](sss)

将上面的这种格式修改成下面这种，手动添加 a 标签、data-fancybox 和 href 属性便可。

<a data-fancybox title="xx" href="sss">![xx](sss)</a>

可是这样手动添加太麻烦了，而且想取消掉也不方便。

因此我写了一个 VSCode 插件，来批量格式化。

使用插件格式化

VScode 商店搜索 vuepress-img-format 安装便可。

调用命令 img format 能够格式化当前文档的全部图片，img reset format 能够重置格式化，效果以下：

固然也可使用内置的快捷键：

快捷键	格式化	重置格式化
Windows/Linux	Ctrl + Shift +8	Ctrl + Shift + 8
Mac	Cmd + Shift + 8	Cmd + Shift + 9

格式完了以后就能够点击放大图片了。