近年来，JavaScript 演示文稿框架激增。这些框架使用 HTML5、CSS3 和 JavaScript 来创建可在任何现代 Web 浏览器中查看的演示文稿幻灯片。 过去受限于使用 PowerPoint 的日子已经一去不复返了，如今在创建演示文稿时，有大量的工具可供选择。
您可以选择许多不同的演示文稿框架，每个框架都有其自身的优点和缺点。 去年，Opensource.com 社区版主 Luis Ibáñez 介绍了 reveal.js，这是一个非常不错的框架，可以创建精彩但相当传统的演示文稿。 几个月前，我 撰写了关于 impress.js 的文章，它可以创建类似 Prezi 的演示文稿，这些演示文稿可以在三个维度上旋转、缩放和调整大小。 然而，impress.js 是一个非常复杂的工具。 今天，我将与您分享 Bespoke.js，这是一个复杂度与 impress.js 截然相反的演示文稿框架。
Bespoke.js
Mark Dalgleish 的 Bespoke.js 是一个超轻量级的演示文稿框架（根据 MIT 许可证发布），可以通过插件进行扩展。 核心库的最小化版本仅为（大约）一千字节。 这个核心库提供了创建基本演示文稿所需的功能，而大量的插件提供了各种各样的额外功能。 诚然，您几乎肯定需要至少一个插件，因为使用键盘输入导航演示文稿是插件提供的功能。 也就是说，Bespoke.js 加上键盘输入插件仍然比大多数 JavaScript 演示文稿框架小得多。
官方 Bespoke.js 插件提供了各种各样的功能。 除了上述用于键盘交互的插件外，还有用于触摸输入、响应式缩放、动画项目符号列表、代码示例的语法突出显示以及其他一些高级功能的插件。 还有 两个官方 Bespoke.js 主题（它们基本上是更改演示文稿显示方式的插件），Cube 和 Voltaire。 这两个主题都很精致，并且不太花哨，尽管您可能想要更改颜色以满足您的需求，但它们都非常实用。
Bespoke.js 插件和主题，以及 Bespoke.js 本身，可以使用 node.js 的 npm 或 Twitter 的 Bower 安装。
要使用 npm 安装 Bespoke.js 或插件
npm install bespoke 或 npm install bespoke-[plugin]
要使用 bower 安装 Bespoke.js 或插件
bower install bespoke.js 或 bower install bespoke-[plugin]
也可以通过克隆项目的 GitHub 存储库，或从项目的 GitHub 页面下载文件来获取 Bespoke.js 及其插件。 但是，有一种更简单的方法可以开始使用，那就是 Bespoke.js Generator 项目。
Bespoke Generator
开始制作 Bespoke.js 演示文稿的最快方法是使用 Bespoke.js Generator。 生成器将允许您设置演示文稿的标题，并将引导您完成一系列关于您想要使用哪些插件的问题。 然后它会自动下载所有必需的 Bower 组件和 Node.js 模块。 生成器完成后，您就可以开始编辑演示文稿了。
要安装 Bespoke.js Generator
1. 如果您没有安装 npm，请从 node.js 站点下载并安装，或者使用您的发行版的软件包管理器安装 npm。
2. 安装 npm 后，运行：npm install -g generator-bespoke，使用具有足够权限安装软件包的帐户（例如，root。）
要创建演示文稿，请创建一个新目录，然后更改到该目录
mkdir presentation-directory
cd presentation-directory
然后启动 Bespoke Generator 并通过运行以下命令创建您的演示文稿
yo bespoke
您需要编辑的所有文件都位于 src 子目录中。 Bespoke.js 演示文稿的基本结构和内容是通过编辑 index.jade 文件中的 Jade 标记创建的。 样式通过修改 styles/main.styl 文件进行编辑，该文件使用 Stylus 来简化 CSS 规则的编写。 最后，scripts/main.js 文件是您可以编辑演示文稿 JavaScript 的位置。
要构建演示文稿，或创建带有 LiveReload 的本地服务器，您将使用 gulp.js。 以下命令将允许您构建演示文稿的静态副本、启动本地服务器或将您的项目推送到 GitHub Pages（假设演示文稿已设置为 Git 存储库，并且“origin”指向 GitHub。）
要构建静态站点（文件最终位于 dist 子目录中）：gulp
要推送到 GitHub Pages：gulp deploy
要启动本地服务器进行测试：gulp serve
对于想要创建插件和主题的高级用户，Bespoke.js Plugin Generator 和 Bespoke.js Theme Generator 也可用。 与所有其他官方 Bespoke.js 项目一样，它们均根据 MIT 许可证发布。
Strut
我之前在关于 impress.js 的文章中介绍了 Strut，但它也可以创建 Bespoke.js 演示文稿。 Strut 是一款基于 Web 的演示文稿创建工具，其行为非常类似于传统的演示文稿软件。 虽然功能不如独立的演示文稿软件（例如 PowerPoint）那么完整，但 Strut 具有足够的功能，可以使创建演示文稿成为一个快速而简单的过程。 界面左侧允许您创建和排序幻灯片。 屏幕顶部的工具栏允许您添加文本、形状和图像，以及嵌入视频和网站。 您可以快速轻松地更改单个幻灯片或所有幻灯片的背景颜色。 也可以以相同的方式更改幻灯片后面画布的背景颜色。 对于高级用户，Strut 支持向对象添加自定义 CSS 类，并允许您从 Strut 内部编写新的 CSS 规则。 也可以使用 Markdown 语法向幻灯片添加文本，供喜欢编写演示文稿而不是使用拖放工具的用户使用。
在 Strut 中创建 impress.js 演示文稿和 Bespoke.js 演示文稿之间的唯一区别是当您进入 Strut 的概览模式时会发生什么。 对于 impress.js，它允许您在 3D 画布上定位和旋转幻灯片，而 Bespoke.js 的概览模式允许您从几种侧面过渡中进行选择。 有八种不同的过渡效果，从幻灯片之间的简单淡入淡出到 Cover Flow 和旋转立方体选项。 所有过渡效果都很好看，而且相当低调。 使用它们中的任何一个都会为演示文稿带来一些润色，而又不会过于花哨以至于过渡效果最终会分散演示文稿内容的注意力。
您可以使用示例网站试用 Strut，或者您可以从 GitHub 克隆或下载该项目，并使用 Grunt 构建 Strut 以安装在您自己的服务器上（或在本地运行）。 然而，新版本的 Strut—Strut 2.0—正在私有存储库中开发，预计将于 10 月初公开发布，敬请关注。
Strut 的创建者 Matthew Crinklaw-Vogt 已根据 GNU Affero 通用公共许可证第 3 版发布了 Strut。
您有最喜欢的 JavaScript 演示文稿框架吗？ 如果有，请在下面的评论中分享。
2 条评论