显示- 模板
这是一个帮助软件包,用于简化仅使用Markdown文件的relection.js演示文稿的生成. 它包含一组(可选的)显示插件来简化讲座的创建.
它主要由我自己使用,因此它相当有见解,并对讲座的结构作出肯定的假设。 标记下的文件应该遵循一定的命名模式 :
- 单关 :
00 - Introduction.md, (中文(简体) ),01 - Bla.md等 (中文(简体) ). - 两级:
00 - Introduction.md, (中文(简体) ),01 - Topic 1.md, (中文(简体) ),01a - Sub-Topic 1.md, (中文(简体) ),01b - Sub-Topic 1.md, (中文(简体) ),02 - Topic 2等 (中文(简体) ).
dennis_build 将标记下的文件编译成完全静态 dist/ 文件夹( 输入、 修改/ 隐藏资产; 预降标记以显示) <section> HTML在构建时——真实的显示标记下插件运行在jsdom中,因此输出与以前的运行时解析完全相同——并且页面被分解. 其结果可以在任何网络服务器上发布,不需要服务器侧组件. 标记下解析器选项默认为 { smartypants: true } 并被击倒 "farberg": { "markdown": { ... } } 在演讲中 package.json。 。 。 .
所需经费和安装
为了利用这个项目, 节点.js和npm 需要这样做.
创建新讲座 :
- 创建新文件夹并初始化一个空节点.js项目(例如,
npm init --yes(中文(简体) ) - 将此软件包添加为依赖( E)
npm i @farberg/reveal-template(中文(简体) ) - 阅读以下文件
使用量
- 创建文件
package.json描述您的演示文稿(例如, 像这样 —— 说title, (中文(简体) ),authors财务报告和审定财务报表homepage最终出现在标题幻灯片,QR代码和合并PDF名中. - 创建您的演示文稿 标记 (见 此文件 (以举例而言).
- 可选创建
deck.config.js导出{ revealOptions, mermaid }用于特定甲板插件/配置. - 运行
npx dennis_build- 这产生dist/数字 :- 在漂亮的 URL 上每个甲板一页(
02a - Immutable Infrastructure.md- > (中文)/02a-immutable-infrastructure,无扩展的 URL 需要小重写规则,见下文),加 a<slug>-print每个甲板的变体 index.html转向第一甲板toc.json,显示托克插件提供的机器可读目录,其中包含每个甲板上的内容覆盖部分- 散列/减少JS/CSS
assets/静态img/, (中文(简体) ),code/, (中文(简体) ),data/复制为-is(可配置通过"farberg": { "assetDirs": [...], "assetExclude": [...] }内package.json(中文(简体) )
- 在漂亮的 URL 上每个甲板一页(
其他模式 :
npx dennis_build dev– Vite dev 服务器,带有正同路线并自动重载- 可选的 Dev 钩子在匹配文件更改时运行命令,然后重新装入浏览器,例如从PowerPoint源重生 SVG :
"farberg": { "devHooks": [{ "watch": "^img/[^~][^/]*\\.pptx$", "run": "npm run img" }] }内package.json(单位:千美元)watch是 repo- relative 路径上的 regex; 更改被解开, 钩永远不能一次两次运行)
- 可选的 Dev 钩子在匹配文件更改时运行命令,然后重新装入浏览器,例如从PowerPoint源重生 SVG :
npx dennis_build --watch- 重建dist/每次更改(使用任何静态服务器)dist/,例如VS代码Go Live)npx dennis_build --toc-only——刷新 PDF 链接dist/toc.jsonpDF 生成后npx dennis_serve_dist dist— 有无扩展 URL 的微小静态服务器( CI 用于 PDF 渲染)
Apache 重写无扩展 URL 的规则( 输入) .htaccess,将其复制到 dist/:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+)$ $1.html [L]
插件
点击文档链接
测试和工作
| 名称 | 说明 |
|---|---|
| (原始内容存档于2018-09-21) (英语). outlook-plugin-dir-tree.js | 从已存在的文件中创建一个zip以下载并显示文件树 |
| example.js (英语) | 将代码示例作为目标元素的内置HTML |
| 显示- 插件- 前缀- 有- base- url.js | 将页面基址前缀为元素的内文本。 可选转换为内置代码. |
| (原始内容存档于2019-10-12). express-plugin-show-atstribution.js | 在右下角显示信用 |
| (原始内容存档于2017-10-10) (中文(简体) ). outlook-plugin-show-side-spippets.js | 显示从文件中装入的代码片段( 开始/ 结束标记, Nth 发生, 可选包含标记行) |
| (原始内容存档于2019-10-12) (英语). express-plugin-show-qr-code.js | 在幻灯片上显示 QR 代码和演示文稿链接 |
| (原始内容存档于2018-10-21) (英语). outlook-plugin-show-title.js | 自动创建标题幻灯片 |
| (原始内容存档于2017-10-21) (英语). express-plugin sshow-toc.js | 从 toc.json 由 dennis_build |
| (原始内容存档于2019-09-31) (英语). outlook-plugin-navigation.js | 下行和导航:主流幻灯片编号、箭头到垂直幻灯片、菜单级别、密钥A和O |
| (原始内容存档于2019-03-27) (英语). express-plugin-course-profile.js | 课程简介:甲板标题幻灯片和练习幻灯片上的徽章,按键取取取器 U (见课程简介) |
| 显示- 插件内容. js | 密钥上的内容覆盖 I 或者说 ?contents: 议程,每个甲板的一级和二级部分为可滚动页(见内容重叠) |
不起作用、未经试验或正在开发
| 名称 | 说明 |
|---|---|
| 显示- 插件- 修改- font- 大小. js | 添加密钥绑定 + 财务报告和审定财务报表 - 更改基准字体大小 |
| (原始内容存档于2013-10-12) (英语). outlook-plugin-toggle-solutions.js | 显示隐藏解决方案 |
代码示例文件
添加 data-files 到嵌入的代码, 以显示实例工作的文件的倒塌的树, 在构建时从文件系统构建 : <a data-code="bash" data-begin="# Begin demo" data-end="# End demo" data-link data-files href="code/x/steps/demo.sh">demo.sh</a>。如果没有一个值,则该目录是脚本运行在其中的目录(cd "$(dirname "$0")/.." 脚本中指其目录的母目录,否则指其自己的目录; data-files="code/x" 明确设置. 只有 git 会公布的文件被列出( 没有被忽略的文件), 减 farberg.assetExclude。点击打开树(链接、视图、zip下载).
章 次 概 况
打开 <div data-chapter-overview></div> 在幻灯片上; 构件替换为每个幻灯片有一个条目,该条目有一个 data-summary,按幻灯片顺序,每个链接到其幻灯片(标题、灰色注释和子条目是链接,在悬浮上突出显示): <!-- .slide: data-name="Object Storage" data-summary="Object storage with an S3 API (SeaweedFS)" -->。 。 。 . data-level (默认 1 ): 第 1 级是幻灯片上类似纯文本的段落, 第 2 级是它下面的列表项目, 第 3 级是嵌入列表项目. 尾声 (...) 以注释形式显示。 钥匙 O 跳转到此幻灯片( e)ESC 仍然打开幻灯片概览, A 议程.
课程简介?profile=(中文(简体) )
一个讲座站点可以提供几个不同议程的课程。 开始链接到 ?profile=<id> (例如:. https://example.org/lecture/01-introduction?profile=wdski24将ID存储在浏览器的本地Storage; ?profile=none 将取去. 简介是 profiles/<id>.json 已复制到 dist/profiles 因此,议程可以在学期中改变,而没有新的链接:
{
"title": "WDSKI24",
"decks": { "03f": "prior", "04b": { "status": "core", "date": "2026-11-23" }, "04d": { "status": "core", "sections": { "Access Control": "skip", "Supply Chain": "optional" } }, "04e": "skip", "05b": { "status": "optional", "date": "2026-12-14" } },
"exercises": { "tilt": "optional", "keycloak": "skip" }
}
地标键为数字加子字母(04a, (中文(简体) ), 05 对于分章甲板,练习键为幻灯片 ID。 状态 : prior (先入为主), core (违约), optional, (中文(简体) ), skip1. 议程data-toc-src) 灰色出出先前的知识,以斜体显示可选的甲板,击出跳出并添加了日期栏;标题幻灯片和列出的练习幻灯片获得一个小徽章. 没有任何变化.
sections 在甲板条目中将甲板限制在甲板的某些部分: data-name 区域的第一个幻灯片(菜单栏中的名称,编号类似 Exercise 2 当它发生几次时, 一节结束于同一或更高位置的下一个命名幻灯片 data-level中 skip 从演示文稿中删除(幻灯片、菜单项、章节概览行;没有幻灯片数字计算)。 与 prior 或者说 optional 片段的每张幻灯片都获得徽章,其菜单项和章节概览行被灰色去除(prior)或用斜体(optional) (中文(简体) ).
钥匙 U 打开带有所有配置的拾取器( 构建列表) profiles/*.json 其名称为: toc.json)和"完整议事日程";选择一个设置像起始链接,并重新加载页面.
目录 重叠( A)I, (中文(简体) ), ?contents(中文(简体) )
钥匙 I 打开整个讲座的紧凑摘要,作为幻灯片上可滚动的一页:议程的每一页都有 data-summary 其一级和二级幻灯片(其章节概述的行). dennis_build 把它们收集起来 toc.json (单位:千美元)sections (每层甲板). 每行链接到它的幻灯片, I或关闭按钮关闭它.
?contents 在 URL 中打开其负载,同时打开一个课程简介,例如:. https://example.org/lecture/?profile=wdski24&contents (起始页面在重定向时保留查询). 带有剖面图,甲板和分块遵循其状态: 先前的知识被灰化出,可选用斜体字,跳过.
终端记录(asciinema)
装入录音带 <asciinema data-conf='{ "cols": 120, "rows": 30, "theme": "dhbw-light", "autoPlay": true }' src="img/demo.cast" />· ; data-conf 传递到 asciinema 播放器。除玩家内置主题外,模板还提供 dhbw-light (黑色为白色,调色板可读为白色;见 css/asciinema-主题.css) (中文(简体) ).
转换为 PDF
运行 npx dennis_build && npx dennis_generate_pdfs 将提交 dist/pdfs/<slug>.pdf 每甲板加上一个PDF(以Pppeteer为基础;CI使用Gotenberg对同一种软件) <slug>-print 页取而代之.
地方发展
要在这个仓库上发展:
- 检查此寄存器( N)
git clone https://github.com/pfisterer/reveal-template.git(中文(简体) ) - 运行
npm install以安装所需的依赖性 - 在演讲中重播,运行
npm link @farberg/reveal-template,然后使用npx dennis_build dev那边
发布新版本( 仅保存者)
# Bump version in `package.json`
# Run this command to publish on npm
npm login && sleep 3s && npm publish --access public