From e8cfde1250de638dddb0189ac834bed2c78e2288 Mon Sep 17 00:00:00 2001 From: ksky521 Date: Sun, 28 Jun 2020 22:31:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81yaml=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89ejs=E6=A8=A1=E6=9D=BF=E5=92=8Cwebslides=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/nodeppt-parser/index.js | 19 ++++++++++++----- packages/nodeppt-parser/template/index.ejs | 4 ++-- packages/nodeppt-serve/config/base.js | 24 +++++++++++----------- packages/nodeppt/README.md | 24 +++++++++++++++------- site/mermaid.md | 13 ++++++++++++ 5 files changed, 58 insertions(+), 26 deletions(-) diff --git a/packages/nodeppt-parser/index.js b/packages/nodeppt-parser/index.js index 07a939191..058adb6c9 100644 --- a/packages/nodeppt-parser/index.js +++ b/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(//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}); diff --git a/packages/nodeppt-parser/template/index.ejs b/packages/nodeppt-parser/template/index.ejs index fb32c99e0..3a303fe41 100644 --- a/packages/nodeppt-parser/template/index.ejs +++ b/packages/nodeppt-parser/template/index.ejs @@ -31,10 +31,10 @@ <% if (hasOwnProperty('plugins') && plugins && plugins.indexOf && ~plugins.indexOf('echarts')) { %> - + <% } %> <% if (hasOwnProperty('plugins') && plugins && plugins.indexOf && ~plugins.indexOf('mermaid')) { %> - + <% } %> diff --git a/packages/nodeppt-serve/config/base.js b/packages/nodeppt-serve/config/base.js index 3716c5e04..78c627fdd 100644 --- a/packages/nodeppt-serve/config/base.js +++ b/packages/nodeppt-serve/config/base.js @@ -1,20 +1,20 @@ /** * @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 @@ -22,9 +22,9 @@ module.exports = (api, options) => { 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')); diff --git a/packages/nodeppt/README.md b/packages/nodeppt/README.md index a27a3c539..939ab351a 100755 --- a/packages/nodeppt/README.md +++ b/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 {}, + }, ]; ``` diff --git a/site/mermaid.md b/site/mermaid.md index f5c524a5b..86c100d78 100644 --- a/site/mermaid.md +++ b/site/mermaid.md @@ -35,6 +35,19 @@ sequenceDiagram Alice->John: Yes... John, how are you? ``` + +## Mermaid can render state diagrams. {.aligncenter} + +```mermaid +stateDiagram-v2 + [*] --> Still + Still --> [*] + + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +```