如何在Jekyll中为每篇文章添加专属元数据？

嗨，我来帮你一步步搞定这个问题！你已经有了基础的Front Matter和模板结构，接下来只需要两步就能实现每篇文章的专属元数据配置：

1. 在文章Front Matter中添加专属元数据 #

首先，你可以在每篇文章开头的---之间，添加任意你需要的元数据字段，比如描述、标签、作者、封面图等等，格式遵循YAML语法就行。举个例子：

---
layout: default
title: "Title"
date: 2018-04-19
# 新增专属元数据
description: "这篇文章的核心内容是讲解如何配置博客元数据"
tags: [博客搭建, 元数据配置]
author: "sdub0800"
featured_image: "/assets/post-cover.jpg"
---

这些字段可以根据你的需求自定义，只要是合法的键值对都能添加。

2. 在模板中调用这些元数据 #

因为你的head.html是被default.html引入的，而博客生成工具（比如Jekyll）会自动把当前文章的Front Matter数据绑定到page对象上，所以你可以直接在模板里用page.字段名来调用这些元数据。

在head.html中使用元数据 #

比如你可以把文章的标题、描述放到网页的<head>里，优化SEO：

<head>
  <meta charset="UTF-8">
  <!-- 显示文章标题 + 博客名称（如果有全局配置的话） -->
  <title>{{ page.title }} | 我的个人博客</title>
  <!-- 仅当文章有description字段时才渲染这个meta标签 -->
  {% if page.description %}
    <meta name="description" content="{{ page.description }}">
  {% endif %}
  <!-- 其他头部资源，比如样式表、脚本 -->
  <link rel="stylesheet" href="/css/main.css">
</head>

在default.html中使用元数据 #

如果你想在文章正文上方展示作者、发布日期这类信息，也可以在default.html里调用：

<!DOCTYPE html>
<html lang="en-us">
{% include head.html %}
<body>
  <!-- 文章头部信息栏 -->
  <div class="post-header">
    <h1>{{ page.title }}</h1>
    <div class="post-meta">
      <span>发布于：{{ page.date | date: "%Y年%m月%d日" }}</span>
      {% if page.author %}
        <span>作者：{{ page.author }}</span>
      {% endif %}
    </div>
  </div>
  <!-- 渲染文章正文内容 -->
  <div class="post-content">
    {{ content }}
  </div>
</body>
</html>

这里要注意{{ content }}是工具的内置变量，用来渲染你文章里除了Front Matter之外的正文内容，一定要加上，不然文章内容不会显示出来。

额外小贴士 #

• 如果有些元数据是全博客通用的（比如博客名称、默认作者），可以把它们放到根目录的_config.yml文件里，然后用site.字段名来调用，比如{{ site.title }}。
• 对于标签这类数组字段，你可以用循环来遍历显示：

  {% if page.tags %}
    <div class="post-tags">
      {% for tag in page.tags %}
        <span class="tag">#{{ tag }}</span>
      {% endfor %}
    </div>
  {% endif %}
  

内容的提问来源于stack exchange，提问作者sdub0800