设置docusaurus-plugin-image-zoom插件

438 阅读1分钟

设置docusaurus-plugin-image-zoom插件

你搜索会看到有多个教程,但是里面有github页面的介绍,是错误的,甚至使用的npm安装方式也是错误的。教程也是错误的。

下面这个教程,亲测100%正确无误;

docusaurus-plugin-image-zoom

Docusaurus plugin to utilize medium-zoom in your projects easily!

Install

npm install docusaurus-plugin-image-zoom

Usage

Add as a plugin to docusaurus.config.js:

  plugins: [
    require.resolve('docusaurus-plugin-image-zoom')
  ],

Configuration

This plugin allows you to configure the following options:

OptionDescriptionDefault Value
selector(optional) The selector to use for the images to zoom..markdown img
background(optional) The background color to use for the zoomed image.{ light: 'rgb(255, 255, 255)', dark: 'rgb(50, 50, 50)' }
config(optional) The configuration object to pass to medium-zoom.{}

Example usage in docusaurus.config.js:

  themeConfig: {
    zoom: {
      selector: '.markdown :not(em) > img',
      background: {
        light: 'rgb(255, 255, 255)',
        dark: 'rgb(50, 50, 50)'
      },
      config: {
        // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
      }
    }
  },

引用地址:
github.com/gabrielcsap…