如何在浏览器中克隆和编辑在线演示

Question

我有一个包含大量演示的 JavaScript 库。明年夏天我将教一组学生如何使用它。

我希望学生能够在浏览器中使用演示时克隆（即在网络上拥有自己的副本）和编辑演示。

这是为了避免让他们学习如何使用桌面以及开发服务器、git 和 github、节点、npm、捆绑、操作系统差异等的所有微妙之处。

该库位于 github Pages 存储库中，您可以在此处查看它。这是 demos 目录之一的示例。

这样做的好方法是什么？

• 也许是一个将存储库克隆为 github 页面并就地编辑/查看的噱头？
• 构建一个应用程序，根据演示获取它并让学生在浏览器中编辑/查看它？
• 在浏览器的开发工具中编辑/运行？
• 使用 CodePen 等 Playground 和 其他

我这里有一个类似的问题，但只是针对游乐场。

Answer 1

您建议的

CodePen 具有一些对此很有用的功能：

1. 您可以将每个演示的 HTML 内容复制并粘贴到新笔的 HTML 部分，并将导入更改为

   import * as util from 'https://cdn.jsdelivr.net/gh/backspaces/[email protected]/src/utils.js'

   等等，必要时更改版本号。^[[1]]
2. 您可以制作笔模板（笔编辑器 > 设置 > 模板）并复制设置中的 URL 供学生使用。
3. 即使没有 CodePen 帐户，学生也可以使用此链接编辑自己的演示副本。 这是我根据您的 ants 演示创建的模板链接。

---

[1]：

raw.githubusercontent.com

和 GitHub 页面分别由于内容类型和 CORS 不正确而无法使用 JavaScript 导入，但 JSDelivr 没有这些问题，但需要注意的是，它只会提供库的编号版本.