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

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

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

不用指定列的名称或列数。本教程的重点就是，当我们遍历行数据时，我们选取第一行作为 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。

进一步自定义

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