随着前端技术的不断发展，我们越来越离不开 npm 包来扩展我们的项目。在前端开发过程中，我们经常需要创建演示和展示文档来展示项目的功能和设计，而 bespoke-meta-markdown 就是一款很好用的 npm 包，用于创建类似于幻灯片的文档展示。
bespoke-meta-markdown 是什么？
bespoke-meta-markdown 是一种基于 Markdown 的幻灯片生成器，在显著简化了幻灯片生成的同时又保持了原有 Markdown 的易用性。利用 bespoke-meta-markdown ，我们可以非常轻松地编写出漂亮,具有交互性的 HTML5 页面或演示，可以实现类似于 Slidebean 的效果。
如何使用 bespoke-meta-markdown？
接下来，我们将一步步介绍如何使用 bespoke-meta-markdown 来创建自己的幻灯片文档。
第一步：安装 bespoke-meta-markdown
使用 npm 安装 bespoke-meta-markdown:
--- ------- --------------------- ----------
第二步：创建一个 Markdown 文件
在你的项目中创建一个 Markdown 文件，并从头开始编写你的演示内容。 在每个幻灯片的顶部，你需要添加 bespoke-meta-markdown 用来识别幻灯片的元数据。这样，bespoke-meta-markdown 应该能够识别并对幻灯片执行相应操作。
举个例子，下面是一个包含幻灯片元数据的 markdown 文件。
--- ------ -- ----- ------------ ------ --------------------- --- - ----- - ------- --- ----- -- --- - ----- - ------- --- ----- -- --- - ----- - ------- --- ----- --
这里， --- 三个连续破折号之间的内容表示这是一个“媒介标题”，可以理解为定义幻灯片的元数据。 每一行 --- 要结束，幻灯片的内容会在两行 --- 之间显示。
在上面的示例中，我们定义了三个幻灯片，每个幻灯片都是一个 Markdown 标题和内容的组合。
第三步：引入 bespoke-create
引入 bespoke-create 以创建 bespoke 实例，这是创建幻灯片的核心工具。
------ ------ ---- ----------------- ------ --------- ---- ------------------------ ----- ---- - ----------------- - ------------ ---
正如在上述示例中所看到的， const deck 是一个 HTML 元素，其中包含在上面所定义的幻灯片元数据之前的幻灯片内容标记。
第四步： 初始化幻灯片
调用 bespoke-core 并将其初始化以启动幻灯片。
------ ------- ---- --------------- ------ -------- ---- ------------------------- ------------------ - ----------- ---
这创建了一个具有 bespoke-meta-markdown 和 bespoke-theme-vertical 的 bespoke 实例。
第五步：运行项目
运行项目以查看幻灯片文档并享受其交互和视觉展示效果。
案例示例
下面是一个示例文档，展示了 bespoke-meta-markdown 的用法以及幻灯片的不同演示。
--- ------ -- ----- ------------ ------ --------------------- --- - ------------ - -- ------- ------------ ---- --- ---- ------ - ---- -- ----- ---- --- -------- - ----- - - ----- - - ----- - --- - ----- -- ----- - -- ---- -- ----- - ----- ----- ----- --- ----- ----------- ---------- ----- ------ -- ---- --- --- --------- ---------- ----- -------- ------ -- --- --------- --- ------- ----- ------- ----- - ---- -- - ---- - ---- -- ------- ---- --- - ----- -- ----- - -- ---- -- ----- - ----- -------- ------ -- --- --------- --- ------- ----- ------- --------- - ---- - - ---- - - ---- - --- - ----- -- ----- - -- ---- -- ----- - -------- -- ----- -- --------- ----- -- ------ -------- ------- ------- ------- ------ ----- ----- ----- ------ - ----- ----- ------------------ -------------
Summary
The Most Important Thing
Here is what you learned today:
- Something important
- Something else important
- More important content
Conclusion
Thanks for listening!
Feel free to contact me if you have any questions or feedback.
-- -- ------------ --------------------- ------------------------- ------------------- ----- ----------------------------------------------------------------- -- -- ------------------------------ --------------------- --------------------------- --------------------- -------------------------------------------------------- --------------------------------------------------------------------------- ---------- -----------------------------------------------------------------------------------------------------------------------