支持yaml自定义ejs模板和webslides配置

Author: ksky521

packages/nodeppt-parser/index.js

@@ -11,18 +11,27 @@ const yamlParser = require('./lib/yaml-parser');
 const defaults = require('./defaults');
 
 // 模板
-const template = fs.readFileSync(path.join(__dirname, './template/index.ejs')).toString();
+const defaultTemplate = fs.readFileSync(path.join(__dirname, './template/index.ejs')).toString();
 // 这里不要用箭头函数，this 指向问题！
 /* eslint-disable space-before-function-paren */
-module.exports = function(content) {
-/* eslint-enable space-before-function-paren */
+module.exports = function (content) {
+    /* eslint-enable space-before-function-paren */
     const {plugins = []} = loaderUtils.getOptions(this);
+    const resourcePath = this.resourcePath;
     const parser = getParser(plugins);
 
     const settings = content.split(/<slide.*>/i)[0];
-
+    const yamlSettings = yamlParser(settings);
+    // 支持baseTemplate，传入ejs模板
+    let template = defaultTemplate;
+    if (yamlSettings.baseTemplate && typeof yamlSettings.baseTemplate === 'string') {
+        const baseTemplate = path.resolve(path.dirname(resourcePath), yamlSettings.baseTemplate);
+        if (fs.existsSync(baseTemplate)) {
+            template = fs.readFileSync(baseTemplate).toString();
+        }
+    }
     // 首部 yaml 设置部分
-    const globalSettings = defaultDeep(yamlParser(settings), defaults);
+    const globalSettings = defaultDeep(yamlSettings, defaults);
     content = parser(content);
 
     return ejs.render(template, {...globalSettings, content});

packages/nodeppt-parser/template/index.ejs

@@ -31,10 +31,10 @@
     </article>
 </div>
 <% if (hasOwnProperty('plugins') && plugins && plugins.indexOf && ~plugins.indexOf('echarts')) { %>
-    <script src="https://cdn.staticfile.org/echarts/4.1.0-release/echarts.min.js"></script>
+    <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
 <% } %>
 <% if (hasOwnProperty('plugins') && plugins && plugins.indexOf && ~plugins.indexOf('mermaid')) { %>
-    <script src="https://cdn.staticfile.org/mermaid/8.0.0/mermaid.min.js"></script>
+    <script src="https://cdn.staticfile.org/mermaid/8.5.2/mermaid.min.js"></script>
     <script>mermaid.startOnLoad = false;</script>
 <% } %>
 

packages/nodeppt-serve/config/base.js

@@ -1,30 +1,30 @@
 /**
  * @file base
  */
-const path = require('path');
+// const path = require('path');
 const webpack = require('webpack');
 const {transformer, formatter} = require('nodeppt-shared-utils');
 module.exports = (api, options) => {
     const {version} = api.getNodepptOptions();
-    api.chainWebpack(webpackConfig => {
+    api.chainWebpack((webpackConfig) => {
         const {getAssetPath, resolveLocal} = require('../lib/utils');
         const inlineLimit = 4096;
 
-        const genAssetSubPath = dir => {
+        const genAssetSubPath = (dir) => {
             return getAssetPath(options, `${dir}/[name]${options.filenameHashing ? '.[hash:8]' : ''}.[ext]`);
         };
 
-        const genUrlLoaderOptions = dir => {
+        const genUrlLoaderOptions = (dir) => {
             return {
                 limit: inlineLimit,
                 // use explicit fallback to avoid regression in url-loader>=1.1.0
                 fallback: {
                     loader: 'file-loader',
                     options: {
                         name: genAssetSubPath(dir),
-                        esModule: false
-                    }
-                }
+                        esModule: false,
+                    },
+                },
             };
         };
         let entryName = 'app';
@@ -63,7 +63,7 @@ module.exports = (api, options) => {
             .end()
             .use('nodeppt-parser')
             .loader(require.resolve('nodeppt-parser'))
-            .options({plugins: options.plugins})
+            .options({plugins: options.plugins, template: options.baseTemplate})
             .end();
 
         webpackConfig.module
@@ -90,7 +90,7 @@ module.exports = (api, options) => {
             .use('file-loader')
             .loader(require.resolve('file-loader'))
             .options({
-                name: genAssetSubPath('img')
+                name: genAssetSubPath('img'),
             });
 
         webpackConfig.module
@@ -109,7 +109,7 @@ module.exports = (api, options) => {
 
         webpackConfig.plugin('banner').use(
             new webpack.BannerPlugin({
-                banner: `Created by nodeppt ${version} \n - Install: npm install -g nodeppt\n - Github: https://github.com/ksky521/nodeppt`
+                banner: `Created by nodeppt ${version} \n - Install: npm install -g nodeppt\n - Github: https://github.com/ksky521/nodeppt`,
             })
         );
 
@@ -120,8 +120,8 @@ module.exports = (api, options) => {
         webpackConfig.plugin('friendly-errors').use(require('friendly-errors-webpack-plugin'), [
             {
                 additionalTransformers: [transformer],
-                additionalFormatters: [formatter]
-            }
+                additionalFormatters: [formatter],
+            },
         ]);
 
         webpackConfig.plugin('progress').use(require('webpack/lib/ProgressPlugin'));

packages/nodeppt/README.md

@@ -4,7 +4,6 @@
 
 [![Markpress npm badge](https://nodei.co/npm/nodeppt.png)](https://www.npmjs.com/package/nodeppt)
 
-
 **nodeppt 2.0** 基于[webslides](https://github.com/webslides/WebSlides)、webpack、markdown-it、posthtml 重构，[新效果](https://nodeppt.js.org)
 
 ## Install
@@ -95,10 +94,19 @@ plugins:
 -   css：css 文件数组，放到头部
 -   prismTheme：prism 配色，取值范围 `['dark', 'coy', 'funky', 'okaidia', 'tomorrow', 'solarizedlight', 'twilight']`
 -   plugins：目前支持 [echarts](https://echarts.baidu.com/) 和 [katex](https://katex.org) 两个插件
+-   pluginsOptions：插件的配置
+-   webslidesOptions：[webslides](https://github.com/webslides/WebSlides/wiki/Core-API#options)配置
+
+**webslidesOptions 对应的是 webslides 的配置，例如开启`autoslide`**：
+
+```yaml
+webslidesOptions:
+    autoslide: 5000
+```
 
 #### 插件
 
-目前 nodeppt 支持 [图表 echarts](https://echarts.baidu.com/) ，[流程图 mermaid](https://mermaidjs.github.io/)，[数学符号 KaTeX](https://katex.org) 3个插件。
+目前 nodeppt 支持 [图表 echarts](https://echarts.baidu.com/) ，[流程图 mermaid](https://mermaidjs.github.io/)，[数学符号 KaTeX](https://katex.org) 3 个插件。
 
 #### echarts
 
@@ -119,6 +127,7 @@ echarts 主题配色可以直接在`yaml`配置的 js 中引入。echarts 采用
     }]
 }
 ```
+
 详见[site/echarts.md](./site/echarts.md)
 
 #### mermaid
@@ -138,6 +147,7 @@ sequenceDiagram
 ```
 
 详见[site/mermaid.md](./site/mermaid.md)
+
 #### ketex
 
 参考：[markdown-it-katex](https://www.npmjs.com/package/markdown-it-katex)语法
@@ -443,7 +453,7 @@ module.exports = () => ({
     integrity: false,
 
     css: {
-        extract: true
+        extract: true,
         // modules: false,
         // localIdentName: '[name]_[local]_[hash:base64:5]',
         // sourceMap: false,
@@ -458,7 +468,7 @@ module.exports = () => ({
       proxy: null, // string | Object
       before: app => {}
     */
-    }
+    },
 });
 ```
 
@@ -477,7 +487,7 @@ module.exports = {
     // 分别对应 markdown-it和 posthtml 插件语法
     id: 'markdown-xxx',
     // 这里的 apply 是插件实际的内容，详细查看 markdown-it和 posthtml 插件开发
-    apply: () => {}
+    apply: () => {},
 };
 ```
 
@@ -498,8 +508,8 @@ window.WSPlugins_ = [
     {
         id: 'webslide_plugin_name',
         // 下面是对应的插件类
-        apply: class Plugin {}
-    }
+        apply: class Plugin {},
+    },
 ];
 ```
 

site/mermaid.md

@@ -35,6 +35,19 @@ sequenceDiagram
     Alice->John: Yes... John, how are you?
 ```
 
+<slide :class="size-60">
+## Mermaid can render state diagrams. {.aligncenter}
+
+```mermaid
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
 
 
 <slide :class="size-60">