讓 Vuepress 支援圖片放大功能
摘要：
前兩天接觸到了Vuepress
，顏值很高，介面簡潔，容易上手。於是打算把部落格從hexo
遷移過去。
但是發現圖片是不能點選的。Markdown
在渲染的時候連a
標籤都沒有新增，不僅不能直接點，也不能放大。然而我的部落格中是有很多大圖的，所以這個...
前兩天接觸到了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
 複製程式碼
將上面的這種格式修改為下面這種，手動新增 a 標籤、data-fancybox
和href
屬性即可。
<a data-fancybox title="xx" href="sss"></a> 複製程式碼
但是這樣手動新增太麻煩了，並且想取消掉也不方便。
所以我寫了一個VSCode
外掛，來批量格式化。