將Hexo Light主題的文章目錄改為折疊式TOC

注意

本文由 Gemini 3 Pro 語言模型產生。

前言

原本 Hexo Theme Light 的 TOC(目錄)在手機版排版不佳,在電腦版若使用懸浮定位又容易遮擋內容。為了徹底解決這個問題,我們決定採用「全平台統一」的設計:將目錄製作成一個可折疊的卡片區塊,嵌入在文章開頭。此版本特別針對 CSS 動畫的「幽靈高度」延遲問題進行優化,透過 JavaScript 動態計算高度,讓收合動作達到零延遲的滑順感。

修改步驟

1. 修改模板檔案

編輯 themes/light/layout/_partial/article.ejs
將原本輸出 TOC 的位置替換為以下內容。

程式碼重點說明:

  • 使用 scrollHeight 取得目錄的精確高度,解決 CSS max-height 設太大導致收合時會有延遲感的問題。
  • 使用 void body.offsetHeight 強制瀏覽器重繪(Reflow),確保動畫能正確觸發。
  • 利用 setTimeout 配合 CSS 動畫時間(0.3s)切換按鈕文字。

開機時讓Windows Terminal自動背景常駐不跳出視窗

主要是為了讓WSL2中的Docker能夠在開機時自動執行。

注意

本文由 Gemini 3 Pro 語言模型產生。

目標:開機自動啟動 Windows Terminal,不顯示視窗,直接縮小至右下角通知列。

1. 設定 Windows Terminal 行為

確保 Terminal 知道當它最小化時應隱藏至通知列,而非留在工作列。

  1. 開啟 Windows Terminal,按 Ctrl + , 進入 [設定]
  2. 在左側選單選擇 [啟動]
  3. 關閉 在電腦啟動時啟動(Launch on machine startup)。
    • 目的:避免系統開機時與腳本衝突,導致多開一個視窗。
  4. 在左側選單選擇 [外觀]
  5. 開啟 一律在通知區域中顯示圖示(Minimize to notification area)。
  6. 開啟 將終端機最最小化時,隱藏通知區域中的終端機(Hide Terminal in the notification area when it is minimized)。
    • 目的:當視窗最小化時,會從下方「工作列」消失,只留在右下角「通知列」。
  7. 儲存設定。

入手Google Pixel 10 256GB

其實這支Pixel 10不是我的,是我妹的。因為我之前給他的Pixel 6 Pro在今年元旦早上掛了,無法進入系統,可以進Fastboot Mode用Android Flash Tool刷機,但是怎麼刷都沒用,只要一進到系統、Recovery Mode、Rescue Mode,系統就是會跳回Fastboot Mode,很大機率是硬體壞了。

因為急用,稍微到網路上比一下價錢,雖然P家購物價格不是最便宜的,不過尚可接受,重點是他有快速到貨(還是慢了一天小賺一百元購物金),退貨也不會跟你囉哩叭唆在那刁難。目前購買Google Pixel 10可以免費試用Google One 2TB 6個月,如果你是已訂閱者,則無法使用這項優惠,官方文件──〈Pixel裝置專屬Google One優惠〉有詳細說明。

比了一下規格,這次Pixel 10最大改變是相機大升級,因為前幾代的基本款,根本沒有光學變焦(望遠鏡頭),沒想到這一代基本款竟然有五倍光學變焦,令我感到驚艷。

Pixel相機規格比較

解決WSL2 Docker執行Miniflux出現「socket: address family not supported」錯誤

該問題點很好重現(跟架設環境有關):登入到Miniflux網頁 → Feed → 點一下「在背景更新所有Feed」或是等Miniflux自動更新Feed,在Feed頁面會出現很多網站的RSS都顯示socket: address family not supported by protocol,但是手動更新單一網站的RSS卻又是好的。在Docker Desktop和Rancher Desktop沒遇過,第一次在WSL2安裝Miniflux後遇到這個問題。一直不停詢問Gemini和反覆測試,最後才得以解決。

注意

本文由 Gemini 3 Pro 語言模型產生。

這是一份整理好的技術筆記,特別針對 WSL 2 + Docker 環境下遇到的這個棘手網路問題,詳細記錄了錯誤現象、深層原因以及最終的解決方案。

📍 環境與症狀

環境:

  • OS:Windows 10/11 with WSL 2(Ubuntu 24.04)
  • Platform:Docker running on WSL 2
  • App:Miniflux(Go 語言編寫的 RSS 閱讀器,基於 Alpine Linux Image)

症狀:

  1. Miniflux 無法抓取 RSS Feed,日誌中大量出現以下錯誤:

    dial tcp [2606:4700:3036::ac43:83b7]:443: socket: address family not supported by protocol
    
  2. 在 WSL 主機上使用 curl 測試該網址完全正常(因為 curl 自動走 IPv4)。

  3. 使用 docker exec 進入容器 ping 外部網站,也能解析出 IPv4。

  4. 特殊背景:因 ISP 或路由器 IPv6 連線不穩,已在 Windows 的 %UserProfile%/.wslconfig 中設定 kernelCommandLine=ipv6.disable=1 強制在核心層級關閉 IPv6。

在Windows使用WSL2建立原生Docker環境架設Miniflux

在Windows 10使用Docker Desktop和Rancher Desktop架設Miniflux,體驗都不是很好──Docker Desktop常當掉;Rancher Desktop有時莫名掛掉,所以決定用WSL2建立原生Docker環境架設Miniflux。目前使用後覺得網頁讀取反應快很多,之前用Rancher Desktop架設的Miniflux有時卡卡的,偶爾遇到某些文章點下一頁會卡住,關掉網頁重開才會好。

注意

本文由 Gemini 3 Pro 語言模型產生。

這份筆記記錄了如何從零開始,在 Windows 10/11 上使用 WSL 2(Ubuntu)建立原生 Docker 環境,部署 Miniflux RSS 閱讀器,並設定自動備份資料庫至 Windows 硬碟,最後配置 Windows Terminal 達成開機常駐。

階段一:安裝 WSL 2 與 Ubuntu

1. 更新 WSL 元件

以系統管理員身分開啟 Windows PowerShell,執行:

wsl --update

2. 安裝 Ubuntu

如果尚未安裝,請執行:

wsl --install -d Ubuntu

或是指定版號安裝(建議使用長期支援版本):

wsl --install -d Ubuntu-24.04
  • 安裝完成後會自動跳出視窗。
  • 依照指示設定 Linux 的 Username(使用者名稱)與 Password(密碼)。

Google AI Pro家庭共享方案

上個月Google推出Gemini 3 Pro,免費帳號也可以使用一些額度,用了一個星期,額度每次很快用完,此時語言模型會跳回免費版便開始鬼打牆,覺得很煩,所以決定訂閱Google AI Pro,開啟家庭群組來共用。

配額和限制

雖然官方文件沒有明定,但根據網友的說明一些外國網友推測,每個成員的使用額度都是分開計算,只有Google 2TB容量是共用。

方案比較

一些新興國家多了一個Google AI Plus方案,對於想要使用AI不需要雲端空間的使用者,看似非常划算,但比較過Google AI Plus、Google AI Pro、Google AI Ultra三個方案差異,根本就是一分錢一分貨,Google AI Plus並沒有討到便宜。

家庭共享

Google家庭共享的服務都是包在一起的,例如你加入網友的Youtube Premium家庭共享,就不能加入其他人的Google AI Pro家庭共享,但是你可以用其他Google分身帳號加入。因為Google AI Pro綁定在Google One,所以要記得開啟Google One家庭共享。

Hexo Light主題新增程式碼複製功能

注意

本文由 Claude Sonnet 4.5 語言模型產生。

適用於使用 highlight.js 的 hexo-theme-light 主題。

本教學使用 CSS ::before 顯示 Font Awesome 圖示,無需載入完整的 Font Awesome CSS。

已針對 Firefox、Brave、Safari 進行跨瀏覽器測試與優化。

前置準備

確認你的主題符合以下條件:

  • ✅ 使用 highlight.js 進行程式碼語法高亮。
  • ✅ 主題內建 Font Awesome 字體檔案(在 source/css/font/ 目錄)。

步驟 1:下載 clipboard.js

下載 clipboard.js 並放到主題的 js 資料夾:

  1. 前往 https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js
  2. 右鍵另存新檔,存為 clipboard.min.js
  3. 將檔案放到 themes/hexo-theme-light/source/js/ 目錄。

《台股法人買賣超整理》網站

最初每天把PTT網友整理的「上市投信買賣超」、「上市外資買賣超」、「三大法人買賣金額統計表」連結貼給同事看。久了之後,這些數字對他們來說也不一定真的想看(連自己都看到麻痺無感了),所以請AI整理資料,轉成單純的html,分享給他們。整理的資料既然都放到網站上了,乾脆把功能補齊一點──加上RSS訂閱,讓大家也可以參考。

網站提供的內容:

利用AI彙整台股盤後資訊,快速掌握市場動向。

因為資料訴求簡單、快速,沒有複雜的架構技術,應該不需用到網頁框架來做。

網站:https://stock.may.tw
Github:https://github.com/carl0schen/stock

重構網站

改用Astro框架請Gemini來做,不論是改版面或新增文章,在維護上都方便許多。重構後的網站的網域、網址結構不變,頁面也加上導航列會更加清楚明瞭。程式碼使用新的Github儲存庫,一樣部署到Cloudflare Pages。

Github:https://github.com/carl0schen/stock-astro

0

將網頁伺服器轉到Caddy和Cloudflared

個人部落格的網頁伺服器是裝在Windows 10的Apache 2.2,雖然只放靜態網頁,使用上沒什麼問題,但考量Apache版本老舊、設定多且複雜、防火牆要開Port、還想留有一點點自主性等因素,這幾天決定轉到Caddy和Cloudflared來跑。

Caddy Server只有一個執行檔,如果要進階功能就得搭配Caddyfile來設定你要的功能,例如重定向或自訂404網頁等等。設定完成,用NSSM將Caddy執行檔包裝成Windows服務來啟動,然後透過Cloudflare Tunnel(Cloudflared)對外跑網頁伺服器。

Cloudflare Tunnel是反向代理服務(內網穿透),所以不用管IP位址、防火牆、Port、憑證等等,只要設定好能透過該服務對外連線,剩下都是交由Cloudflare去處理,安全性提高許多。雖然檔案可以安裝到Windows服務,不過建議和Caddy一樣用NSSM包裝成Windows服務來啟動。

而Caddy和Cloudflared兩個檔案要更新也很簡單,開啟cmd透過執行檔的指令去更新就可以了。

參考文章:

0