看到別人的部落格都有美美的 Archive 就萌生在自己的 GitHub Page 中也產出一個的想法。

簡單研究一下發現要在 Jekyll 中實現並不難。大體上想法就是列出所有的文章的日期,再根據日期分,每一年都產出一個 Header,並在下面用 a tag 來產出文章連結。

簡單實現如下:

1
2
3
4
5
6
7
8
9
10
11
{% for post in site.posts %}
  {% assign currentDate = post.date | date: "%Y" %}
  {% if currentDate != myDate %}
      {% unless forloop.first %}</ul>{% endunless %}
      <h1>{{ currentDate }}</h1>
      <ul>
      {% assign myDate = currentDate %}
  {% endif %}
  <li><a href="{{ post.url }}"><span>{{ post.date | date: "%B %-d, %Y" }}</span> - {{ post.title }}</a></li>
  {% if forloop.last %}</ul>{% endif %}
{% endfor %} 

最終結果:


2018

  • April 17, 2018 - Walkman 播放清單
  • March 4, 2018 - ZX300 + CKR100 心得
  • 2017

  • July 30, 2017 - 百元分配問題
  • May 6, 2017 - vim 8 升級紀錄
  • March 11, 2017 - c++11 constexpr + static_assert 來做 enum 測試
  • 2016

  • November 11, 2016 - fitbit charger 2 開箱
  • July 8, 2016 - Hubot 聊天機器人簡單架設教學
  • May 9, 2016 - Google Play onReceivedSslError 安全性警示
  • April 8, 2016 - Java 自動偵測剪貼簿
  • 2015

  • November 25, 2015 - 資工系在學什麼?
  • November 21, 2015 - Ducky Secret RGB 滑鼠開箱
  • October 7, 2015 - Image Blur
  • September 25, 2015 - Chaos-Based Joint Compression and Encryption
  • September 12, 2015 - Linked List Sort
  • September 5, 2015 - 群暉及聯發科研替面試分享
  • August 23, 2015 - Race Condition
  • August 16, 2015 - Watermarking VS Data Hiding
  • August 10, 2015 - Macbook thunderbolt 網路轉接頭開箱
  • August 8, 2015 - 繁簡轉換實現 by Java
  • August 4, 2015 - 第一次跨考資工所就上手!
  • August 1, 2015 - Hello World!

  • Live Demo 可以直接參考本部落格的 Archive

    附上當時的 Commit 有興趣可以參考看看。