一个轻量、可独立分发的演示文稿(Slides)框架。
每一页 slide 都是一份独立的 HTML 文件 —— 既能被入口页 index.html 串成完整 Present,也能单独打开访问。原生 ES Modules + importmap。
- Slide 即文件:
slides/*.html每页一个文件,单独打开即为单页演示 - Arrow Popover:
class="pop"+data-pop一键挂载箭头气泡,自动 east/west/north/south 定位 - importmap 合并:入口与各 slide 的 importmap 在加载时自动合并
- lazy 懒加载:
data-lazy="key"×lazies.slide(key, fn)按需加载脚本/资源 - 离/在线感知:
web-or-not属性切换在线/离线分支 - 小工具 API:
window._0xMOz提供q$ / q$$ / lazy / lazies
本項目是使用 https://mindon.dev/biu/ 工具編譯的結果。
可以安裝 biu 之后運行 biu --serve 提供網頁服務,其他任何支持靜態html服務的工具也都可以。
然後訪問以下網址:
http://localhost:3000/tour.html
涵盖:
- 框架简介与特性
- 如何编写
index.html - 如何编写 slide 内容页(importmap、
data-lazy、lazies.slide、window._0moz0_) - 如何配置 Arrow Popover
src/
├─ assets/ 静态资源(CSS / 字体 / SVG)
├─ slides/ 各演示页
│ └─ tour/ 指引子页(00-cover ~ 04-popover)
├─ present.n8e91kk6.js 核心运行时
└─ tour.html 使用指引入口
<script src="./present.n8e91kk6.js"></script>
<slide topic="封面" data-src="./slides/about.html"></slide>
<slide topic="更多" data-src="./slides/more.html"></slide><!doctype html>
<html>
<head>
<script type="importmap">{ "imports": { /* ... */ } }</script>
<script src="../present.n8e91kk6.js"></script>
</head>
<body>
<slide topic="slide-center pop" data-pop="#tip"></slide>
<div id="tip" class="arrow" popover>...</div>
</body>
</html>- 触发:宿主元素加
class="pop",data-pop="#popoverId" - 锚点:
<div id="popoverId" class="arrow" popover>...</div> - 自动定位:
east/west/north/south,可用 CSS 变量--pop-x / --pop-y / --pop-alpha微调
MIT