介紹
VuePress 由兩部分組成:一個以 Vue 驅動的主題系統的簡約靜態網站生成工具,和一個爲編寫技術文檔而優化的默認主題。它是爲了支持 Vue 子項目的文檔需求而創建的。
由 VuePress 生成的每個頁面,都具有相應的預渲染靜態 HTML,它們能提供出色的加載性能,並且對 SEO 友好。然而,頁面加載之後,Vue 就會將這些靜態內容,接管爲完整的單頁面應用程序(SPA)。當用戶在瀏覽站點時,可以按需加載其他頁面。
前兩天接觸到了 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" rel="external nofollow" >![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 |
格式完了之後就可以點擊放大圖片了。
總結
以上所述是小編給大家介紹的Vue press 支持圖片放大功能的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對碼農之家網站的支持!