安装

yarn add -D vuepress-plugin-zooming

使用

plugins: [
  [
    'vuepress-plugin-zooming',
    {
      selector: '.theme-default-content img',
      delay: 1000,
    }
  ],
]
这里遇到一个坑,还挺难受。selector: 表示给什么地方的标签提供灯箱
比如我的主题是在.vuepress theme里头的,那么我这里就写成selector: '.content img'

第三方灯箱

之前有使用一个第三方的灯箱,不过那个灯箱不支持Markdown的图片插入格式
需要<a ***> <img *** **> </a>比较麻烦。
那个作者也做了一个VS Code插件,把![标题](链接)转化为灯箱需要的链接。

忘了叫什么名称了。 我使用过,回来还是选择了vuepress-plugin-zooming

附上我的配置

plugins: [
      [ 'vuepress-plugin-zooming',  //添加灯箱
        {
          selector: '.content img',
          delay: 1000,
          options: {
            bgColor: 'rgba(10, 9, 9, 0.85)',
            zIndex: `998`,
            preloadImage: true,
            scaleBase: 0.8,
            scaleExtra: 0.4,
            scrollThreshold: 35,
            transitionDuration: 0.8,
            transitionTimingFunction: `cubic-bezier(0.25, 0.1, 0.25, 1.0)`,
          },
        }, 
      ],
]
最后修改:2019 年 11 月 27 日 06 : 38 PM
如果觉得我的文章对你有用,请随意赞赏