「歷史上的今天」頁面建立

文章越來越多的情況下，單純用分類方式還是會很困擾，因爲列表列出之後真的太多了。處理方法可以是增加搜尋，但 Eddie 想試試看用同日期但不同年份的方式來處理，讓一次顯示的文章不要太多、太轟炸，於是「歷史上的今天」就建立了！

技術層面

如果爲 365 天都建立一個 list 是不實際的，一個功能佔據這麼多檔案就太瞎了，因此，應該是用一個頁面來包含全部資訊，再用某種機制（判斷是）抓出自己要的文章才是正解。

html

Eddie 習慣都是做在 themes 而不是網站本身，但其實沒差，只是 hugo 優先級順序不同罷了，有確定抓到對的檔案，最終生成在 Public 內的檔案會是一樣的。

themes/classic/layouts/page/on-this-day.html

{{ partial "header.html" . }}

<h1>{{ .Title }}</h1>

<label>
  選擇日期：
  <input type="date" id="datePicker">
</label>

<ul id="result"></ul>

<script src="{{ "on-this-day.js" | relURL }}"></script>

{{ partial "footer.html" . }}

內容大致上是基本的導覽列（header）、標題（h1），以及選擇日期的選單（label）。

content 的 md

content/on-this-day/index.md


---
title: "歷史上的今天"
layout: "on-this-day"
type: "page"
---

這個檔案很單純，就是輸入 title 跟指定 layout 檔案是誰，這裡 layout 會連接到 themes/classic/layouts/page/on-this-day.html

底下內容區空白即可，到時候內容由判斷式決定。

json

themes/classic/layouts/_default/index.json

{{- $pages := .Site.RegularPages -}}
[
{{- range $i, $p := $pages }}
  {{- if $i }},{{ end }}
  {
    "title": {{ $p.Title | jsonify }},
    "url": {{ $p.RelPermalink | jsonify }},
    "date": {{ $p.Date.Format "2006-01-02" | jsonify }}
  }
{{- end }}
]

簡單說定義一些變數，再透過 range，最終會把整個網站文章的 title、url、date 生成一個 json檔案。

另外，要到設定檔去啓用 hugo 的生成 json 功能才能正常使用。

json 生成啓用

找到 config.toml，在 home 新增 JSON：

[outputs]
  home = ["HTML", "RSS", "JSON"]
  section = ["HTML", "RSS"]
  taxonomy = ["HTML", "RSS"]
  term = ["HTML", "RSS"]

js

static/on-this-day.js

async function init() {
  const res = await fetch('/index.json');
  const posts = await res.json();

  const picker = document.getElementById('datePicker');
  const result = document.getElementById('result');

  const today = new Date();
  picker.value = today.toISOString().slice(0, 10);

  function render(dateStr) {
    result.innerHTML = '';
    const mmdd = dateStr.slice(5);

    const matched = posts.filter(p => p.date.slice(5) === mmdd);

    if (matched.length === 0) {
      result.innerHTML = '<li>這天沒有文章</li>';
      return;
    }

    matched.forEach(p => {
      const li = document.createElement('li');
      li.innerHTML = `<a href="${p.url}">${p.title}</a> (${p.date})`;
      result.appendChild(li);
    });
  }

  render(picker.value);
  picker.addEventListener('change', e => render(e.target.value));
}

document.addEventListener('DOMContentLoaded', init);

從 index.json 抓取文章資料，並把日期初始值選成當日，接著只用 MM-DD 月與日來過濾文章，並且提供手動切換日期。

總結

其實所有 code 都是 AI 寫的，Eddie 只是稍微看過、知道它寫了什麼、邏輯是什麼。
但功能都有了，目的有達到了，這樣就好XD

>> Home