们看一下以编程方式创建幻灯片的两个框架，Reveal.js和Eagle.js，看看它们是如何叠加的。

我最近使用了几个JS框架来制作幻灯片和最终的程序化视频。以下是我对两个框架 Reveal.js和Eagle.js的反馈。

介绍

正如我之前在Faveeo写的那样，我们正在努力从策划文章中制作原创内容。团队的一个想法是从书面文章中制作视频，以最大限度地提高读者的参与度，并生成新鲜，易于理解的材料。

我不得不探索以编程方式制作视频的解决方案和我想出的一个解决方案，即构建有吸引力的幻灯片。幻灯片必须具有足够的吸引力，以吸引读者并给他们留下他们正在观看视频的印象。

通过团队，我们探索了几种解决方案：

• 使用JS生成幻灯片并记录它们。
• 使用ffmpeg 和以编程方式构建视频 imagemagick。
• 探索可用的SaaS平台来编写我们的视频。
• 生成Adobe Premiere兼容格式。

长话短说，除了第一个解决方案外，所有解决方案都成了噩梦。

我一直在使用两个框架来构建我的幻灯片，我保留了Eagle.js

Reveal.js

Reveal.js是一个很酷的框架，允许用户使用HTML / CSS和一些JavaScript来构建自己的幻灯片。为了帮助初学者，它在https://slides.com/上提供了一个在线编辑器。

这篇文章不是教程，因此，这是我对我的用例的反馈。

好吧，Reveal.js非常受欢迎，很容易在网上找到很多例子。

WTF：我们如何开始？

我第一次使用Reveal.js时有这种反应，直到我明白我必须克隆一个git项目来创建我的第一个模板。我遇到的第二个问题是找不到代码，直到我发现单个HTML页面包含幻灯片放映的所有代码。

丰富的功能和出色的文档

Reveal.js有一系列令人印象深刻的功能，自动播放，录音，音频等等，它对大多数人来说都是完美的。

文档也很棒，你会发现很多例子。

解决方案的缺点

Reveal.js有一些缺点：

• 它是纯粹的，香草的JS，虽然我能够使它与Vue.js友好，但它一直非常hacky。
• 当幻灯片出现时，我无法触发文本动画。
• 我必须在生成新幻灯片后重新启动组件，因为我无法控制Reveal.js生命周期。

设计缺陷

Reveal.js带有一个相当聪明的系统，可以正确定位幻灯片项目并计算它们的大小。

但是，如果你想为你的幻灯片制作一个绝对的设计，那就是一个纯粹的噩梦，即底部的元素，左上角的图片等。

我一直在努力获得我的第一个视频原型，其中包含Reveal.js附带的CSS选项以及我们自定义模板的方式。

Eagle.js

Eagle.js是一个由Vue.js提供支持的最新JS框架，因此允许开发人员将幻灯片写为Vue组件。

我一直对这个框架感兴趣，因为它允许我的幻灯片与Vue的原生集成以及可能更容易的自动生成。

以下是我对Eagle.js的反馈。

Vue

我一直是Vue.js的大力支持者，并且使用基于它的库让事情变得非常简单。我花了几个小时将Reveal.js幻灯片移植到Eagle.js。

文档很差

是的，文档很差，即使Zulko提供了几个很好的例子。但是所有逻辑和脏东西都隐藏在代码中。好消息？只有两个小代码文件。

没有特色

这些组件事实上 是缺少的，但是缺少一大堆功能，例如自动播放。

CSS

框架附带一个主题，但一切都可以轻松覆盖。

易于扩展

我扩展了框架，允许我进行一些调整和设计选择（https://github.com/faveeo/eagle.js）。

结论

我保留了Eagle.js。虽然该框架具有较少的功能和较差的文档，但我们可以轻松扩展设计或功能，这使我能够创建更好的幻灯片和视频。

译自： https://opensource.com/article/18/8/markdown-html-publishing

作者： Peter Cheer

译者： geekpi

用这个有用工具从 Markdown 文件创建一个基础的网站。

有很多理由喜欢 Markdown，这是一门简单的语言，有易于学习的语法，它可以与任何文本编辑器一起使用。使用像 Pandoc 这样的工具，你可以将 Markdown 文本转换为 各种流行格式 ，包括 HTML。你还可以在 Web 服务器中自动执行转换过程。由 TimoD?rr 创建的名为 MDwiki 的 HTML5 和 JavaScript 应用可以将一堆 Markdown 文件在浏览器请求它们时转换为网站。MDwiki 网站包含一个操作指南和其他信息可帮助你入门：

在 Web 服务器内部，基本的 MDwiki 站点如下所示：

我将此项目的 MDwiki HTML 文件重命名为 START.HTML。还有一个处理导航的 Markdown 文件和一个 JSON 文件来保存一些配置设置。其他的都是网站内容。

虽然整个网站设计被 MDwiki 固定了，但内容、样式和页面数量却没有。你可以在 MDwiki 站点 查看由 MDwiki 生成的一系列不同站点。公平地说，MDwiki 网站缺乏网页设计师可以实现的视觉吸引力 —— 但它们是功能性的，用户应该平衡其简单的外观与创建和编辑它们的速度和简易性。

Markdown 有不同的风格，可以针对不同的特定目的扩展稳定的核心功能。MDwiki 使用 GitHub 风格 Markdown ，它为流行的编程语言添加了格式化代码块和语法高亮等功能，使其非常适合生成程序文档和教程。

MDwiki 还支持 “gimmick”，它增加了如嵌入 YouTube 视频和显示数学公式等额外功能。如果在某些项目中需要它们，这些值得探索。我发现 MDwiki 是创建技术文档和教育资源的理想工具。我还发现了一些可能不会立即显现出来的技巧和 hack。

当部署在 Web 服务器中时，MDwiki 可与任何现代 Web 浏览器一起使用。但是，如果你使用 Mozilla Firefox 访问 MDwiki，那么就不需要 Web 服务器。大多数 MDwiki 用户会选择在 Web 服务器上部署完整的项目，以避免排除潜在用户，但只需使用文本编辑器和 Firefox 即可完成开发和测试。任何现代浏览器都可以读取加载到 Moodle 虚拟学习环境（VLE）中的完整的 MDwiki 项目，这在教育环境中非常有用。 （对于其他 VLE 软件，这可能也是如此，但你应该测试它。）

MDwiki 的默认配色方案并非适用于所有项目，但你可以将其替换为从 Bootswatch.com 下载的其他主题。为此，只需在编辑器中打开 MDwiki HTML 文件，找到 extlib/css/bootstrap-3.0.0.min.css，然后插入下载的 Bootswatch 主题。还有一个 MDwiki gimmick，让用户在浏览器中载入 MDwiki 后，选择 Bootswatch 主题来替换默认值。我经常与有视力障碍的用户一起工作，他们倾向于喜欢高对比度的主题，在深色背景上使用白色文字。

MDwiki、Markdown 文件和静态图像可以用于许多目的。但是，你有时可能希望包含 JavaScript 幻灯片或反馈表单。Markdown 文件可以包含 HTML 代码，但将 Markdown 与 HTML 混合会让人感到困惑。一种解决方案是在单独的 HTML 文件中创建所需的功能，并将其显示在带有 iframe 标记的 Markdown 文件中。我从 Twine Cookbook 知道了这个想法，它是 Twine 交互式小说引擎的支持站点。Twine Cookbook 实际上并没有使用 MDwiki，但结合 Markdown 和 iframe 标签开辟了广泛的创作可能性。

这是一个例子：

此 HTML 将显示由 Markdown 文件中的 Twine 交互式小说引擎创建的 HTML 页面。

<iframe height="400" src="sugarcube_dungeonmoving_example.html" width="90%"></iframe>

MDwiki 生成的站点结果如下所示：

简而言之，MDwiki 是一个出色的小应用，可以很好地实现其目的。

via: https://opensource.com/article/18/8/markdown-html-publishing

作者： Peter Cheer 选题： lujun9972 译者： geekpi 校对： wxy

本文由 LCTT 原创编译， Linux中国 荣誉推出

点击“了解更多”可访问文内链接