【種樹】在時間軸上顯示完整日期

| | |

之前在 Jekyll-NextT 上的做的小改進。

起因是今年網誌 相較之下 算是高產，導致我在翻閱時間軸時，偶而會搞不清楚這篇網誌到底是那一年的，所以興起了幫它加上完整日期的念頭。說做就做！:hammer_and_wrench:


只是改改時間格式而已還頗快…至少比寫這篇網誌快 XD，開始前先來看看原本的時間軸這樣：

在時間軸上顯示完整日期

實做過程可以細分成兩個步驟：

Step1、更改時間格式

時間軸上的每個物件是定義在 _includes/_macro/post-collapse.html 中，找到一個 post.date，而後面的 pipleline 所接的就是所顯示的時間格式，把它換成你需要的格式就好。

原本程式碼

1
2
3
4
5
 
<time class="post-time" itemprop="dateCreated"
      datetime="{{ post.date | date_to_xmlschema }}"
      content="{{ post.date | date: site.date_format }}" >
        {{ post.date | date: '%m-%d' }}
</time>

換成

1
2
3
4
5
 
<time class="post-time" itemprop="dateCreated"
      datetime="{{ post.date | date_to_xmlschema }}"
      content="{{ post.date | date: site.date_format }}" >
      {{ post.date | date: '%Y.%m.%d' }}
</time>

Step2、更改字體大小

不過原本顯示的數字從 4 碼變成了 8 碼實在有點擠，思考了一下，決定改字體大小好了，不調整 UI 了。

這邊字體大小是定義在 _sass/_common/components/post/post-collapse.scss 的 ` .post-title` 中，我將原本的文字大小由 90px 降到 60 px：

1
2
3
4
5
6
 
.post-title {
    margin-left: 60px;   
    font-size: 16px;
    font-weight: normal;
    line-height: inherit
    ...

改完結果如下

參考資料

參考資料
此次修改請參考此 commit

更新紀錄

最後更新日期：2020-08-10
  • 2020-08-10 發布
  • 2020-08-07 完稿
  • 2020-07-22 起稿