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)