MMiooiMM

建立了部落格後，當然要為未來規劃一下，如果文章太多的話勢必就要有分類了。

實作一個標籤功能

標籤可以使用 tags 跟 categories 兩種方法實現。

category 在生成檔案時會多幾層資料夾在根目錄之外，比如你在文件裡寫成 [A, B]，則會在生成檔案時，將檔案放置在_site\A\B\_post裡，而 tags 不會，這是我目前已知的差異。

tags 若改成其他名稱也是可以運作，但 categories 就不行。

本文以 tags 的使用方法進行操作。

1. 首先需要將每一個頁面屬性做好標籤分類。

   ---
   layout: post
   title:  "使用 jekyll + Github 來建立一個部落格（二）"
   date:   2018-09-10 14:50:00 +0800
   tags: [jekyll]
   ---

   像這一篇文章的開頭，我給他 jekyll 的標籤，若要多筆標籤請以 , 區分，並且在頭尾增加 [] 來表示陣列。如 [tagA, tagB]。

2. 新增 tag.html 檔案來增加上方的 nav。

   沒有標籤選擇頁面，做標籤功能也只是多餘的，當然名稱沒有規定一樣是自己決定。

   tag.html 先增加基本內容如下。

   ---
   layout: default
   title: Tag
   permalink: /tag
   ---

   layout 為 default 時會掛在上方 nav 欄，title 為 nav 顯示名稱。

3. 將 tag.html 增加行為。

   程式碼是以 Liquid 撰寫，有興趣可以去網站看。

   1. 先篩選出所有標籤內容。

      {{ '{% assign rawtags = "" %' }}}
      {{ '{% for post in site.posts %' }}}
          {{ "{% assign ttags = post.tags | join:'|' | append:'|' %" }}}
          {{ '{% assign rawtags = rawtags | append:ttags %' }}}
      {{ '{% endfor %' }}}
      {{ "{% assign rawtags = rawtags | split:'|' | sort %" }}}
      
      {{ '{% assign tags = "" %' }}}
      {{ '{% for tag in rawtags %' }}}
          {{ '{% if tag != "" %' }}}
              {{ '{% if tags == "" %' }}}
                  {{ "{% assign tags = tag | split:'|' %" }}}
              {{ '{% endif %' }}}
              {{ '{% unless tags contains tag %' }}}
                  {{ "{% assign tags = tags | join:'|' | append:'|' | append:tag | split:'|' %" }}}
              {{ '{% endunless %' }}}
          {{ '{% endif %' }}}
      {{ '{% endfor %' }}}

   2. 將每一種標籤所帶有的文章顯示在網頁上

      {{ '{% for tag in tags %' }}}
          <h2 id="{{ '{{ tag | slugify ' }}}}">{{ '{{ tag ' }}}}</h2>
          <ul>
          {{ '{% for post in site.posts %' }}}
              {{ '{% if post.tags contains tag %' }}}
              <li>
              <h3>
              <a href="{{ '{{ post.url ' }}}}">
              {{ '{{ post.title ' }}}}
              <small>{{ '{{ post.date | date_to_string ' }}}}</small>
              </a>
              </h3>
              </li>
              {{ '{% endif %' }}}
          {{ '{% endfor %' }}}
          </ul>
      {{ '{% endfor %' }}}

   3. 將每一種標籤顯示在網頁上

      做個索引方便查找。

      {{ '{% for tag in tags %' }}}
          <a href="#{{ '{{ tag | slugify ' }}}}"> {{ '{{ tag ' }}}}</a>
      {{ '{% endfor %' }}}

4. 完成。

若想做 categories，把上述內容改成 categories ，然後文章屬性的 tags 改成 categories 即可。

增加到每篇文章開頭

如果想將 tags 放置每個文章的開頭，就必需去 override 舊有的檔案。

首先使用指令 bundle show minima 開啟資料夾，本文使用 minima 主題，若為其他請改為其他主題名稱。

將裡面的內容除了版權及說明檔全貼在專案裡面。

由於是針對 layout 改寫，所以只需要更改 post.html 即可。

在你喜歡的位置上，放入以下程式碼即可完成。

{{ '{% for tag in page.tags %' }}}
    <a href="{{ '{{ site.baseurl ' }}}}/tag#{{ '{{ tag | slugize ' }}}}">{{ '{{ tag ' }}}}</a>
{{ '{% unless forloop.last %' }}}&nbsp;{{ '{% endunless %' }}}
{{ '{% endfor %' }}}

如果你的專案結構與我不同，請將 tags 改成你 tags 的位置。

參考文章

Use Tags and Categories in your Jekyll based Github Pages without plugins

overriding-theme-defaults

Liquid