在 Hugo 站点中显示来自 Github Gist 的文本值

Question

我知道我可能会问一些非常简单的问题，但对于我来说，我似乎无法理解这个问题，我肯定在监督一些简单的事情，但我不知道是什么。任何帮助将不胜感激。

我正在使用 Hugo 生成静态站点。在我的一个页面上，我想创建一个类似进度条的东西，使用我需要从 Github Gist 的文件中获取的变量。

说这就是要点：https://gist.github.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b#file-thesis-words-txt

文件只有一个编号，仅此而已。我要问的是如何从 gist 中获取该数字并将其存储在 hugo 中，或者至少只是将其显示在一些原始 html 中。我想提一下，我不想使用提供的嵌入文本，我只想获取原始值。归根结底，我需要的是在此处读取并显示原始 link 中的数字：https://gist.githubusercontent.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b/raw/8380782afede80d234209293d4c5033a890e44b6/thesis-words.txt

我在 Hugo 论坛上问过这个问题，这不是很有帮助，我没有提供一些指导，而是被送到这里。这是我最初的问题：https://discourse.gohugo.io/t/get-raw-content-from-github-gist-to-a-variable/38781

任何帮助将不胜感激，我知道有一些我没有看到的非常明显的东西，请指导我正确的方向，这不应该那么复杂。

最好的，博格丹

Answer 1

您可以获取此数据并将其作为数据文件存储在 Hugo 中，但我不推荐这样做。

由于 Hugo 是一个静态站点生成器，因此每次值更改时，您不仅需要修改存储库中的数据文件，还需要 re-build 您的站点。然后你就得担心运行剧本的进度了。这意味着您不能确定该值在第二次有人访问您的网站时是最新的。在我看来，这比它的价值更让人头疼。

更好的方法是编写一些 client-side JavaScript 来调用要点的原始 URL 以获取内容。这是 Hugo-agnostic 这就是为什么我怀疑你被指到这里了。

来自 Gists API 文档：

If you need the full contents of the file, you can make a GET request to the URL specified by raw_url.

您可以为这个或任何其他 JS 客户端使用类似 Fetch API 的东西。只需向 URL 发出 GET 请求，解析响应主体中的值，并写入一些 JavaScript 以在有人向其所在页面发出请求时将值插入 DOM .

Answer 2

@wjh18

干杯！我不知道 GET 请求，所以我不得不深入研究一下，但我设法做到了：

<script>
            fetch('https://gist.githubusercontent.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b/raw').then(function(response) {
              return response.json();
            }).then(function(data) {
              console.log(data);
            }).catch(function() {
              console.log("Booo");
            });
</script>

在 Hugo 站点中显示来自 Github Gist 的文本值

Display text value from Github Gist in Hugo site

javascript

html

hugo

gist