3

我正在开发使用 D3.js 来显示一些可视化的应用程序。如何在 GitHub 上显示 HTML 文件（使用 JS）的预览？我需要每个提交（历史）的演示，而不仅仅是最新版本。

我使用捆绑的 JSON 数据和来自 CDN 的链接 D3.js 库将我的应用程序的静态版本生成为 HTML+JS，因此我只需要提供 HTML+JS。没有后台。

GitHub 页面

我的第一个想法是使用 GitHub Pages （这是流行的答案#1，#2）。这很好，但是这样我可以只为最新版本显示演示（如果我为分支docs上的目录设置 gh-pages，则为最新提交master）或仅针对一个特定版本（如果我为gh-pages分支设置 gh-pages 并将某个版本推送给它）。

我需要为 repo 中的所有提交显示演示（预览 HTML）。我希望能够看到以前版本的应用程序的演示（预览以前的提交）。

生成图像（截图）

我可以做运行 D3.js 应用程序的屏幕截图并将图像附加到 repo 并显示在README.md. 当有人打开以前的提交时，他会看到以前版本的应用程序。这就是我要的。

但是对于静态图像，我失去了 D3.js 的优势。我的应用程序是动态的（您可以缩放、单击图表、选择要显示的数据、显示工具提示等）。

HtmlPreview 或 RawGit

我发现（#1、#2）服务可以直接从 GitHub 提供 HTML 文件：

有了这个，我可以链接到特定文件（甚至是文件的特定版本！就是这样！）并通过 HTMLPreview/RawGit 代理来显示预览。

但是我有两个问题：

1. RawGit 的作者说我不应该使用这个工具来创建公共演示（我只是想做！）：

不要在示例代码或公共演示中使用开发 URL，因为人们经常复制和粘贴该代码并在生产应用程序中使用它，而没有意识到他们需要更改 URL。然后他们向 RawGit 发送过多流量，受到限制，他们的应用程序崩溃。

（我想这同样适用于 HtmlPreview。）

2.如何在本次提交中动态链接到文件？（我想在 中写演示链接README.md。）

当我创建这样的链接时：

https://rawgit.com/mkczyk/test-experiment/master/index.html
https://htmlpreview.github.io/?https://github.com/mkczyk/test-experiment/blob/master/index.html

它将是最新版本的链接（当有人进入旧提交时，他将看到最新版本而不是特定版本的演示）。

所以我必须创建与 SHA 的链接，如下所示：

https://rawgit.com/mkczyk/test-experiment/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html
https://htmlpreview.github.io/?https://github.com/mkczyk/test-experiment/blob/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html

但是我怎么知道在我创建提交之前会生成什么 SHA？我想README.md在同一个提交中创建提交和写入链接。

（我尝试在本地创建提交，读取生成的 SHA，更改README.md为写入链接和git commit --amend，但修改后更改了 SHA。）

有什么方法可以在 GitHub 上创建动态链接？也许一些 GitHub 变量 ( <sha-of-this-commit>) 会在生成时由 GitHub 动态更改README.md？

我知道我可以链接相对：

[index.html](index.html)

GitHub 将其替换为：

https://github.com/mkczyk/test-experiment/blob/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html

但我不知道如何将它与 RawGit 或 HTMLPreview 连接起来。

Jupyter 笔记本

我找到了这个演示：https ://github.com/soxofaan/jupyter-playground/tree/master/jupyter-custom-d3-visualization

我看到我可以在 Jupyter Notebook ( .ipynb) 中嵌入 JS 和 D3.js 脚本。

GitHub默认支持Jupyter Notebooks 的预览。但如您所见，它不支持嵌入 JavaScript 结果：https ://github.com/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb

<IPython.core.display.Javascript object>

有解决方法并使用nbviewer预览 JS：https ://nbviewer.jupyter.org/github/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb

它的工作原理与 RawGit 或 HTMLPreview 相同，但适用于 Jupyter Notebook。

有了这个，我遇到了和上面一样的问题。我无法链接到特定的提交（我不知道在创建提交之前会生成什么 SHA）。

这也有一个缺点，您必须仅为嵌入 JS 创建整个 Jupyter Notebook。

ObservableHQ更适合 D3.js。但是 GitHub不支持。如果我可以编写 observablehq-notebook，将代码提交到 GitHub 并呈现预览，那将是完美的。

繁琐的解决方法

  1. 放弃历史提交的演示......但这是我的问题，如何处理它。

  2. 使用外部服务（例如JSFiddle、Codepen或 ObservableHQ 之前提到的）并在提交之前为每个更改和粘贴链接创建独立的演示。但这有很多缺点：

  • 外部服务中的大量条目。当我犯错或忘记我需要这个并删除旧条目时，我在 repo 中的旧提交中的演示将被破坏（并且无法恢复，因为实体的 id 将被更改 - 唯一的方法是重写 repo 中的所有提交！） .
  • 没有单一的事实来源（我的主要源代码在 GitHub 上，所以我想参考一下）。
  1. 使用 GitHub 页面（docs在分支中有文件夹master- 我不能使用gh-pages分支，因为我想在一次提交中更改应用程序并显示演示）并为每次更改手动创建子文件夹并将某个链接粘贴到特定文件夹中的文件（我知道路径目录，因为我是手动制作的）。这也有很多缺点。听起来很复杂（我只用 D3.js 做了简单的页面！），我必须手动创建文件夹，注意路径并且不知道如何处理除 master 之外的其他分支（合并等）。

2020-07-07 更新

回复：HtmlPreview 或 RawGit，1. 问题

我找到了另一个直接从 GitHub raw.githack.com提供 HTML 的服务：

这个与其他的不同之处在于它支持生产 URL。

在生产中使用此 URL
没有流量限制或节流。文件通过 CloudFlare 的 CDN 提供。

所以我可以创建与 CDN 的链接：

https://rawcdn.githack.com/mkczyk/test-experiment/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html

我假设我不必担心在我的公开演示中使用这个链接。

它从通过外部服务提供 HTML 的方式解决了我的第一个问题。但是 SHA 的第二个问题仍然存在。我仍然不知道如何动态创建指向当前提交的链接README.md。我为当前提交的哈希提交了占位符的功能请求：https ://github.com/github/markup/issues/1363

4

0 回答 0