什么是 shower-next
shower-next 是一个开源的 HTML5 幻灯片制作引擎，可以用于快速构建演示文稿、研讨会或培训内容等。它可以在任何现代浏览器中运行，并可以通过多种方式进行自定义。
shower-next 的主要功能特点包括：
- 支持 Markdown 和 HTML 格式的幻灯片内容编写
- 提供了多种主题和布局供选择
- 可以为每个幻灯片添加位置和百分比
- 支持键盘和鼠标控制
- 可自定义动画和使用插件
安装和使用
安装
在使用 shower-next 时，首先需要确保为您的项目安装了 Node.js 环境和 npm 包管理器。
然后，可以在您的终端中使用 npm install 命令来安装 shower-next：
npm install shower-next --save
使用
安装成功后，可以使用以下步骤来创建和编辑您的第一份幻灯片：
步骤 1：创建 HTML 文件
可以手动创建一个 HTML 文件（比如说 index.html），并在其中引入 shower-next :
-- -------------------- ---- -------
--------- -----
------
------
--------- --------------------
---- -- ----------- - --- - -- -- ---
----- ---------------- --------------------------------------------------
------- ------------------------------------------------------
-------
------
---- ---- ------------ ---
-------- ---------------
---- ----------------------
--------- ------
-------- - --------
------
---- ----------------------
--------- ------
-------- - --------
------
----------
-------
-------步骤 2：运行幻灯片
接下来，可以启动一个本地服务器，通过浏览器打开您的 HTML 文件来运行幻灯片。
可以使用以下命令来启动本地服务器：
npx serve
运行该命令后，可以在您的终端中看到一个 URL 链接，通过浏览器中访问该链接即可查看幻灯片。
自定义幻灯片
shower-next 支持多种自定义方式，可以为幻灯片添加主题、布局、动画和使用插件等。
幻灯片定制
shower-next 有一个默认主题，但您可以通过指定一个不同的 CSS 文件来更改幻灯片的样式。可以在 HTML 文件中指定其他的 CSS 样式表：
<link rel="stylesheet" href="node_modules/shower-next/styles/screen.css"> <link rel="stylesheet" href="./styles/style.css">
其中，node_modules/shower-next/styles/screen.css 是 shower-next 的默认样式表，而 ./styles/style.css 是自定义样式表。
主题修改
shower-next 支持多个主题，您可以在引入 CSS 样式表时指定使用的主题。在启动幻灯片时，可以使用 -t 或 --theme 参数来指定主题：
npx serve -t wood
您可以在 请来这里下载不同主题。
使用插件
shower-next 支持多个插件，您可以通过安装插件并在 HTML 文件中引入它们来增强幻灯片的功能。
安装插件的方式与安装 shower-next 相同，例如：
npm install shower-markdown --save
在 HTML 文件中，需要在 shower-next 的 JS 文件之后添加插件的 JS 文件，并在幻灯片容器中指定插件名称：
-- -------------------- ---- -------
------
-------- -------------- -------------------------------
---- ----------------------
-------- --------------
-- ----- -----
---- -- ----- -------
----------
------
---
----------
------- ------------------------------------------------------
------- ---------------------------------------------------------------
-------可以在 请来这里查看所有插件。
使用 Markdown 编写幻灯片
shower-next 支持使用 Markdown 方式编写幻灯片。可以使用包含 Markdown 格式的 HTML 标记（即使用 data-markdown 属性的标记）来标记一个幻灯片，并在其中添加 Markdown 代码。
<div class="shower__slide">
<section data-markdown>
## Slide Title
This is slide content
</section>
</div>以上示例中，data-markdown 属性指定了此标记中包含了 Markdown 代码。这里使用的是 section 标记，但也可以使用其他标记，如 div、article 或 aside 等。
需要在 HTML 文件中引入 shower-markdown 插件才能与 Markdown 配合使用：
-- -------------------- ---- -------
---
------
-------- -------------- -------------------------------
---- ----------------------
-------- --------------
-- ----- -----
---- -- ----- -------
----------
------
---
----------
------- ------------------------------------------------------
------- ---------------------------------------------------------------
-------
-------总结
shower-next 是一个可玩性极高的幻灯片制作引擎，具有丰富的功能和多种定制方式，适用于多种演示场景。在使用时，需要了解其基本用法和定制方式，才能更好地发挥其功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca8fb5cbfe1ea0612447