Vue下如何使用press實現圖片放大功能

本篇內容介紹了“Vue下如何使用press實現圖片放大功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

VuePress 由兩部分組成：一個以 Vue 驅動的主題系統的簡約靜態網站生成工具，和一個為編寫技術文檔而優化的默認主題。它是為了支持 Vue 子項目的文檔需求而創建的。

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

引入 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 可以重置格式化，效果如下：

當然也可以使用內置的快捷鍵：

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

“Vue下如何使用press實現圖片放大功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！