Bespoke 是一个基于 HTML，CSS 和 JavaScript 的幻灯片库，它使用了现代化的 Web 技术，通过简单的 API 让用户可以创建高度定制化的演示文稿。Bespoke 提供了非常强大的 API，可以通过它创建定制的样式和插件，演示文稿的每个方面，包括转换、动画、插件都可以逐步定义。
在本篇文章中，我们将基于 npm 包做一个 bespoke 的演示文稿，通过学习 step-by-step 的方式，逐渐增加演示文稿的辅助元素。
安装和初始化
首先，我们需要使用 npm 安装 Bespoke。
npm install bespoke
npm 会安装 Bespoke 和其所有的依赖项。安装完成之后，我们创建一个新的 HTML 文档，引入依赖项。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ----- -----------
----- ---------------- -------------------------------------------------
-------
------
------- ------------------------------------------------------
-------
-------这是一个非常简单的 HTML 文档，但重点在于我们已经引入了 Bespoke 的 CSS 和 JS 文件。
现在我们已经创建了一个基本的文档，我们可以开始使用 Bespoke 了。接下来，我们将添加一些辅助元素，以改善演示。
向文档中添加主题和插件
Bespoke 可以使用主题和插件来改善演示。主题用于重新定义样式和布局，而插件则提供了额外的功能和动画。首先，让我们向文档中添加一个主题。
npm install bespoke-theme-meteor
我们安装了 famous-bespoke-theme-meteor，这是一个知名的主题，并为我们的演示文稿重新定义了样式。我们可以通过将其引入到我们的 HTML 文件中来使用主题。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ----- -----------
----- ---------------- -------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
------- ------------------------------------------------------
------- ----------------------------------------------------------------------------------
-------
-------现在，我们已经在文档中引入了主题，接下来我们将添加一些插件。
npm install bespoke-bullets npm install bespoke-keys
我们安装了 bespoke-bullets 和 bespoke-keys，这两个插件可以在演示文稿中添加多个区域，并允许我们通过键盘或鼠标导航演示文稿。像这样使用它们。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ----- -----------
----- ---------------- -------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
----
--------- ------
--------- ------
--------- ------
-----
------- ------------------------------------------------------
------- ----------------------------------------------------------------------------------
------- ------------------------------------------------------------------------
------- ------------------------------------------------------------------
--------
-- ----------
--- ------- - ----------------------------
-- -------------
--- ---- - -------------------- -
----------------------- -- --------
----------------------------- -- ------
--
---------
-------
-------创建自定义主题和插件
Bespoke 还允许您创建自定义主题和插件，以满足特定需求。我们将从创建一个自定义主题开始。我们想要创建的主题是一个以纯 CSS 的形式提供了一些流行动画的演示文稿。首先，我们将在项目文件夹中创建以下文件结构。
bespoke/
themes/
meteor/
index.css我们首先需要创建一个 CSS 文件来定义主题的样式，我们可以定义所有演示文稿的常见样式，比如背景色、字体、字体大小等。现在，我们将演示文稿的样式索引到自己的 CSS 文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ----- -----------
----- ---------------- -------------------------------------------------
----- ---------------- --------------------------------
-------
------
----
--------- ------
--------- ------
--------- ------
-----
------- ------------------------------------------------------
------- --------------------------------------
--------
-- ----------
--- ------- - ----------------------------
-- -------------
--- ---- - -------------------- -
----------------------- -- --------
----------------------------- -- ------
--
---------
-------
-------最后，我们需要将主题的样式定义添加到 theme 中。我们可以通过简单地将样式写在 CSS 文件中，然后根据主题将样式包装。这里对您来说要求有一些 CSS 基础知识，在此不再赘述。最终的 CSS 文件将如下所示。
-- -------------------- ---- -------
------- ----------------------------------------------------
-- ---- --
---- -
----------------- -----
------ -----
---------- -----
------------ ---------- ------ ---------- ------ -----------
-
-- ---- --
------- --------------- -
--------------------------- ---
------------------------ ---
------------------- ---
---------------------------- ---------
------------------------- ---------
-------------------- ---------
---------------------------------- ---------------- --- --- ---
------------------------------- ---------------- --- --- ---
-------------------------- ---------------- --- --- ---
-
--------- -
----------------------- ------------
-------------------- ------------
--------------- ------------
-
---------- -
----------------------- ------------
-------------------- ------------
--------------- ------------
-
-- -- --
------------------ ----------- -
-- -
-------- --
------------------ -----------------
-
---- -
-------- --
------------------ --------------
-
-
--------------- ----------- -
-- -
-------- --
--------------- -----------------
-
---- -
-------- --
--------------- --------------
-
-
---------- ----------- -
-- -
-------- --
---------- -----------------
-
---- -
-------- --
---------- --------------
-
-
------------------ ----------- -
-- -
-------- --
------------------ --------------
-
---- -
-------- --
------------------ ------------------
-
-
--------------- ----------- -
-- -
-------- --
--------------- --------------
-
---- -
-------- --
--------------- ------------------
-
-
---------- ----------- -
-- -
-------- --
---------- --------------
-
---- -
-------- --
---------- ------------------
-
-现在，我们已经为演示文稿创建了自定义主题。接下来，我们将创建自己的插件。
我们想要创建的插件将使演示文稿更具交互性。我们将为演示文稿的每个元素添加一个点击事件，单击元素时，该元素将被高亮显示。
我们将在项目文件夹中创建以下文件结构。
bespoke/
plugins/
highlight/
index.js我们已经创建了一个名为 highlight 的文件夹，并在其中创建了一个 index.js 文件以定义我们的插件。接下来，我们添加以下代码。
-- -------------------- ---- -------
-------------- - -------- ---------- -
------ -------- ------ -
------------------- -------- ------- -
---------------------------- ------- -
---------------------------------------- ------------
--
--------------------------------------
--
--------------------- -------- ------- -
-----------------------------------------
--
-
-代码读起来有些复杂，所以我们稍微解释一下。
我们首先定义了一个函数，该函数通过传递一个选择器创建并返回一个插件。这些插件可以导致视觉效果或其他操作。
在插件中，我们引入了一个 activate 事件，这个事件在单击演示文稿的某个元素时触发。通过循环操作，我们高亮了演示文稿的当前活动元素。
接下来，我们实现了一个 deactivate 事件，该事件在某个元素失去活动状态时触发。
现在，我们已经为演示文稿创建了自定义插件。我们将演示如何使用我们创建的插件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ----- -----------
----- ---------------- -------------------------------------------------
----- ---------------- --------------------------------
-------
------
----
--------- ------
--------- ------
--------- ------
-----
------- ------------------------------------------------------
------- --------------------------------------
------- ------------------------------------------
--------
-- ----------
--- ------- - ----------------------------
-- -------------
--- ---- - -------------------- -
----------------------- -- --------
------------------------------ -- ------
--------------- -- ----------------
--
---------
-------
-------总结
在本文中，我们学习了使用 npm 包来安装 Bespoke 幻灯片库，并使用主题和插件改善演示文稿的方法。我们还演示了创建自定义主题和插件的示例，并分享了如何将它们添加到我们的演示文稿中。
Bespoke 提供了强大、灵活的 API，使用户能够以我们所选择的任何方式创建高度定制化的演示文稿。我希望此篇文章能够帮助您更好了解 npm 包，并更轻松使用 Bespoke 创建您自己的专业演示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/184012