Vue press 支持圖片放大功能的實(shí)例代碼

介紹

VuePress 由兩部分組成：一個(gè)以 Vue 驅(qū)動(dòng)的主題系統(tǒng)的簡(jiǎn)約靜態(tài)網(wǎng)站生成工具，和一個(gè)為編寫(xiě)技術(shù)文檔而優(yōu)化的默認(rèn)主題。它是為了支持 Vue 子項(xiàng)目的文檔需求而創(chuàng)建的。

由 VuePress 生成的每個(gè)頁(yè)面，都具有相應(yīng)的預(yù)渲染靜態(tài) HTML，它們能提供出色的加載性能，并且對(duì) SEO 友好。然而，頁(yè)面加載之后，Vue 就會(huì)將這些靜態(tài)內(nèi)容，接管為完整的單頁(yè)面應(yīng)用程序(SPA)。當(dāng)用戶在瀏覽站點(diǎn)時(shí)，可以按需加載其他頁(yè)面。

前兩天接觸到了 Vuepress ，顏值很高，界面簡(jiǎn)潔，容易上手。于是打算把博客從 hexo 遷移過(guò)去。

但是發(fā)現(xiàn)圖片是不能點(diǎn)擊的。 Markdown 在渲染的時(shí)候連 a 標(biāo)簽都沒(méi)有添加，不僅不能直接點(diǎn)，也不能放大。然而我的博客中是有很多大圖的，所以這個(gè)功能是剛需。

我試了下最新版本 1.x alpha 還是沒(méi)有這個(gè)功能。所以直接自己動(dòng)手了。

由于我并不熟悉 vue ，所以從源代碼上改比較困難。

最后我使用了 fancybox 庫(kù)，并開(kāi)發(fā)了一個(gè)輔助 VSCode 插件。

引入 fancybox

.vuepress/config.js 文件的 head 標(biāo)簽中可以直接添加 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)

將上面的這種格式修改為下面這種，手動(dòng)添加 a 標(biāo)簽、 data-fancybox 和 href 屬性即可。

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

但是這樣手動(dòng)添加太麻煩了，并且想取消掉也不方便。

所以我寫(xiě)了一個(gè) VSCode 插件，來(lái)批量格式化。

VScode 商店搜索 vuepress-img-format 安裝即可。

調(diào)用命令 img format 可以格式化當(dāng)前文檔的所有圖片，img reset format 可以重置格式化，效果如下：

當(dāng)然也可以使用內(nèi)置的快捷鍵：

格式完了之后就可以點(diǎn)擊放大圖片了。

總結(jié)

以上所述是小編給大家介紹的Vue press 支持圖片放大功能的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com