Inspire.js 技术文档

1. 安装指南

使用 CDN

将以下代码片段添加到 HTML 文件中：

<script src="https://inspirejs.org/inspire.js"></script>

或者使用 ES6 模块导入：

import Inspire from "https://inspirejs.org/inspire.mjs";

使用 NPM

首先，通过命令行安装 Inspire.js：

npm install inspirejs

然后，在 HTML 文件中引入：

<script src="node_modules/inspirejs.org/inspire.js"></script>

或者使用 ES6 模块导入：

import Inspire from "node_modules/inspirejs.org/inspire.mjs";

如果是使用打包工具，则可以直接导入：

import Inspire from "inspirejs.org";

2. 项目使用说明

快速开始

1. 复制并重命名 blank.html 文件。
2. 复制 talk.css 和 theme.css 文件。
3. 在 talk.css 中添加自己的样式。
4. 在 blank.html 中添加自己的内容。

3. 项目 API 使用文档

在所有导入加载完成后运行代码

使用以下代码：

await Inspire.importsLoaded;
// 在导入加载完成后运行的代码

注意：await 需要在异步函数内部使用，否则会报错。

在特定插件加载后运行代码

使用以下代码：

await Inspire.importsLoaded;
await Inspire.plugins.loaded.PLUGIN_ID.loaded;
// 在特定插件加载并执行后运行的代码

或者：

await Inspire.loadPlugin(PLUGIN_ID);
// 在特定插件加载并执行后运行的代码

在特定幻灯片显示时运行代码

可以通过 slidechange 钩子实现：

Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id") {
		// 要运行的代码
	}
});

或者通过事件监听器实现：

document.addEventListener("slidechange", evt => {
	if (Inspire.currentSlide.id === "slide-id") {
		// 要运行的代码
	}
});

在特定幻灯片首次显示时运行代码

可以通过 slidechange 钩子实现：

Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id" && env.firstTime) {
		// 要运行的代码
	}
});

或者通过事件监听器实现：

$("#slide-id").addEventListener("slidechange", evt => {
	// 要运行的代码
}, {once: true});

在特定幻灯片显示后运行代码

可以通过 slidechange 钩子实现：

Inspire.hooks.add("slidechange", env => {
	if (env.prevSlide.id === "slide-id") {
		// 要运行的代码
	}
});

或者通过事件监听器实现：

document.addEventListener("slidechange", evt => {
	if (evt.prevSlide.id === "slide-id") {
		// 要运行的代码
	}
});

4. 项目安装方式

请参考上述的安装指南部分，选择适合您项目需求的安装方式。无论是通过 CDN 还是 NPM，都可以轻松引入 Inspire.js 并开始使用。