القائمة
Use when 要為部落格撰寫帶圖片的新文章、需要把圖片上傳到 img.allenspace.de 圖床、或文章圖片出現 404 / CSP 擋圖 / OG font check 失敗時
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | publishing-image-posts |
| description | Use when 要為部落格撰寫帶圖片的新文章、需要把圖片上傳到 img.allenspace.de 圖床、或文章圖片出現 404 / CSP 擋圖 / OG font check 失敗時 |
文章圖片一律走自有圖床 img.allenspace.de（CSP img-src 只允許它）。
圖床本體是 GitHub repo allen57218/picx-images-hosting（注意：不是部落格的
allen5218 帳號；allen5218 已是協作者，可直接 push）。push 到 master 會觸發
GitHub Pages workflow 自動部署，1–2 分鐘後 https://img.allenspace.de/<檔名> 生效。
下載後必須用 Read 工具實際看過每一張圖才能使用。 只憑檔名或搜尋結果標題選圖 出過事：Commons 上標題為「Vault Boy」的檔案實際是裸體彩繪照片，差點進了正式文章。 檔名、wiki 標題、縮圖描述都不可信，看過才算數。
| 來源 | 用途 | 注意 |
|---|---|---|
| Wikimedia Commons | 照片、實物圖 | 記下授權與作者，寫進圖說（CC BY 要署名） |
| Fandom wiki | 遊戲截圖 | 圖說標注 © 原公司 + 評論用途；URL 加 /revision/latest/scale-to-width-down/1280 取縮圖 |
Commons / Fandom 都是 MediaWiki，用 API 搜檔案再取直連與授權：
# 搜尋（srnamespace=6 = File namespace）
curl -s "https://commons.wikimedia.org/w/api.php?action=query&list=search&srnamespace=6&srlimit=8&format=json&srsearch=關鍵字"
# 取直連 URL + 授權
curl -s "https://commons.wikimedia.org/w/api.php?action=query&prop=imageinfo&iiprop=url|extmetadata&iiurlwidth=1280&format=json&titles=File:檔名.jpg"
https://github.com/allen57218/picx-images-hosting（淺層即可）描述名.隨機10碼.webp：
h=$(python3 -c "import random,string;print(''.join(random.choices(string.ascii_lowercase+string.digits,k=10)))")
cwebp -quiet -q 82 input.jpg -o "描述名.$h.webp"
masterhttps://img.allenspace.de/<檔名> 直到 200 再寫進文章不要用 PicX 網頁介面上傳同一批圖：它會重新產生 hash 檔名，跟文章裡已寫的 URL 對不上。
刪圖注意：從 repo 刪除後源站才 404，但 (a) Cloudflare 邊緣快取要等 TTL 過期或 手動 purge；(b) 檔案仍留在 git 歷史，要徹底清除需改寫歷史。
Frontmatter 參考既有文章（data/blog/）：layout: post、title、subtitle、
date、author、headerImg（圖床完整 URL，headerImg 是 CSS 背景圖，受 CSP 管、
不走 next/image）、headerMask: 0.6、catalog: true、tags（中英混用皆可）。
目錄標題層級（catalog 未設為 false 時）：
## 建立主章節，再依序使用 ###、###### 之前的 ###／#### 不會出現在目錄；需要列入目錄的內容必須放在所屬
## 之後#####／######，否則手機與桌面目錄會不一致文風（使用者明確要求過，2026-07-14 大改一輪後的定案）：
**…。** 後面直接接中文字會無法閉合、渲染成字面星號
（CommonMark flanking 規則），句號要放在 ** 外面：**…**。---
之後的一段斜體「圖片來源：…」裡（CC 圖的攝影者與條款務必列齊）![]() 渲染成普通 <img> 滿版；文章其實是 MDX 管線
（contentlayer contentType: 'mdx'），直式大圖可用 JSX 縮小置中：
<img src="…" alt="…" width="420" style={{display: 'block', margin: '0 auto'}} />文章支援 remark-github-blockquote-alert。要讓需要掃讀辨識的補充資訊更醒目時,使用
GitHub Alert 語法;第一行的類型必須大寫,內文每一行都要保留 >。
依內容選擇類型:
| 類型 | 使用時機 |
|---|---|
NOTE | 背景、定義、容易略過但值得知道的補充 |
TIP | 讓操作更快、更容易的技巧 |
IMPORTANT | 讀者完成目標前必須知道的關鍵資訊 |
WARNING | 不立刻注意就可能出錯的事項 |
CAUTION | 可能造成資料遺失、安全問題或不可逆後果的操作 |
> [!NOTE]
> 這是即使快速瀏覽也值得知道的補充資訊。
> [!TIP]
> 先把圖片轉成 WebP,可減少下載大小。
> [!IMPORTANT]
> 圖片 URL 必須等圖床回應 200 後才能寫進文章。
> [!WARNING]
> 外部圖片網域若未加入 CSP,production 會擋圖。
> [!CAUTION]
> 從圖床 repo 刪圖後,引用該 URL 的既有文章會永久失去圖片。
多段內容要在空白引用行保留 >:
> [!NOTE]
> 第一段補充。
>
> 第二段仍屬於同一個提示框。
不要用 alert 取代一般段落,也不要為了顏色連續堆疊提示框。同一段只選一種最符合 後果嚴重度的類型。
yarn build 若因 Missing OG glyphs 失敗 → yarn update:og-font 再 build，
產出的兩個 OG 字型檔要一起 commit（app/tag-data.json 也會被 build 更新）yarn lint、yarn test:unitci、check
綠燈 → 合併（squash，Vercel 自動部署 main）| 症狀 | 原因 |
|---|---|
| 文章圖片全部不顯示（production） | 圖床網域不在 CSP img-src；圖片必須先上圖床，別直連外部網站 |
| 圖片 404 但 repo 裡有檔案 | Pages 還沒部署完（等 1–2 分鐘）或檔名 hash 對不上 |
build 炸 Missing OG glyphs | 新標題含字體子集沒有的字 → yarn update:og-font |
| push 圖床被拒 403 | 用錯帳號；repo 在 allen57218 名下，確認 allen5218 協作者身分還在 |
| serve 看到舊內容 | next start 掛著舊 build，重啟 serve |