| name | generate-shorturl-pages |
| description | 根據 list.csv 的 title/description 欄位,產生 <id>/index.html 靜態轉址頁面,並附上正確的 og:title、og:description、og:url,讓短網址被分享時預覽標題正確。當 list.csv 有新增或修改列,且該列的 title、description 兩個欄位都有填寫時使用;欄位空白則不處理,交由 404.html 的通用 fallback 處理。 |
產生短網址的靜態轉址頁面
背景
s.g0v.tw 預設走 404.html + JS 讀 list.csv 做轉址(見 README.md)。這個方式分享出去時 OG title 永遠是「g0v shorten url service」,不利於社群傳播。
對於「值得讓分享畫面好看」的項目,可以額外產生一個實體的 <id>/index.html。因為 GitHub Pages 對存在的檔案會直接回應,不會落到 404.html,所以只要這個檔案存在,https://s.g0v.tw/<id> 就會改走這個有正確 OG 標籤的頁面,其餘 id 完全不受影響、繼續吃 404.html 的 fallback。
觸發時機
處理 list.csv 的新增/修改時:
- 該列的
title 與 description 都非空 → 產生或更新對應的 <id>/index.html
- 該列的
title 或 description 任一為空 → 不要產生檔案;如果 <id>/index.html 之前存在(例如原本有填但後來被清空),要一併刪除該資料夾,避免殘留舊內容
不要因為這個 skill 而自作主張幫使用者填 title/description 的內容——那是使用者/PR 提出者該提供的資料,只有兩欄都有值時才動作。
產生規則
- 目標路徑:repo 根目錄下的
<id>/index.html(<id> 就是 list.csv 該列的 id)
- 內容一定要對
title、description、url 做 HTML escape(至少處理 & < > "),避免 CSV 內容中有特殊字元弄壞 HTML
og:url 用 https://s.g0v.tw/<id>/(結尾帶斜線,當作 canonical)
- 用
<meta http-equiv="refresh"> + JS 雙重轉址到 url,並保留一個可點擊的連結給沒有自動轉址的情況
- 不要修改
404.html、list.csv 既有欄位順序、或其他 id 的頁面
HTML 模板
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<meta name="description" content="{{description}}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="g0v">
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{description}}">
<meta property="og:url" content="https://s.g0v.tw/{{id}}/">
<meta name="twitter:card" content="summary">
<link rel="canonical" href="{{url}}">
<meta http-equiv="refresh" content="0; url={{url}}">
<script>document.location.href = "{{url}}";</script>
</head>
<body>
<p>{{title}} — <a href="{{url}}">{{url}}</a></p>
</body>
</html>
完成後
在回覆使用者時,列出這次新增/更新/刪除了哪些 <id>/index.html,並提醒 PR 需要同時包含 list.csv 的變更與對應的靜態頁面。