最近收到Synology通知說C2 Password將於2027年6月22日停止服務，大約還有一年的期限來轉移到其他方案。我本身有購買Proton Pass加SimpleLogin的終身方案（限時優惠），順勢轉移到Proton Pass密碼管理工具。如果只要密碼管理功能，免費方案就夠用了，需要好用一點的進階功能（例如2FA驗證器有數量限制），一定要要付費方案才有（包含全家桶服務）。

• Proton Pass方案比較：
  https://proton.me/zh-tw/pass/pricing#compare-plans

CSV匯入

Proton Pass不支援C2 Password的CSV直接匯入（匯入後會顯示一堆Unnamed item空項目），必須修改一下CSV欄位名稱才行。有兩種方式：

手動修改CSV

1. 下載Proton Pass CSV模板，使用Google Sheet開啟，第一列欄位顯示如下：

   name,url,email,username,password,note,totp,vault
   

2. 匯出C2 Password CSV，使用Google Sheet開啟，第一列欄位顯示如下：

   Login_URLs,Login_URL_Match_Rules,Login_Username,Login_Password,Login_TOTP,Display_Name,Tag,Tag_Color,Favorite,Notes,Others
   

3. 使用Google Sheet編輯C2 Password CSV第一列欄位名稱對應Proton Pass CSV模板欄位名稱，不用照順序（欄位名稱會自動對應）：

   • 將Display_Name欄位名稱改為name。
   • 將Login_URLs欄位名稱改為url。
   • 將Login_Username欄位名稱改為username。
   • 將Login_Password欄位名稱改為password。
   • 將Notes欄位名稱改為note。
   • 將Login_TOTP欄位名稱改為totp。

4. 然後將C2 Password特定欄位刪除（整欄），儲存檔案後匯入到Proton Pass，確認是否匯入成功。看到資料顯示無誤，開啟C2 Password服務，比對Proton Pass每筆資料的自訂欄位，手動補填回去。

傳統的 Hexo 搜尋方案通常有幾個痛點：Google 自訂搜尋（CSE/PSE）帶有廣告、樣式難改；Algolia 有免費額度限制、設定複雜；而傳統的本地搜尋外掛（如 hexo-generator-search）會將所有文章打包成單一 JSON 檔，當文章量破百篇時，會嚴重拖慢網頁載入速度。

如果你追求極致的體驗，強烈建議改用基於 Rust 和 WebAssembly 開發的 Pagefind。

它專為靜態網站設計，會在 Hexo 打包出 public 靜態檔後，掃描並建立「切碎的搜尋索引（Index Fragments）」。這使得它即使面對上萬篇文章的大型網站，也能在完全無伺服器（Serverless）的環境下，維持毫秒級的極速搜尋，且頻寬消耗極低。

本文將帶你一步步在 Hexo 中實作「頂部燈箱（Modal）搜尋」的效果。

步驟一：在導覽列加入搜尋按鈕

我們不需要佔用側邊欄空間，直接在頂部導覽列加上一個搜尋觸發按鈕即可。

打開你主題的導覽列模板（通常在 layout/_partial/header.ejs 或類似路徑）：

<li>
  <a href="#" id="open-search-modal">
    🔍 搜尋
  </a>
</li>

步驟二：建立燈箱介面與「防穿透腳本」

實作燈箱搜尋時，最容易遇到的是手機版（尤其是 Android 瀏覽器）的「滾動穿透」大魔王：當點擊輸入框、手機虛擬鍵盤彈出時，底層網頁會被強制捲動拉扯。

為了解決這個問題，我們必須導入「雙重 CSS 鎖定」與「觸控事件攔截」。

通常有些網站內容需要即時性通知（例如新聞網站），建議將RSS加入WebSub宣告，因為它是主動推播，而一般RSS是傳統輪詢。可以看一下這篇文章的解說：〈How WebSub works: and why it’s good for your podcast〉。

但是網站有用Cloudflare服務的話，WebSub Hub極有可能被其防火牆阻擋而無法推播。

前言

WebSub（前身為 PubSubHubbub）是一個讓網站能「主動推播」內容更新給訂閱者的協定，常見應用包含 RSS to Email 服務（如 Blogtrottr）、RSS 閱讀器的即時更新（如 Feedly、Inoreader、FreshRSS），以及加速 Google 搜尋收錄。

對靜態網站來說，實作 WebSub 的標準流程是：

1. 在 RSS feed 裡宣告使用的 Hub（如 Google Hub 或 Superfeedr）。
2. 在每次部署後，透過 CI/CD（如 GitHub Actions）ping Hub 通知「內容已更新」。

這個流程看起來簡單，但有一個很容易被忽略的問題，導致設定完全正確、ping 也成功，Hub 卻無法推播。

問題描述

症狀：

• GitHub Actions ping Hub 回傳 HTTP 204（表示 Hub 成功收到通知）。
• 但 RSS 訂閱者（如 Blogtrottr）收到更新的時間仍然很慢，沒有明顯改善。
• 到 Google Hub 的 Topic Details 頁面查看，發現 Last successful fetch 停在舊的時間點
• Google Hub 甚至出現 HTTP 504 的 fetch error。

因為部落格的留言板改用Twikoo，其中的API可取得最新留言資料，所以特別在側邊欄增加一個「最新留言」區塊，目的有兩個：

1. 先將後端喚醒（Vercel），前端執行背景更新，讓留言內容可以更快載入。
2. 讓訪客知道最新留言有哪些（廢話XD）。

本文件記錄了 Hexo（Light 主題）從新增「最新留言」區塊，到解決效能瓶頸、消除佈局位移（CLS），以及解決 Vercel 冷啟動延遲的完整最佳化過程。

一、建立側邊欄小工具（Widget）

在 themes/light/layout/_widget/recent_comments.ejs 建立檔案。我們採用原生 fetch API 而非 SDK，以確保首頁載入負擔最小化。

1. HTML 結構與骨架載入效果（Skeleton Screen）

預先放置 5 個骨架元件，防止資料載入前的空白，並預留空間減少佈局位移。

<% if (theme.twikoo && theme.twikoo.enable){ %>
<div class="widget tag">
  <h3 class="title">最新留言</h3>
  <ul class="entry" id="twikoo-recent-comments">
    <li class="twikoo-skeleton">
      <div class="sk-text"></div><div class="sk-text" style="width: 70%;"></div>
      <div class="sk-meta"></div>
    </li>
  <li class="twikoo-skeleton">
      <div class="sk-text"></div><div class="sk-text" style="width: 40%;"></div>
      <div class="sk-meta" style="width: 30%;"></div>
  </li>
  <li class="twikoo-skeleton">
      <div class="sk-text"></div><div class="sk-text" style="width: 85%;"></div>
      <div class="sk-meta" style="width: 45%;"></div>
  </li>
  <li class="twikoo-skeleton">
      <div class="sk-text"></div><div class="sk-text" style="width: 50%;"></div>
      <div class="sk-meta" style="width: 35%;"></div>
  </li>
  <li class="twikoo-skeleton">
      <div class="sk-text"></div><div class="sk-text" style="width: 75%;"></div>
      <div class="sk-meta" style="width: 40%;"></div>
  </li>
</ul>
</div>
<% } %>

原本用的giscus本身很完美，但是一定要登入Github帳號才能留言，瞬間提高留言門檻。看到中國很多開源自架的留言系統，其中Twikoo可以使用第三方免費資源來部署，安裝步驟和備份檔案都很簡單，非常符合我的需求。裝完之後，幾年前在Disqus備份下來的檔案，稍作修改可順利匯入到Twikoo，留言顯示上沒遇到太大問題。

先參考這兩篇文章把Twikoo後端搞定：

• 使用Twikoo架設匿名留言板
• 【Vercel】Twikoo | 为你的HEXO加入评论系统

然後要改部落格主題，不會改的話，丟給AI幫你弄好。因為Twikoo功能很多，記得看一下哪些設定參數是你需要的：

• Twikoo评论系统使用指南

1. 基礎架構與更新機制

Twikoo 是一個採用前後端分離的輕量級留言板。

• 資料庫：使用 MongoDB Atlas（免費 512MB 方案），負責儲存 comment（留言）與 config（系統設定）。
• 後端 API：部署於 Vercel。
• 版本更新：
  1. 開啟 GitHub 儲存庫，編輯 package.json，將 "twikoo-vercel": "latest" 其中的 latest 改成最新版號，點擊 Commit changes，自動觸發 Vercel 部署。
  2. 之後透過 GitHub 儲存庫的 package.json 鎖定 "twikoo-vercel": "1.7.7"，並利用 .github/dependabot.yml 每日排程檢查。當有新版時，Dependabot 會發出 PR，手動 Merge 後 Vercel 即會自動重新部署升級。

面對第三方代管平台（如 GitHub）無預警鎖帳號或服務中斷的風險，建立「異地備援」是開發者保護資產的核心策略。本文件將說明如何將專案從 GitHub 完整備份至 GitLab。

一、 事前準備：取得 GitLab 存取金鑰（PAT）

無論是手動匯入還是自動化推送，建議先申請一把具備「寫入」權限的鑰匙。

1. 登入 GitLab，點擊右上角個人頭像 → Settings → Access Tokens。
2. 點擊 Add new token：
   • Token name：建議命名為 GitHub_Backup_Sync。
   • Select scopes：勾選 write_repository。
3. 點擊建立後，務必立即複製並保存該 Token，離開頁面後將無法再次查看。

二、 手動匯入：適用於「不常更新」的冷備份

對於已經進入維護期、不常有 Commit 的專案，直接使用 GitLab 內建的匯入工具最省事，且能完整保存 Issues 與 PR 紀錄。

步驟

1. 在 GitLab 點擊 New project → Import project → GitHub。
2. 點擊 Authenticate with GitHub，引導到 GitHub 進行授權。
3. 在專案列表中選擇要備份的儲存庫。
4. 關鍵勾選項目：
   • Import Markdown attachments：強烈建議勾選，這會將 Issues 裡的圖片實體下載到 GitLab 伺服器，避免 GitHub 帳號刪除後圖片失效。
   • Import collaborators：建議取消勾選，避免將 GitHub 的歷史貢獻者誤判為 GitLab 使用者而達到免費帳號的人數上限（402 錯誤）。

為了提升部落格的載入效能與行動裝置的瀏覽體驗，本次將 hexo-theme-light 主題預設的 Fancybox v3 升級至新版的 Fancybox v5（@fancyapps/ui）。

Fancybox v5 最大的優勢在於完全移除了 jQuery 依賴，並且在手機端支援非常順暢的原生手勢（包含雙指捏合與雙擊放大）。趁著這次升級，我們也將主題內依賴 jQuery 的 gallery.js 改寫為純原生 JavaScript（Vanilla JS），進一步達成網站瘦身。

步驟一：下載 Fancybox v5 檔案（本地託管）

為了不依賴外部 CDN，我們將所需的 JS 與 CSS 檔案下載並放置於主題目錄內。

1. 從以下網址下載最新的 minified 檔案：
   • JS：fancybox.umd.min.js
   • CSS：fancybox.min.css
2. 在主題資料夾下建立新目錄並放入檔案：themes/light/source/fancybox5/。

檔案結構如下：

└── themes
    └── light
        └── source
            └── fancybox5
                ├── fancybox.min.css
                └── fancybox.umd.min.js

去年使用Mozilla Solo打造一頁式網站，當初覺得很有趣，當測試用網站，那時間點運氣好也撿到一個符合主題的網域，所以決定拿來當養網域的網站😆。長期下來快一年的時間，突然想到要是Mozilla Solo收掉怎麼辦？找過多種備案，例如：

• 免費架站平台：Google Sites、WIX、Weebly等等。
• 自架方案：Hugo、Hexo、11ty等等。

全部都不甚滿意，尤其是免費架站平台，想要免費、自訂網域、允許程式碼不受框架限制，根本就沒有（突然發現Mozilla Solo免費帳號很大方）。而自架方案，想要從現有網站框架裡找類似的一頁式主題，改成自己要的主題，都覺得很難改。

因為另一個《台股法人買賣超整理》網站是用Astro做的，問了AI之後，也決定用Astro和Tailwind CSS來開發，加上都是請AI去做，所以很快就完成了。

以下是主要的開發步驟：

1. 主題內容：我是複製目前託管在Mozilla Solo的網站主題。
2. 網站框架：我只選用Astro，AI建議用Astro和Tailwind CSS。
3. 網站生成：網站架構、程式碼都是由AI產生，先產生基本框架、資料夾、檔案和路徑。
4. 前置作業：自己要先將圖檔轉檔（大圖降解析度）、建立JSON檔案和Markdown檔案等等，準備好後放到對應的路徑資料夾，這些都是之後模板要引用的資料。
5. 開發過程：因為Astro開發像堆積木般的方式的體驗，每個模組元件都高度分離，所以從上（Header）到下（Footer）一個一個區塊去開發，再拼湊起來。其中Gallery的燈箱效果原本是用輕量級的GLightbox，但是它沒有計數器和手機版的左右箭頭，用JS額外載入的話會變成無法即時同步顯示（零點幾秒的時間差），試了非常多次都不能改到很滿意，最後改用Fancybox v5解決（v4開始不需要jQuery），因為它本身功能就已經包很多。
6. 調整版型：等每個區塊都拼湊完成後，大致上算是開發告一段落，剩下工作就是微調模板的細節，以符合自己的需求。
7. 擴充功能：Astro框架非常靈活，之後想要做新的頁面或部落格都不是問題。

網站：https://discover-tw-astro.pages.dev/
Github：https://github.com/carl0schen/discover-tw-astro

這幾天登入rss2json.com出現「419 Please try again」訊息：

試過各種方式一直無法登入，所以請AI幫忙找了一些免費的替代方案，大部份限制都很多，最終還是使用Cloudflare Workers自行架設RSS to JSON服務。

前言

如果你曾經用過 rss2json.com 把 RSS feed 轉成 JSON 供前端使用，你大概也遇過它偶爾無法連線、API Key 額度不夠用，或是某天突然掛掉的狀況。

這篇教學示範如何用 Cloudflare Workers 自架一個相同功能的服務，完全免費、全球低延遲、自己掌控，不再依賴第三方。完成後你會有：

• 一個接受 RSS URL、回傳 JSON 的 API Endpoint
• CORS 白名單 + Secret Token 雙層防護，避免被盜用
• Worker 內部 Cache API，5 分鐘內不重複打 RSS 來源，大幅降低回應延遲
• 一個測試用 HTML 頁面
• 一個可直接套用的前端嵌入範例

最近要在Cloudflare Pages刪除專案遇到無法刪除的問題，官方文件說這是一個已知問題：

You may not be able to delete your Pages project if it has a high number (over 100) of deployments. The Cloudflare team is tracking this issue.

搜尋網路上有很多自動刪除部署紀錄的方式（包含官方），但我覺得有點麻煩和複雜，所以請Gemini寫一個無腦執行的Python腳本（簡單測個幾次，修正一些錯誤，並加入一些功能）。

📌 前言

當 Cloudflare Pages 專案累積超過 100 個部署紀錄時，嘗試刪除專案會出現 Your project has too many deployments to be deleted 錯誤。本教學使用一個安全的 Python 腳本，透過 API 批次清理舊的部署紀錄，讓您能順利刪除專案。

特色：

• ✅ 免安裝依賴：使用 Linux/macOS/Windows 內建 Python 即可執行。
• ✅ 安全機制：保留最近 N 筆紀錄、防無限迴圈、支援 Ctrl+C 強制中斷。