Vue press 支持圖片放大功能的實例代碼
介紹
VuePress 由兩部分組成：一個以 Vue 驅(qū)動的主題系統(tǒng)的簡約靜態(tài)網(wǎng)站生成工具，和一個為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。它是為了支持 Vue 子項目的文檔需求而創(chuàng)建的。
由 VuePress 生成的每個頁面，都具有相應(yīng)的預(yù)渲染靜態(tài) HTML，它們能提供出色的加載性能，并且對 SEO 友好。然而，頁面加載之后，Vue 就會將這些靜態(tài)內(nèi)容，接管為完整的單頁面應(yīng)用程序(SPA)。當(dāng)用戶在瀏覽站點時，可以按需加載其他頁面。
前兩天接觸到了 Vuepress ，顏值很高，界面簡潔，容易上手。于是打算把博客從 hexo 遷移過去。
但是發(fā)現(xiàn)圖片是不能點擊的。 Markdown 在渲染的時候連 a 標(biāo)簽都沒有添加，不僅不能直接點，也不能放大。然而我的博客中是有很多大圖的，所以這個功能是剛需。
我試了下最新版本 1.x alpha 還是沒有這個功能。所以直接自己動手了。
由于我并不熟悉 vue ，所以從源代碼上改比較困難。
最后我使用了 fancybox 庫，并開發(fā)了一個輔助 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
將上面的這種格式修改為下面這種，手動添加 a 標(biāo)簽、 data-fancybox 和 href 屬性即可。
<a data-fancybox title="xx" href="sss" rel="external nofollow" ></a>
但是這樣手動添加太麻煩了，并且想取消掉也不方便。
所以我寫了一個 VSCode 插件，來批量格式化。
VScode 商店搜索 vuepress-img-format 安裝即可。
調(diào)用命令 img format 可以格式化當(dāng)前文檔的所有圖片，img reset format 可以重置格式化，效果如下：
當(dāng)然也可以使用內(nèi)置的快捷鍵：
| 快捷鍵 | 格式化 | 重置格式化 |
|---|---|---|
| Windows/Linux | Ctrl + Shift +8 | Ctrl + Shift + 8 |
| Mac | Cmd + Shift + 8 | Cmd + Shift + 9 |
格式完了之后就可以點擊放大圖片了。
總結(jié)
以上所述是小編給大家介紹的Vue press 支持圖片放大功能的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue?禁止重復(fù)點擊發(fā)送多次請求的實現(xiàn)
本文主要介紹了vue?禁止重復(fù)點擊發(fā)送多次請求的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
這篇文章主要為大家詳細(xì)介紹了如何基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-10-10
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
在網(wǎng)上各種找不到vue項目加入百度統(tǒng)計的代碼與實現(xiàn)，自己探索出了一套加入百度統(tǒng)計的辦法，下面這篇文章主要給大家介紹了關(guān)于單頁面vue引入百度統(tǒng)計的使用方法，需要的朋友可以參考下2018-10-10
Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
Ant Design Upload 文件上傳功能的實現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue中h5端打開app(判斷是安卓還是蘋果),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要為大家詳細(xì)介紹了vue圖片加載與顯示默認(rèn)圖片的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式
這篇文章主要介紹了vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3.0手動封裝分頁組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09