如何為Jekyll文章加入tags & related posts

當部落格文章跟學習筆記都愈寫愈多，我們總是會希望可以建立目錄、文章分類或是標籤來管理跟尋找文章對吧？這時候category跟tags這兩個功能就派上用場了！

簡單解釋兩者有什麼不一樣的話，category是有層級概念的分類，可以一層包一層。例如我可以設定一個category叫做”Artifitial Intelligence”、下一層包的是”Machine Learning”、再下一層包的是”Deep Learning”，是階梯的概念。相對來說tags就比較散亂，一篇文可以有非常多個tags他們之間沒有誰高誰低，都可以同時存在，只是標示出這篇文章有提到的內容和哪幾個標籤有關。

因為我可能會比較常寫跨領域的內容，category會讓我常常不知道這篇文章應該要歸於哪個分類，所以暫時只決定用tags讓自己方便管理。用哪一個、或是兩者都用完全取決於個人習慣跟喜好，自己開心就好！

step1: 為文章設定tags

首先當然是確保你的每篇文章都有設定各自的標籤(tags)啦！在用markdown寫文章的時候，我們會在front-matter做一些基本設定，包括layout, title, date, author等等，只要再多加一個tags就可以透過設定標籤來更好地管理文章了。

只有一個tag的時候：

---
layout: post
title: title of the post
permalink: /title-of-the-post.html
date: YYYY-MM-DD
author: your name
tags: tag1
---

有多個tags的時候：

---
layout: post
title: title of the post
permalink: /title-of-the-post.html
date: YYYY-MM-DD
author: your name
tags: [tag1, tag2, tag3]
---

注意tags要像寫python的list那樣，把每一個tag用逗號隔開、再用brackets包起來。

step2: 建立tags頁面

接下來，在根目錄建立tags.md的新文件，使用以下這段程式碼：

---
layout: default
title: tags
permalink: /tags/
---
<div class="tags-expo">
  <div class="tags-expo-list">
    {% for tag in site.tags %}
    <a href="#{{ tag[0] | slugify }}" class="post-tag">{{ tag[0] }}</a>
    {% endfor %}
  </div>
  <br/>
  <div class="tags-expo-section">
    {% for tag in site.tags %}
    <h2 id="{{ tag[0] | slugify }}">{{ tag[0] }}</h2>
    <ul class="tags-expo-posts">
      {% for post in tag[1] %}
        <a href="{{ site.baseurl }}{{ post.url }}">
      <li>
        {{ post.title }}
      </li>
      </a>
      {% endfor %}
    </ul>
    {% endfor %}
  </div>
</div>

layout: default會讓這個頁面的按鈕顯示在頂端nav bar上
title: tags 即是顯示出來按鈕上的文字
permalink: /tags/ 就是連結後綴

這會是tags這一個page在網頁中呈現出來的樣子，可以自己微調。例如<h2></h2>可以自己改成<h3></h3>如果你覺得標題過大。

step3: 在每篇文開頭加入此篇文的tags

在_layouts/post.html選定自己要加入tags的位置貼入以下程式碼。

請仔細閱讀post.html裡面的程式碼，因為這關係著你每一篇文章的排版。建議同步打開你目前的網頁，觀察哪一行是哪一行，這樣可以比較精準判斷你要把tags的小連結放在這篇文章的哪裡。例如我想要把tags的連結放在我每篇文章的標題下面、時間之前，我就找到post.html的<header></header>跟<time></time>，並把以下程式碼塞進兩者之間：

<!--to add tags-->
    {% if page.tags %}
      {% for tag in page.tags %}
      <a href="{{ site.baseurl }}/tags/#{{ tag | slugify }}" class="post-tag">{{ tag }}</a>
      {% endfor %}
    {%- endif -%}
<!--to add tags-->

<a href="{{ site.baseurl }}/tags/#{{ tag | slugify }}" class="post-tag">{{ tag }}</a> 這段是要設定每篇post上面的tags所連結的URL，因為我的tags頁面就叫做/tags/，所以設定成這樣。如果這個tag是jekyll，我的URL就會自動產生成https://yunchipang.github.io/tags/#jekyll。
前後的comment是我為了易於辨識每一段代碼各自的目的而加上去的，不喜歡的話可以選擇性刪除。

step4: 列出與此文有關的其他文章（推薦閱讀）

基於我們通常希望這項功能出現在讀者閱讀完一篇文章的最下面，好讓他可以繼續點擊閱讀他有興趣的相關文章，我們要把程式碼塞在post.html的content後面（放之前仔細讀code會比較好找位置！）

<!--to add related posts-->
  {% assign firstTag = page.tags | first %}
  {% assign relatedCount = 0 %}

  <div class="related-posts">
    <h3>related posts:</h3>
    {% 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 == 3 %}
        {% break %}
      {% endif %}
    {% endfor %}
  </div>
<!--to add related posts-->

{% if relatedCount == 3 %}{% break %}{% endif %}會把推薦閱讀的數量限制在3以內，這樣就不用擔心文章太多的時候相關文章會顯示一拖拉庫東西。那當然如果你希望文末可以一口氣顯示更多推薦文章，自行增大這個數字即可。

跟完這三步驟，順利的話你就可以在每篇文章的起頭看到tags的連結們、文章結束處也會有根據這篇文章tags所產生的推薦閱讀清單了：）

參考資料

主要是參考這三篇前輩寫的內容自己拼拼湊湊、試來試去，最終搞出的解法。每個人的情況可以能不一樣，不要緊張，冷靜下來多看幾篇文章、多試幾次就成功了！Liquid語言我原本完全不認識，剛開始用前輩的幾組程式碼胡亂拼湊，結果去terminal $ jekyll serve的時候狂噴error，回到_layouts/post.html認真讀碼，其實很簡單一下就看懂了，很像html前後要關起來的概念xd