fix($plugin-medium-zoom): doesn't work with default plugin options in…

… default theme
vuejs · Jun 11, 2019 · 42f19e0 · 42f19e0
1 parent 54bb2f3
commit 42f19e0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/packages/@vuepress/plugin-medium-zoom/index.js b/packages/@vuepress/plugin-medium-zoom/index.js
@@ -2,7 +2,7 @@ const { path } = require('@vuepress/shared-utils')
 
 module.exports = (options, context) => ({
   define: {
-    SELECTOR: options.selector || '.content img',
+    SELECTOR: options.selector || '.theme-default-content img',
     OPTIONS: options.options
   },
   clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')

diff --git a/packages/docs/docs/plugin/official/plugin-medium-zoom.md b/packages/docs/docs/plugin/official/plugin-medium-zoom.md
@@ -31,8 +31,8 @@ module.exports = {
   plugins: {
     '@vuepress/medium-zoom': {
       selector: 'img.zoom-custom-imgs',
-
-      // medium-zoom options here (https://github.com/francoischalifour/medium-zoom#options)
+      // medium-zoom options here
+      // See: https://github.com/francoischalifour/medium-zoom#options
       options: {
         margin: 16
       }
@@ -46,8 +46,13 @@ module.exports = {
 ### selector
 
 - Type: `string`
-- Default: `.content img`
+- Default: `.theme-default-content img`
+
+Note that `.theme-default-content` is the class name of [`<Content />`](../../guide/using-vue.md#content) component in default theme.
 
 ### options
 
-Other `medium-zoom` options. [See documentation](https://github.com/francoischalifour/medium-zoom#options).
+- Type: `object`
+- Default: `undefined`
+
+[Options](https://github.com/francoischalifour/medium-zoom#options) for [medium-zoom](https://github.com/francoischalifour/medium-zoom).
diff --git a/packages/docs/docs/zh/plugin/official/plugin-medium-zoom.md b/packages/docs/docs/zh/plugin/official/plugin-medium-zoom.md
@@ -16,15 +16,45 @@ yarn add -D @vuepress/plugin-medium-zoom@next
 
 ## 使用
 
+## Usage
+
+**简单使用**:
+
 ```javascript
 module.exports = {
   plugins: ['@vuepress/medium-zoom'] 
 }
 ```
 
+**自定义选项**:
+
+```javascript
+module.exports = {
+  plugins: {
+    '@vuepress/medium-zoom': {
+      selector: 'img.zoom-custom-imgs',
+      // medium-zoom options here
+      // See: https://github.com/francoischalifour/medium-zoom#options
+      options: {
+        margin: 16
+      }
+    }
+  }
+}
+```
+
 ## 选项
 
 ### selector 
 
 - 类型: `string`
-- 默认值: `.content img`
+- 默认值: `.theme-default-content img`
+
+值得注意的是， `.theme-default-content` 是默认主题添加给 [`<Content />`](../../guide/using-vue.md#content) 组件的 class name。
+
+### options
+
+- 类型: `object`
+- 默认值: `undefined`
+
+[medium-zoom](https://github.com/francoischalifour/medium-zoom) 的 [选项](https://github.com/francoischalifour/medium-zoom#options)。