Vue press 支持图片放大功能的实例代码
介绍
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
将上面的这种格式修改为下面这种，手动添加 a 标签、 data-fancybox 和 href 属性即可。
<a data-fancybox title="xx" href="sss" rel="external nofollow" ></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 支持图片放大功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文主要介绍了vue 禁止重复点击发送多次请求的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
基于electron+vue3+ts搭建桌面端应用并且可以热更新
这篇文章主要为大家详细介绍了如何基于electron+vue3+ts搭建桌面端应用并且可以热更新,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下2023-10-10
这篇文章主要介绍了axios携带cookie配置详解(axios+koa)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在网上各种找不到vue项目加入百度统计的代码与实现，自己探索出了一套加入百度统计的办法，下面这篇文章主要给大家介绍了关于单页面vue引入百度统计的使用方法，需要的朋友可以参考下2018-10-10
Vue实现登录保存token并校验实现保存登录状态的操作代码
这篇文章主要介绍了Vue实现登录保存token并校验实现保存登录状态,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要介绍了Ant Design Upload 文件上传功能的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue中h5端打开app(判断是安卓还是苹果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要为大家详细介绍了vue图片加载与显示默认图片的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue中使用jeecg进行前后端联调方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了vue3.0手动封装分页组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论