在静态网站的表格中插入从 API 获取的数据

Question

我有一个使用 Hugo 构建的静态网站和一个表格，我在其中显示来自本地数据文件的数据并添加来自 API 的某些值来完成这些数据：

<table id="markets-table">
    <thead>
      <tr>
        <th>Asset</th>
        <th>Year</th>
        <th>Market Cap</th>
        <th>Price</th>
        <th>Industry</th>
        <th>Type</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      {{ $dataAssets := getJSON "https://api/v1/ticker/" }}
      {{ range $.Site.Data.assets }}
            <tr>
              <td>{{ .name }}</td>
              <td>{{ .year }}</td>
              {{ range where $dataAssets "name" .name }}
                <td>${{ lang.NumFmt 0 .market_cap_usd }}</td>
                <td>${{ lang.NumFmt 2 .price_usd }}</td>
              {{ else }}
                <td>N/A</td>
                <td>N/A</td>
              {{ end }}
              <td>{{ .industry }}</td>
              <td>{{ .type }}</td>
              <td>{{ .description }}</td>
            </tr>
      {{ end }}
    </tbody>
  </table>

然后我使用datatables 使该表可排序、可过滤和可搜索。

这一切都很好，但我的数据是在构建时设置的并且是静态的，我希望来自 API 的值是动态/“实时”。

我可以通过使用 axios 或 jQuery.ajax() 发出请求来获取数据，但我不知道如何将它集成到我的表中并保持其干净。

如果有什么对我来说更有意义的东西，我愿意切换到不同的工具/表格插件。

感谢您的帮助！

Answer 1

Hugo 的唯一目的是生成静态内容。您可以从数据库和远程数据库查询生成内容，但它始终是静态的。静态内容很容易被搜索引擎索引，因此对 SEO 友好。

一种可能的解决方案，一种对 SEO 友好的解决方案是，每次更新数据时都在服务器上生成您的内容。但是，如果您的数据不经常更改（例如每天一次），则使用此解决方案是理想的选择，您不介意短时间内过时的内容，因为您必须应对另一个与浏览器有关的棘手问题缓存和设置响应头。