在前端开发中，使用巧妙的 UI 展示技巧可以让我们的网页更加生动有趣，今天我们来介绍一个 npm 包 reveal.js-breadcrumb，它可以在我们使用 reveal.js 制作 PPT 时添加面包屑导航，使得观众可以更好的掌握 PPT 的讲解。
安装 reveal.js-breadcrumb
reveal.js-breadcrumb 是供 reveal.js 使用的插件，因此我们首先需要安装 reveal.js。
npm install reveal.js
安装 reveal.js-breadcrumb
npm install reveal.js-breadcrumb
配置 reveal.js-breadcrumb
在 reveal.js 的配置文件中，我们需要添加 reveal.js-breadcrumb 的配置项，使其生效。
在配置文件中，找到 dependencies 数组，添加以下内容：
{
src: ‘node_modules/reveal.js-breadcrumb/plugin/breadcrumb/breadcrumb.js’,
async: true
}同时，我们还需要在配置文件中添加一个 footer 元素，它将用来展示面包屑导航。
-- -------------------- ---- -------
---- ---------------
---- ---------------
---- ---- -- ---- ------ ---
------
---- ---------------
---- --------------------
----- --------------------------------
----- --------------------------
------
---- ---------------------
----- ---------------------------------- - ----- --------------------------------
------
------
------集成示例
在示例中，我们定义了一个包含三个 slide 的 PPT，同时使用 reveal.js-breadcrumb 添加面包屑导航。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------- ------------
----- ---------------- ---------------------------------------------
----- ---------------- ----------------------------------------------
----- ---------------- --------------------------------------------------------------------------
------- -----------------------------------------------------
------- ---------------------------------------------------------------------------------
--------
-- --- ---------
-------------------
-- -- --------------------
------------- -
-
---- --------------------------------------------------------------------
------ ----
-
-
---
---------
-------
------
---- ---------------
---- ---------------
-------- --------------------- - ------- ---
----------- ------
-------- ----- -------
----------
-------- --------------------- - ------- ---
----------- ------
-------- ----- -------
----------
-------- --------------------- - ------- ---
----------- ------
-------- ----- -------
----------
------
---- ---------------
---- --------------------
----- --------------------------------
----- --------------------------
------
---- ---------------------
----- ---------------------------------- - ----- --------------------------------
------
------
------
------- -----------------------------------------------------
-------
-------在示例代码中，我们使用了 reveal.js-breadcrumb 提供的 data-breadcrumb 属性来指定每一页的面包屑导航，可以根据自己的需要进行修改。
总结
在本文中，我们学习了如何使用 npm 包 reveal.js-breadcrumb 来为 reveal.js 制作 PPT 添加面包屑导航。
使用 reveal.js-breadcrumb，我们可以更加清晰的展现 PPT 的架构，让观众更好的跟随我们的思路，将我们的演讲效果发挥到极致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e3177