详细教程(分步骤)

6. Data Files:数据文件

  1. Setup:安装、创建和构建 Jekyll 的详细教程
  2. Liquid:模板语言
  3. Front Matter:页面头部参数
  4. Layouts:布局
  5. Includes:引入文件、包含文件、可复用片段、模板片段
  6. Data Files:数据文件
  7. Assets:资源文件(css、js、图片)
  8. Blogging:Jekyll 博客系统
  9. Collections:集合(专题页面、聚合页面)
  10. Deployment:部署

Jekyll 支持从 _data 目录中的 YAML、JSON 和 CSV 文件加载数据。使用数据文件可以更好的将内容与源代码分离以便更快速便捷维护网站的好方法。

比如你有10个会员资料页面,每个会员都有20项资料,你创建好页面或者模板后可以引用 _data 目录中数据文件,假设你10个会员的20项资料的信息都是存储在 CSV (表格)文件中,那你如果需要同时修改多个会员的资料,你只需要修改 CSV 文件即可,而不需要去修改那10个会员资料的页面。

下面,你将学会把网站导航菜单选项中的内容存储在一个数据文件中,然后在布局模板或任何 HTML 和 Markdown 文件中引用它。

Data file usage

YAML 是 Ruby 生态系统中常见的格式,当然现在在诸多静态网站生成器中很是流行。

现在我们使用它来存储一个包含名称和链接的导航菜单选项数组。

创建一个导航的数据文件,路径和文件名为 _data/navigation.yml ,内容如下:

- name: 主页
  link: /
- name: 关于
  link: /about.html

你可以使用 site.data.navigation 来获取 _data/navigation.yml 文件中的内容。现在你无需在 _includes/navigation.html 中去手动写上全部的导航菜单选项,只需要对数据文件进行遍历,代码如下:

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

以上代码片段,你可以直接添加到你的页面文件,也可以添加到 _includes/navigation.html 然后在布局模板文件或页面文件中引用。

最终输出的效果完全相同。而不同之处在于,你可以更容易编辑导航项并修改 HTML 结构(如果使用传统的 HTML 写法,20个菜单选项可以你就需要些20个 HTML 标签,如修改结构你又要修改20遍)。

一个没有 CSS、JS 和图片的网站毫无吸引力。下一步让我们来看看如何在 Jekyll 中处理这些资源文件。

  1. Setup:安装、创建和构建 Jekyll 的详细教程
  2. Liquid:模板语言
  3. Front Matter:页面头部参数
  4. Layouts:布局
  5. Includes:引入文件、包含文件、可复用片段、模板片段
  6. Data Files:数据文件
  7. Assets:资源文件(css、js、图片)
  8. Blogging:Jekyll 博客系统
  9. Collections:集合(专题页面、聚合页面)
  10. Deployment:部署