编程技术

VuePress的图片灯箱操作

# 图片预览

# 安装

yarn add -D vuepress-plugin-zooming
1

# 使用

plugins: [
  [
    'vuepress-plugin-zooming',
    {
      selector: '.theme-default-content img',
      delay: 1000,
    }
  ],
]
1
2
3
4
5
6
7
8
9

这里遇到一个坑，还挺难受。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)`,
          },
        }, 
      ],
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18