CSV 数据转成表格（HTML、Markdown）

01 April 2020 MichaelCurrin

本教程分享了如何使用 Jekyll 读取 CSV 里面的数据并将数据呈现为 HTML 表格。

这个方法将可以实现以前功能

• 使用 CSV 的第一行作为 HTML 表格标题。
• 单独调用 CSV 第一行以外的内容作为 HTML 表格的数据内容。
• 使用 CSV 文件中列的顺序。
• 灵活的自定义，引用 CSV 文件中任何数据内容。

不用指定列的名称或列数。本教程的重点就是，当我们遍历行数据时，我们选取第一行作为 HTML 表格表头的名称。

按照下面步骤示例，完成将将 authors.csv CSV内容转成 HTML 表格。

1. 创建一个 CSV 文件

在你站点的 数据文件 Data files 目录中创建一个 CSV 文件，以供 Jekyll 获取里面的数据。可按示例路径添加示例内容：

示例文件路径：

_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 中添加一个表格

选择需要添加表格的 HTML 或 Markdown 文件。

文件示例（可以直接存放 Jekyll 站点根目录）： table_test.md

---
title: Table test
---

Inspect 一行

获取第一行，查看使用 inspect 过滤器的效果。

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

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

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

值得注意的是，Jekyll 实际上保留了 CSV 文件中内容原始的顺序。

Unpack 一行

？？一个简单的方法是，直接按字段名称查找并硬编码。

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

但是让代码可以适用于任意一个 CSV文件的方案更为实用，无需预先指定列名称。使用 for 循环遍历 row 对象，这样更便捷和简单：

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

这将产生以下结果。每行第一项是 key，第二项是 value。

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

创建表格表头

以下代码，实现了创建一个只有一行表头的表格，由表行 tr 标签和 表头 th 标签组成。 我们通过从 pair 获取单元格元素，加上索引 [0] 获取 CSV 第一行的内容：

<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 元素来查找值（后面不需要添加 [0]去指定第一行）。

为了更便捷，我们使用 tablerow 标签进行渲染 ，它类似 for 循环，但内部数据将使用 tr 和 td HTML 标签结构进行渲染。因为标题行使用的 HTML 标签不同，所以我们需要完整地写出来 tr 和 th 结构，就像上一节一样。

---
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>

使用上面的代码，最终生成的完整的表如下所示：

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

就是如此简单，你现在可以使用 Jekyll 将你的 CSV 文件中的数据转为 HTML 表格。当然不一定是用于表格，也可以用于其他结构，比如：div,p,ul,ol。

进一步自定义

你还可以自己完成以下操作：

• 更改 CSV 中字段的名称。
• 使用其他的 CSV 文件。
• 给 HTML 表格添加 CSS 样式。
• 使用 JSON 或 YAML 文件替代 CSV 文件。

上一篇

下一篇