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友好的解决方案，就是每次更新数据时都在服务器上生成内容。但是，使用此解决方案是理想的，因为您的数据不会经常更改，例如每天一次，您不会在短时间内记住过时的内容，因为您必须应对另一个棘手的问题使用浏览器缓存和设置响应标头。

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

1 个答案: