前兩天接觸到了 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 |
格式完了之後就可以點擊放大圖片了。