改进此页面

制表 CSV 数据

2020 年 4 月 1 日 MichaelCurrin MichaelCurrin

本教程展示了如何使用 Jekyll 读取 CSV 并将数据呈现为 HTML 表格。

此方法将

  • 使用 CSV 的第一行为 HTML 表格标题。
  • 将剩余行用于表格主体。
  • 保留原始 CSV 中列的顺序。
  • 足够灵活，可处理任何有效的引用的 CSV。

无需指定列的名称或列数。本教程的诀窍在于，当我们遍历行数据时，我们选取第一行并解包它，以便获取标题名称。

按照以下步骤将作者示例 CSV 转换为 HTML 表格。

1. 创建 CSV

在 数据文件 目录中创建一个 CSV 文件，以便 Jekyll 将其选取。示例路径和 CSV 数据如下所示

_data/authors.csv

First name,Last name,Age,Location
John,Doe,35,United States
Jane,Doe,29,France
Jack,Hill,25,Australia

该数据文件现在将以如下方式在 Jekyll 中可用

{{ site.data.authors }}

2. 添加表格

选择要显示表格的 HTML 或 markdown 文件。

例如：table_test.md

---
title: Table test
---

检查一行

选取第一行并使用 inspect 过滤器查看其外观。

{% assign row = site.data.authors[0] %}
{{ row | inspect }}

结果将是一个哈希（由键值对组成的对象），如下所示

{
  "First name"=>"John",
  "Last name"=>"Doe",
  "Age"=>"35",
  "Location"=>"United States"
}

请注意，Jekyll 确实会根据原始 CSV 保留此处的顺序。

解压缩一行

一个简单的解决方案是在按键查找行值时对字段名称进行硬编码。

{{ row["First name"] }}
{{ row["Last name"] }}

但我们更喜欢一种适用于任何 CSV 的解决方案，而无需预先指定列名称。因此，我们使用 for 循环遍历 row 对象

{% assign row = site.data.authors[0] %}
{% for pair in row %}
  {{ pair | inspect }}
{% endfor %}

这会产生以下结果。请注意，每对中的第一个项目是键，第二个项目将是值。

["First name", "John"]
["Last name", "Doe"]
["Age", "35"]
["Location", "United States"]

创建表头行

此处我们使用由表头 (th) 标记组成的单表行 (tr) 制作一张表。我们通过从 pair 中获取第一个元素（索引为 0）来查找标题名称。我们忽略第二个元素，因为我们暂时不需要该值。

<table>
  {% for row in site.data.authors %}
    {% if forloop.first %}
    <tr>
      {% for pair in row %}
        <th>{{ pair[0] }}</th>
      {% endfor %}
    </tr>
    {% endif %}
  {% endfor %}
</table>

目前，我们不会显示第二行及以后的任何内容。我们通过使用 forloop.first 来实现这一点，因为这会对第一行返回 true，否则返回 false。

添加表格数据行

在此部分中，我们将数据行添加到表中。现在，我们使用 pair 的第二个元素来查找值。

为方便起见，我们使用 tablerow 标记进行渲染 - 它的工作方式类似于 for 循环，但内部数据将使用 tr 和 td HTML 标记为我们渲染。遗憾的是，表头行没有等效项，因此我们必须像上一部分中那样将其完整写出。

---
title: Table test
---

<table>
  {% for row in site.data.authors %}
    {% if forloop.first %}
    <tr>
      {% for pair in row %}
        <th>{{ pair[0] }}</th>
      {% endfor %}
    </tr>
    {% endif %}

    {% tablerow pair in row %}
      {{ pair[1] }}
    {% endtablerow %}
  {% endfor %}
</table>

使用以上代码，完整表格将如下所示

名字 姓氏 年龄 位置
John Doe 35 美国
Jane Doe 29 法国
Jack Hill 25 澳大利亚

就是这样 - 您现在可以使用 Jekyll 将 CSV 转换为 HTML 表格。

后续步骤

  • 更改 CSV 中的字段名称。
  • 选择不同的 CSV。
  • 为表格添加 CSS 样式。
  • 使用 JSON 或 YAML 输入文件渲染表格。
下一步