\n\n# 这张背景图会缓慢动\n```\n\n详见[site/background.md](./site/background.md)和[在线演示](https://js8.in/nodeppt/background.html)\n\n### 样式\n\n样式太多，具体详见[site/classes.md](./site/classes.md)和[在线演示](https://js8.in/nodeppt/classes.html)\n\n### 布局\n\nnodeppt 这次使用`webslides`的布局，支持丰富的布局，实在太多了，直接看文档[site/layout.md](./site/layout.md)和[在线演示](https://js8.in/nodeppt/layout.html)\n\n### attribute\n\n参考[markdown-it-attrs](https://www.npmjs.com/package/markdown-it-attrs)，支持了`attribute`，修改增加多 class 支持等功能。\n\n其中：`..class`会往上一级节点添加 class，支持`{.class1.class2}`这种多 class 的语法。用法举例：\n\n```markdown\n# header {.style-me.class2}\n\nparagraph {data-toggle=modal}\n```\n\nOutput:\n\n```html\nheader
\nparagraph
\n```\n\n```markdown\nUse the css-module green on this paragraph. {.text-intro}\n```\n\nOutput:\n\n```html\nUse the css-module green on this paragraph.
\n```\n\n```markdown\n- list item **bold** {.red}\n```\n\nOutput:\n\n```html\n\n```\n\n```markdown\n- list item **bold**\n {.red}\n```\n\nOutput:\n\n```html\n\n```\n\n### image 增强\n\n对于 image ，支持外面包裹一层的写法，具体语法 `!`，例如：\n\n```markdown\n!\n```\n\nOutput：\n\n```html\n![](\"https://webslides.tv/static/images/iphone.png\")
\n```\n\n```markdown\n!\n```\n\nOutput:\n\n```html\n![](\"https://webslides.tv/static/images/setup.png\")
\n```\n\n### button\n\nnodeppt 的 button 是类似`link`语法的，支持蓝色、圆角、空心和 icon 版本的 button：\n\n```markdown\n[普通按钮](){.button} [圆角普通按钮](){.button.radius}\n\n[空心](){.button.ghost} [:fa-github: 前面带 icon](){.button}\n```\n\n### Icon：FontAwesome\n\nnodeppt 的 icon 支持 [FontAwesome](https://fontawesome.com/)\n语法：\n\n- `:fa-xxx:` → ``\n- `:~fa-xxx:~` → ``\n- `::fa-xxx::` → 块级``，即不会被`p`包裹\n\n### span\n\n代码修改自[markdown-it-span](https://github.com/pnewell/markdown-it-span/)，支持 `attr`语法，基本用法：\n\n```md\n:span:\n:span: {.text-span}\n```\n\n### 动效\n\nnodeppt 一如既往的支持动效，2.0 版本支持动效主要是页面内的动效。\n\n支持动效包括：\n\n- fadeIn\n- zoomIn\n- rollIn\n- moveIn\n- fadeInUp\n- slow\n\n在需要支持的动效父节点添加`.build`或者在具体的某个元素上添加`.tobuild+动效 class`即可。\n\n按照惯例，nodeppt 还支持`animate.css`的动效哦~\n\n详细查看文件：[site/animation.md](./site/animation.md)和[在线演示](https://js8.in/nodeppt/animation.html)\n\n### 使用强大的`:::`完成复杂布局\n\n`:::`语法是扩展了 [markdown-it-container](https://www.npmjs.com/package/markdown-it-container) 语法，默认是任意 tag，例如\n\n```markdown\n:::div {.content-left}\n\n## title\n\n:::\n```\n\nOutput：\n\n```html\ntitle
\n```\n\n还支持，`tag` 嵌套，除此之外，支持的组件包括：\n\n- card：卡片，一边是图片，一边是内容\n- column：column 多栏布局\n- shadowbox：带阴影的盒子\n- steps：步骤组件\n- cta：\n- gallery：图片\n- flexblock：flex block 布局，支持多个子类型\n\n**基本语法**是：\n\n```markdown\n:::TYPE {.attrs}\n\n## 第一部分\n\n使用 hr 标签隔开\n\n---\n\n## 第二部分\n\n这里的内容也是哦\n\n:::\n```\n\n详细可以看 [component](./site/component.md) 部分的 markdown 文件和[在线演示](https://js8.in/nodeppt/component.html)\n\n## 打印？导出 pdf？\n\n在 chrome 浏览器，在 URL 添加`URL?print-pdf`，然后直接 `command+P/ctrl+P` 选择打印即可！\n\n## 高级玩法\n\n如果上面\n\n### `nodeppt.config.js`\n\n在 nodeppt 执行路径下创建`nodeppt.config.js`文件，可以配置跟`webpack`相关的选项，另外可以支持自研 nodeppt 插件。\n\n默认内置的`config.js`内容如下：\n\n```js\n/**\n * @file 默认配置\n */\nmodule.exports = () => ({\n // project deployment base\n baseUrl: '/',\n\n // where to output built files\n outputDir: 'dist',\n\n // where to put static assets (js/css/img/font/...)\n assetsDir: '',\n\n // filename for index.html (relative to outputDir)\n indexPath: 'index.html',\n // 插件，包括 markdown 和 posthtml\n plugins: [],\n // chainWebpack: [],\n\n // whether filename will contain hash part\n filenameHashing: true,\n\n // boolean, use full build?\n runtimeCompiler: false,\n\n // deps to transpile\n transpileDependencies: [\n /* string or regex */\n ],\n\n // sourceMap for production build?\n productionSourceMap: true,\n\n // use thread-loader for babel & TS in production build\n // enabled by default if the machine has more than 1 cores\n parallel: () => {\n try {\n return require('os').cpus().length > 1;\n } catch (e) {\n return false;\n }\n },\n\n // multi-page config\n pages: undefined,\n\n //