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

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">