Vue press 支持图片放大功能的实例代码

网络编程 2025/1/7 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

介绍

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

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

当然也可以使用内置的快捷键：

快捷键格式化重置格式化 Windows/Linux Ctrl + Shift +8 Ctrl + Shift + 8 Mac Cmd + Shift + 8 Cmd + Shift + 9

格式完了之后就可以点击放大图片了。

总结

以上所述是小编给大家介绍的Vue press 支持图片放大功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue,press,图片放大

标签：

vue,press,图片放大

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“Vue press 支持图片放大功能的实例代码”

暂无Vue press 支持图片放大功能的实例代码的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2025年01月07日

Vue press 支持图片放大功能的实例代码

vue,press,图片放大

vue中如何去掉空格的方法实现

KOA+egg.js集成kafka消息队列的示例

评论“Vue press 支持图片放大功能的实例代码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接