修改插件

README.md

@@ -443,6 +443,27 @@ module.exports = {
 * [markdown-it docs](https://github.com/markdown-it/markdown-it/tree/master/docs)
 * [posthtml docs](https://github.com/posthtml/posthtml/tree/master/docs)
 
+### webslides plugin
+WebSlides 插件需要写到一个 js 文件中，然后作为数组放到`window.WSPlugins_`中，然后通过在md 页面的配置（yaml）添加 js 的方法引入。
+
+
+```md
+js:
+    - webslide_plugins.js
+```
+
+```js
+// webslide_plugins.js内容
+window.WSPlugins_ = [{
+    id: 'webslide_plugin_name',
+    // 下面是对应的插件类
+    apply: class Plugin{}
+}]
+```
+
+
+参考[WebSlides文档](https://github.com/webslides/WebSlides/wiki/Plugin-development)
+
 ### Template：自制模板
 
 参考[nodeppt-template-default](https://github.com/ksky521/nodeppt-template-default)。

packages/nodeppt-js/assets/scss/index.scss

@@ -24,6 +24,14 @@ i.fa {
   }
 }
 
+.animated.delay-300 {
+  animation-delay: .3s;
+}
+
+.animated.delay-400 {
+  animation-delay: .4s;
+}
+
 .animated.delay-500 {
   animation-delay: .5s;
 }
@@ -43,3 +51,43 @@ i.fa {
 .animated.delay-900 {
   animation-delay: .9s;
 }
+
+.animated.delay-1100 {
+  animation-delay: 1.1s;
+}
+
+.animated.delay-1200 {
+  animation-delay: 1.2s;
+}
+
+.animated.delay-1300 {
+  animation-delay: 1.3s;
+}
+
+.animated.delay-1400 {
+  animation-delay: 1.4s;
+}
+
+.animated.delay-1500 {
+  animation-delay: 1.5s;
+}
+
+.animated.delay-1600 {
+  animation-delay: 1.6s;
+}
+
+.animated.delay-1700 {
+  animation-delay: 1.7s;
+}
+
+.animated.delay-1800 {
+  animation-delay: 1.8s;
+}
+
+.animated.delay-2400 {
+  animation-delay: 2.4s;
+}
+
+.animated.delay-2500 {
+  animation-delay: 2.5s;
+}

packages/nodeppt-parser/lib/yaml-parser.js

@@ -1,6 +1,20 @@
 const yaml = require('js-yaml');
 function getSettings(str) {
-    return yaml.load(str);
+    const settings = yaml.load(str);
+    const pluginSettings = {};
+    if (settings.plugins && Array.isArray(settings.plugins)) {
+        settings.plugins = settings.plugins.map(p => {
+            if (typeof p === 'string') {
+                return p;
+            } else if (typeof p === 'object') {
+                const key = Object.keys(p)[0];
+                pluginSettings[key] = p[key];
+                return key;
+            }
+        });
+    }
+    settings.pluginsOptions = pluginSettings;
+    return settings;
 }
 
 module.exports = getSettings;

packages/nodeppt-parser/template/index.ejs

@@ -41,8 +41,10 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
-    const ws = new WebSlide()
-
+    const ws = new WebSlides({
+        loop: false
+    })
+    window.wsInstance = ws;
     <% if (hasOwnProperty('plugins') && plugins && plugins.indexOf && ~plugins.indexOf('echarts')) { %>
         const initEchart = (e)=>{
 
@@ -54,13 +56,17 @@ document.addEventListener('DOMContentLoaded', () => {
             const echartsChart = []
             const echartsOption = []
             for (let j = 0; j < len; j++) {
-            const et = (echartsChart[j] = echarts.init(echartsNode[j]))
-            try {
-                echartsOption[j] = JSON.parse(echartsData[j].innerHTML.trim())
-                et.setOption(echartsOption[j])
-            } catch (e) {
-                console.log(e)
-            }
+                <% if(hasOwnProperty('pluginsOptions') && pluginsOptions && pluginsOptions.echarts && pluginsOptions.echarts.theme) { %>
+                    const et = (echartsChart[j] = echarts.init(echartsNode[j], '<%= pluginsOptions.echarts.theme %>'))
+                <% } else { %>
+                    const et = (echartsChart[j] = echarts.init(echartsNode[j]))
+                <% } %>
+                try {
+                    echartsOption[j] = JSON.parse(echartsData[j].innerHTML.trim())
+                    et.setOption(echartsOption[j])
+                } catch (e) {
+                    console.log(e)
+                }
             }
         }
     }

packages/nodeppt-serve/config/base.js

@@ -35,7 +35,7 @@ module.exports = (api, options) => {
             .add('./main.js')
             .end()
             .output.path(api.resolve(options.outputDir))
-            .filename('[name].js')
+            .filename(`[name]${options.filenameHashing ? '.[hash:8]' : ''}.js`)
             .publicPath(options.baseUrl);
 
         webpackConfig.resolve

packages/nodeppt-serve/template/main.js

@@ -2,7 +2,10 @@
  * 页面的 main.js
  */
 import Slide from 'nodeppt-js';
+if (typeof window === 'object' && Array.isArray(window.WSPlugins_)) {
+    WSPlugins_.forEach(({id, apply}) => {
+        Slide.registerPlugin(id, apply);
+    });
+}
 
-window.WebSlide = Slide;
-
-
+window.WebSlides = Slide;

site/animation.md

@@ -7,35 +7,41 @@ css:
 
 <slide class="bg-gradient-v" image="https://source.unsplash.com/nxfuA21kNHY/1440x1440 .dark" :class="size-60">
 
-Animation{.text-subtitle}
-# nodeppt {.text-landing}
+Animation{.text-subtitle.animated.fadeInDown.delay-800}
+# nodeppt {.text-landing.animated.fadeInRight}
 
-This is probably the best **web presentation tool** so far! {.text-intro}
+This is probably the best **web presentation tool** so far! {.text-intro.animated.fadeInUp.delay-800}
 
-[:fa-github: Github](https://github.com/ksky521/nodeppt){.button.ghost}
+[:fa-github: Github](https://github.com/ksky521/nodeppt){.button.ghost.animated.flipInX.delay-1500}
 
+<slide :class="aligncenter fadeInUp animated">
 
-<slide :class="aligncenter fadeInUp">
-## The little things mean the most
+## 使用 `.animated` 给元素添加动效
 
-.fadeInUp
+`.animated.fadeInUp` <br/>`.animated` 添加的动效是自动播放的
 
-
-<slide :class="aligncenter zoomIn size-40">
+<slide :class="aligncenter animated zoomIn size-40">
 
 ![](https://webslides.tv/static/images/android.png)
 
 <slide :class="aligncenter">
 
-## h2.fadeIn.slow {.fadeIn.slow}
+## `h2.animated.fadeIn.slow` {.fadeIn.animated.slow}
+
+<slide :class="aligncenter">
+
+## `.animated.fadeIn.delay-800` {.fadeIn.animated.delay-800}
 
 <slide class="aligncenter">
 
 animate with {.text-subtitle}
-## `.tobuild`
+## `.tobuild` {.tada.animated.delay-500}
+
 
 需要添加动效的元素添加 `.tobuild` + 动效class {.tobuild.fadeInRight}
 
+`.tobuild` 动效是手动触发的 {.tobuild.fadeInLeft}
+
 <slide :class="size-50">
 
 ### `.build` 子元素全部会被添加`.tobuild`

site/background.md

@@ -1,12 +1,14 @@
 title: nodeppt 背景效果演示
 speaker: 三水清
 url: https://github.com/ksky521/nodeppt
+js:
+    - background.js
 css:
  - https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext
 
 <slide class="bg-black-blue aligncenter" image="https://source.unsplash.com/6njoEbtarec/ .dark">
 
-Background 演示{.text-subtitle}
+Background{.text-subtitle.animated.fadeInDown.delay-800}
 # nodeppt {.text-landing.text-shadow}
 
 这可能是迄今为止最好的网页版演示库 {.text-intro}
@@ -20,6 +22,26 @@ Background 演示{.text-subtitle}
 
 &lt;slide class="bg-apple"&gt;
 
+<slide :class="size-40">
+
+## 点击切换背景class
+
+* [`.bg-primary`](){onclick="changeBackgroundColor('bg-primary')"}
+* [`.bg-secondary`](){onclick="changeBackgroundColor('bg-secondary')"}
+* [`.bg-light`](){onclick="changeBackgroundColor('bg-light')"}
+* [`.bg-black`](){onclick="changeBackgroundColor('bg-black')"}
+* [`.bg-black-blue`](){onclick="changeBackgroundColor('bg-black-blue')"}
+* [`.bg-red`](){onclick="changeBackgroundColor('bg-red')"}
+* [`.bg-blue`](){onclick="changeBackgroundColor('bg-blue')"}
+* [`.bg-green`](){onclick="changeBackgroundColor('bg-green')"}
+* [`.bg-purple`](){onclick="changeBackgroundColor('bg-purple')"}
+* [`.bg-trans-light`](){onclick="changeBackgroundColor('bg-trans-light')"}
+* [`.bg-trans-dark`](){onclick="changeBackgroundColor('bg-trans-dark')"}
+* [`.bg-apple`](){onclick="changeBackgroundColor('bg-apple')"}
+* [`.bg-gradient-h`](){onclick="changeBackgroundColor('bg-gradient-h')"}
+* [`.bg-gradient-r`](){onclick="changeBackgroundColor('bg-gradient-r')"}
+* [`.bg-gradient-v`](){onclick="changeBackgroundColor('bg-gradient-v')"}
+{.text-cols}
 
 <slide>
 ## Corporate Backgrounds
@@ -200,10 +222,11 @@ We'll fix it or if we can't, we'll replace it.
 
 ## .background.anim
 
+
 <slide class="aligncenter">
 
-## U work so hard, **but** 干不过 write PPTs
+## U work so hard, **but** 干不过 write PPTs {.animated.tada}
 
-快使用 [nodeppt](https://github.com/ksky521/nodeppt) 轻松搞定高大上PPT<br/> nodeppt 助力你的人生逆袭之路！ {.text-into}
+快使用 [nodeppt](https://github.com/ksky521/nodeppt) 轻松搞定高大上PPT<br/> nodeppt 助力你的人生逆袭之路！ {.text-into.animated.delay-800.fadeIn}
 
-[:fa-cloud-download: Github](https://github.com/ksky521/nodeppt){.button}
+[:fa-cloud-download: Github](https://github.com/ksky521/nodeppt){.button.animated.delay-1s.fadeInUp}