去年开始研究github，发现用jekyll架的blog是一个写自己技术笔记的好地方，我也曾过写过一篇在Github用Jekyll创建自己的blog，是我在IT邦目前为止浏览量最高的文章(3100多次点击)。随着blog内的文章越来越多，我们可能需要为文章加上新的分类(categories)或标籤(tags)。这就是本篇文章的缘起～

重点摘要:

Step 1: 在config.yml定义collections
Step 2. 将筛选出tags的语法加入layout
Step 3. 在各blog的md档加入新tags
Step 4. 在各个独立的tags下，列出所有的包含此tags的所有文章
Step 5. 在网站选单上加上每个tag的连结路径

Step 1: 在config.yml定义collections

以分类的个人习惯而言，我偏好tags这个名称而非categories。例如在2018-08-25的这篇文章在Github用Jekyll创建属于你自己的blog，内容谈到了Jekyll与基本的git用法，因此我在这篇文章的属性里同时加入了jekyll与git。为确保弹性，我们就以tag为名。

将output设定为true，目的是将在各个独立的tags下，列出所有的包含此tags的文章的功能打开。

路径：/config.yml

collections:  tag:    output: true

Step 2. 将筛选出tags的语法加入layout

1. 让每个 tags 都成为一个连结

路径：/_layouts/post.html:

我们可以把page.tags | sort是想成SQL语法的排序功能，并指定变数sortedTags。

{% for tag in sortedTags %}与 {% endfor %}的for迴圈内，将此tag的blog md档都放置于{{ site.baseurl }}/tag/{{ tag }}路径下。

  <div class="tags">      {% assign sortedTags = page.tags | sort %}      <small>Tags: </small>      {% for tag in sortedTags %}        <span class="tag">          <small> <a href="{{ site.baseurl }}/tag/{{ tag }}"> #{{ tag }}</a></small>        </span>       {% endfor %}      <br>    </div>

2. related posts:列出与此文有关的相关文章

我们在浏览完某篇网路文章时，通常会看到底下有推荐你可能也喜欢的其他文章的连结。

路径：/_layouts/post.html:

      {% assign firstTag = page.tags | first %}      {% assign relatedCount = 0 %}

这个功能的逻辑是列出同一tag下，除了本篇文章以外的其他文章(功能写在unless - endunless内)。
在此我们设定列出相关文章为4篇：当relatedCount == 4，跳出if迴圈

    <div class="related-posts">      {% assign firstTag = page.tags | first %}      {% assign relatedCount = 0 %}      {% for related in site.tags[firstTag] %}      {% unless page.permalink == related.permalink %}        {% assign relatedCount = relatedCount | plus: 1 %}        <a href="{{ site.baseurl }}{{related.permalink}}">{{ related.title }}</a><br>        {% endunless %}                  {% if relatedCount == 4 %}          {% break %}        {% endif %}      {% endfor %}    </div>

Step 3. 在各blog的md档加入新tags

layout设定好了，接着我们去单篇文章的front-matter内，依照该文章的内容列出符合其叙述的tags属性。例如刚刚举例提到2018-08-25的这篇文章在Github用Jekyll创建属于你自己的blog，我设定了两个tags。

title:  "在Github用Jekyll创建属于你自己的blog"preview: "Build your own blog by Jekyll"permalink: "/articles/2018-08-25-github_jekyll_blog"date:   2018-08-25 12:23:00layout: posttags:   - "jekyll"  - "git"

Step 4. 在各个独立的tags下，列出所有的包含此tags的所有文章

在此我採用静态设定的方式，在每个{{tag}}资料夹下都创建index.html档。所以资料夹内容看起来可能是长这样的：

|---/_site     #render后所产生之档案，皆位于此处|    |--index.html|    |--/articles      #permalink 文章永久连结|    |--/page2      #pagenation Page2 post集合|    |--/page3      #pagenation Page3 post集合|    |--/page4      #pagenation Page4 post集合||    |--/tag        #标籤分类资料夹|       |--/jekyll #含jekyll标籤下的post集合|       |--|-- index.html|       |--/git    #含git标籤下的post集合|       |--|-- index.html

举例而言，如果{{tag}}分类是jekyll，title设定为jekyll:

路径：/_site/tag/{{tag}}/index.html

layout: defaulttitle: jekyll

在各个独立的tags下，用for迴圈列出所有的包含此tags的所有文章:

<div>Tag:<br><br> <div class="tag" align="center">jekyll</div></div> <br><div class="posts">  {% for post in site.tags.jekyll %}    <h4 class="post-title">      <a href="{{ site.baseurl }}{{ post.url }}">        {{ post.title }}        </a>    </h4>    <small class="post-date">{{ post.date | date_to_string }}    </small>  {% endfor %}</div>

Step 5. 在网站选单上加上每个tag的连结路径

最后我们在放置选单的侧边栏sidebar加上各个连结路径的集合。大功告成！

路径：/_site/index.html

<nav class="sidebar-nav">    <a class="sidebar-nav-item" href="/blog/">Home</a>    <a class="sidebar-nav-item" href="/blog/tag/interview/">。Interview: Ruby 精选面试题</a>    <a class="sidebar-nav-item" href="/blog/tag/rubygem/">。RubyGem: 套件研究</a>     <a class="sidebar-nav-item" href="/blog/tag/jekyll">。Blog: Jekyll 静态网站</a>    <a class="sidebar-nav-item" href="/blog/tag/heroku/">。Deployment: Heroku 动态网站</a>    <a class="sidebar-nav-item" href="/blog/tag/git/">。Git: 版本控制</a>  ...</nav>

看到文章整整齐齐地被收纳在不同tags下，写blog文章的动力就更加旺盛了！XD

以上程式码放在这里，敬请网友们多多指教～

Ref: