diff --git a/build/build.js b/build/build.js
index d1d2d63b7..cc5dd62a7 100644
--- a/build/build.js
+++ b/build/build.js
@@ -2,6 +2,7 @@ var rollup = require('rollup')
var buble = require('rollup-plugin-buble')
var commonjs = require('rollup-plugin-commonjs')
var nodeResolve = require('rollup-plugin-node-resolve')
+var string = require('rollup-plugin-string')
var uglify = require('rollup-plugin-uglify')
var isProd = process.argv[process.argv.length - 1] !== '--dev'
@@ -9,7 +10,7 @@ var build = function (opts) {
rollup
.rollup({
entry: 'src/' + opts.entry,
- plugins: [buble(), commonjs(), nodeResolve()].concat(opts.plugins || [])
+ plugins: (opts.plugins || []).concat([buble(), commonjs(), nodeResolve()])
})
.then(function (bundle) {
var dest = 'lib/' + (opts.output || opts.entry)
@@ -36,14 +37,20 @@ var plugins = [
{ name: 'ga', entry: 'ga.js', moduleName: 'GA' },
{ name: 'emoji', entry: 'emoji.js', moduleName: 'Emoji' },
{ name: 'external-script', entry: 'external-script.js', moduleName: 'ExternalScript' },
- { name: 'front-matter', entry: 'front-matter/index.js', moduleName: 'FrontMatter' }
+ { name: 'front-matter', entry: 'front-matter/index.js', moduleName: 'FrontMatter' },
+ { name: 'zoom-image', entry: 'zoom-image.js', moduleName: 'ZoomImage' }
]
plugins.forEach(item => {
build({
entry: 'plugins/' + item.entry,
output: 'plugins/' + item.name + '.js',
- moduleName: 'D.' + item.moduleName
+ moduleName: 'D.' + item.moduleName,
+ plugins: [
+ string({
+ include: '**/*.css'
+ })
+ ]
})
})
diff --git a/docs/plugins.md b/docs/plugins.md
index 4621d34c0..8c5f8bcd6 100644
--- a/docs/plugins.md
+++ b/docs/plugins.md
@@ -82,3 +82,11 @@ If the script on the page is an external one (imports a js file via `src` attrib
```html
```
+
+## Zoom image
+
+Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image).
+
+```html
+
+```
diff --git a/docs/zh-cn/plugins.md b/docs/zh-cn/plugins.md
index 5b35d9d70..6e19cd469 100644
--- a/docs/zh-cn/plugins.md
+++ b/docs/zh-cn/plugins.md
@@ -79,3 +79,11 @@
```html
```
+
+## 图片缩放 - Zoom image
+
+Medium's 风格的图片缩放插件. 基于 [zoom-image](https://github.com/egoist/zoom-image)。
+
+```html
+
+```
diff --git a/package.json b/package.json
index 22a94b163..029ae5bf9 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,13 @@
"rollup-plugin-buble": "^0.15.0",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-node-resolve": "^2.0.0",
+ "rollup-plugin-string": "^2.0.2",
"rollup-plugin-uglify": "^1.0.1",
"serve-static": "^1.11.1"
},
"dependencies": {
"marked": "^0.3.6",
- "prismjs": "^1.5.1"
+ "prismjs": "^1.5.1",
+ "zoom-image": "^0.1.4"
}
}
diff --git a/src/plugins/zoom-image.js b/src/plugins/zoom-image.js
new file mode 100644
index 000000000..15e643502
--- /dev/null
+++ b/src/plugins/zoom-image.js
@@ -0,0 +1,23 @@
+import zoom from 'zoom-image'
+import style from 'zoom-image/css/zoom-image.css'
+
+function install (hook) {
+ const dom = Docsify.dom
+ let destroys
+
+ // add style
+ dom.appendTo(dom.head, dom.create('style', style))
+
+ hook.doneEach(_ => {
+ const images = dom.findAll('img:not(.emoji)')
+
+ if (Array.isArray(destroys) && destroys.length) {
+ destroys.forEach(o => o())
+ destroys = []
+ }
+
+ destroys = images.map(zoom)
+ })
+}
+
+$docsify.plugins = [].concat(install, $docsify.plugins)