支持图像放大功能的vueperess示例代码

介绍

VuePress由两部分组成：一个由Vue驱动的简单静态网站生成工具，以及一个为编写技术文档而优化的默认主题。创建它是为了支持Vue子项目的文档需求。

VuePress生成的每个页面都有对应的预渲染静态HTML，可以提供出色的加载性能，对SEO友好。但是，页面加载后，Vue将作为一个完整的单页应用程序(SPA)接管这些静态内容。当用户浏览网站时，他们可以根据需要加载其他页面。

前两天接触到了Vuepress，价值高，界面简单，使用方便。所以我计划从hexo迁移我的博客。

但是我发现图片无法点击。Markdown在渲染时甚至没有添加标签，所以不能直接指向或者放大。但是我的博客里有很多大图，所以这个功能正好需要。

我试过最新版本的1.x alpha，但是它还是没有这个功能。所以我就自己做了。

因为不熟悉vue，很难更改源代码。

最后，我使用fancybox库，开发了一个辅助的VSCode插件。

介绍fancybox

fancybox cdn可以直接添加到。vu press/config . js文件。因为它依赖于jquery，所以也应该引入jquery。

module.exports={ head: [ //添加jquert和fancybox ['script '，{ src : ' https://cdnjs . cloud flare.com/Ajax/libs/jquery/3 . 3 . 1/jquery . slim . min . js ' }]，['script '，{ src : ' https://cdnjs . cloud flare.com/Ajax/libs/fancy box/3 . 5 . 2/jquery . fancy box。

！[xx](sss)

将上面的格式修改为下面的格式，手动添加A标签、data-fancybox和href属性。

a data-fancy box title=' xx ' href=' SSS ' rel=' external no follow '！[xx](sss)/a但是手动添加太麻烦，取消也不方便。

所以我编写了一个VSCode插件来批量格式化它。

VScode存储搜索vu press-img-format并安装它。

调用命令img format格式化当前文档的所有图片，调用img reset format重置格式。效果如下：

当然，您也可以使用内置快捷方式：

快捷键格式化重置格式化Windows/Linux Ctrl Shift 8 Ctrl Shift 8 Mac cmd Shift 8 cmd Shift 9格式化完成后，可以点击放大图片。

摘要

以上是边肖介绍的Vue印刷机支持图像放大的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！