讓 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

格式完了之後就可以點選放大圖片了。