如何制作幻灯片帖子？

[jrgong]

目前也在探索其他方案。理论上可以作为主题组件来实现，对吗？

例如，有一些可以将 Markdown 转换为幻灯片的库可供使用：

以下是最好的 GitHub 存储库，根据它们适应 Discourse 主题组件的难易程度进行排名。

1. Remark.js（强烈推荐用于 Discourse）

• GitHub: gnab/remark

• 工作原理： Remark 专为完全在浏览器中运行而设计。您向其提供一个 Markdown 字符串（幻灯片由 --- 分隔），它会动态生成演示文稿所需的 HTML/CSS。

• 为何适合 Discourse： 由于它不需要任何构建步骤，因此您可以轻松地通过 Discourse 主题组件加载 remark.min.js 脚本。您可以捕获用户帖子中的 Markdown 并将其直接传递给 Remark 引擎。

2. Reveal.js

• GitHub: hakimel/reveal.js

• 工作原理： Reveal.js 是网络演示文稿中的重量级选手。虽然它主要是一个 HTML 演示框架，但它内置了 Markdown 插件。

• 为何适合 Discourse： 它功能极其丰富（演讲者备注、PDF 导出、动画、数学排版）。它可以客户端运行，但比 Remark.js 要笨重得多。您需要将核心 Reveal 库、Markdown 插件和 Reveal CSS 主题加载到您的 Discourse 组件中。

3. Marp（Markdown 演示文稿生态系统）

• GitHub: marp-team/marp

• 工作原理： Marp 是 Markdown 幻灯片的新标准，利用“指令”（Directives）的概念直接在 Markdown 前置信息中处理 CSS 主题。

• 为何适合 Discourse： Marp 非常依赖 CLI 工具和 Node.js 进行渲染。但是，他们提供了 Marpit (@marp-team/marpit)，这是核心框架，可以解析 Markdown 并输出 HTML/CSS。要在 Discourse 中实现这一点，您需要使用 Webpack 或 Rollup 等工具将 Marpit 打包成客户端 JavaScript 文件，然后再将其作为主题组件上传。

---

如何将此作为 Discourse 主题组件实现

要将其中一个（如 Remark.js）重新用于 Discourse 主题组件，您需要使用 Discourse 插件 API 在特定 Markdown 块在页面上渲染之前拦截它们。

以下是构建它的高层蓝图：

1. 定义触发器： 决定用户如何告诉 Discourse 渲染幻灯片。一个好方法是使用特定的代码块语言，例如 ```slides 或 Discourse BBCode 包装，如 [wrap=slides]。

2. 加载库： 在主题组件的 about.json 中，包含 Remark.js 或 Reveal.js 的外部脚本，以便在用户访问论坛时加载它。

3. 装饰已渲染内容： 使用 Discourse JavaScript API (api.decorateCookedElement) 来查找每次帖子渲染时出现的触发器块。

4. 渲染： 当 API 找到 ```slides 块时，它会隐藏默认的代码块，创建一个新的 \u003cdiv\u003e 容器，并在该容器内使用代码块中的原始文本初始化幻灯片库。