介绍
bespoke.js 是一个基于 Web 技术的演示文稿库，可以用来制作演讲稿、课件等多种形式的展示文稿。与其他演示文稿库不同的是，bespoke.js 的设计目标在于提供一种灵活的方式来创建定制化的文稿，使用户能够轻松地添加自定义样式和交互效果。
本篇文章将详细介绍如何使用 npm 包 bespoke.js 来制作演示文稿。
安装
首先需要安装 Node.js 和 npm，然后在命令行中通过以下命令安装 bespoke.js：
npm install bespoke
使用
初始化文稿
打开你的项目文件夹，新建一个 HTML 文件并在其中引入 bespoke.js 的 CSS 和 JS 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --------------------
----- ---------------- -------------------------------------------------
-------
------
---- -----------------------
---------
--------- ------
------- -- --- ----- ----------
----------
---------
--------- ------
------- -- --- ------ ----------
----------
---------
--------- ------
------- -- --- ----- ----------
----------
------
------- --------------------------------------------------------
--------
--------------------------------
---------
-------
-------上面的代码中，.bespoke-parent 是文稿的容器元素，可以将其设置为页面中任意元素。<section> 元素是每一张幻灯片的容器，其中包含了该幻灯片的内容。
在引入 bespoke.js 后，我们使用 bespoke.from('.bespoke-parent') 来初始化文稿，并且文稿就已经可以正常工作了。
使用插件
bespoke.js 支持插件机制，可以通过插件来增强文稿的功能。以下是使用插件的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --------------------
----- ---------------- -------------------------------------------------
----- ---------------- --------------------------------------------------
-------
------
---- -----------------------
---------
--------- ------
------- -- --- ----- ----------
----------
---------
--------- ------
------- -- --- ------ ----------
----------
---------
--------- ------
------- -- --- ----- ----------
----------
------
------- --------------------------------------------------------
------- ------------------------------------------------------------------------
------- ------------------------------------------------------------------
------- ------------------------------------------------------------------
------- --------------------------------------------------------
--------
------------------------------- -
--------------------------
-----------------------
-----------------------
----------------------------
---
---------
-------
-------上面的代码中，我们引入了四个插件：
bespoke.plugins.classes()：允许我们为每个幻灯片添加自定义的 CSS 类。bespoke.plugins.keys()：允许我们通过键盘控制文稿的翻页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33048