From 42f19e0ce653e42ea1187a9f108f884b92e1febd Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 12 Jun 2019 01:06:44 +0800
Subject: [PATCH] fix($plugin-medium-zoom): doesn't work with default plugin
options in default theme
---
.../@vuepress/plugin-medium-zoom/index.js | 2 +-
.../plugin/official/plugin-medium-zoom.md | 13 +++++---
.../zh/plugin/official/plugin-medium-zoom.md | 32 ++++++++++++++++++-
3 files changed, 41 insertions(+), 6 deletions(-)
diff --git a/packages/@vuepress/plugin-medium-zoom/index.js b/packages/@vuepress/plugin-medium-zoom/index.js
index 3d2fbf2387..556a7e045c 100644
--- 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
index 2f3a2a53d0..3b79b464bd 100644
--- 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 [``](../../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
index f9ae2939c9..db1e6f1311 100644
--- 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` 是默认主题添加给 [``](../../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)。