VuePress 集成 FancyBox 图片放大浏览功能

此文章发布于 57 个月前,部分信息可能已经过时,请自行斟酌确认。

转自:https://segmentfault.com/a/1190000016928859

.vuepress/config.js 文件的 head 标签中可以直接添加 fancyboxcdn,由于它依赖 jquery,所以还要引入 jquery

module.exports = {
  title: '信息部技术文档',
  description: '信息部软件开发编程技术手册',
  base: '/',
  host: '0.0.0.0',
  port: '9090',
  themeConfig: {
    //其它配置
  },
  head: [
    //fancybox图片浏览
    ['script', { src: '/js/jquery-3.3.1.min.js' }],
    ['script', { src: '/plugin/FancyBox/jquery.fancybox.min.js' }],
    ['link', { rel: 'stylesheet', type: 'text/css', href: '/plugin/FancyBox/jquery.fancybox.min.css' }]
  ]
}

然后修改图片的 markdown

![xx](image001.png)

将上面的这种格式修改为下面这种,手动添加 a 标签、data-fancyboxhref 属性即可。

<a data-fancybox title="xx" href="image001.png">![xx](image001.png)</a>

但是这样手动添加太麻烦了,并且想取消掉也不方便,这时可以安装vscode插件vuepress-img-format

调用命令 img format 可以格式化当前文档的所有图片,img reset format 可以重置格式化。

另外也可以使用快捷键:

Ctrl + Shift +8 格式化
Ctrl + Shift + 8 重置格式化

最后修改:2019 年 07 月 13 日 11 : 50 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论