訪客計數器 GIF：用 Pillow 生成了一個 88×31 畫素的 LED 七段數碼管動畫計數器。12 幀迴圈、掃描線滾動、輝光效果、呼吸燈。每次首頁訪問自動更新計數並重新生成圖片。邏輯獨立在 scripts/counter.py。
伺服器資源監控：加了 psutil 讀取 CPU、記憶體、磁碟、執行時長，沒裝 psutil 也有 ctypes 回退方案。

SEO 全面最佳化

HTML 4.01 Transitional DOCTYPE，<html lang="zh/en">
每頁獨立 <title>、自動生成 <meta description>（正文首段提取）、<meta keywords>（標籤提取）
<link rel="canonical"> + <link rel="alternate" hreflang="..."> 中英互鏈
Open Graph + Twitter Card 完整標籤
全站 <font size="6"> 自動包裹 <h1>、<font size="5"> 包裹 <h2>
麵包屑導航（首頁 > 部落格 > 文章標題）
Sitemap 重寫：14 → 47+ URL，含 changefreq / priority
security.txt + /.well-known/security.txt（RFC 9116）

IE 5.5 相容性審查

五月初用 AI 做了全站相容性審查，掃出 30+ 處不相容項：rgba()、display:flex、box-sizing、overflow-x/y、placeholder、querySelector 等。形成審計文件和博文。核心 JS（留言板、編輯器）已做好 IE 5.5 雙路徑回退。

留言板改進

樓號系統：每條留言有絕對樓號 #N，灰色顯示在右側
回覆引用：點選回覆按鈕插入 @xxx[#N]，構建時自動剝離引用號
遮蔽詞：data/runtime/banned_words.json 定義，自動替換為 <em>*</em>
changelog 轉義：構建時 HTML 轉義，防止 <font> 標籤汙染頁面

文章評論系統

給每篇博文加了評論區，A+B 混合模式：CGI 處理提交 + 構建時注入已有評論。支援樓中樓（無限巢狀）、表情、IP 開關。提交後 302 跳回評論區錨點，後臺非同步構建。頁面底部的 page-* 獨立頁面也有評論區。

郵件系統最佳化

後臺非同步傳送：之前 @回覆發郵件是同步的，使用者提交留言後要等郵件發完才能看到頁面跳轉。現在改成了獨立程序後臺傳送（mailer.py）。
表情在郵件中渲染：[em07] 轉成 <img> 標籤指向伺服器上的 GIF。
郵件 HTML 模板提取：郵件模板獨立為 src/components/cgi/mailer-email.html，用 {變數} 佔位符。

Markdown 博文支援

全站 50+ 篇博文和獨立頁面全部從 HTML 轉為 Markdown。建立了 scripts/md2html.py 轉換器——支援標題/粗體/斜體/程式碼/表格/腳註/引用/圖片。構建時自動檢測 .md 字尾並轉換。舊的 HTML 原始檔歸檔到 src/archive-html/。MD 和 HTML 可以混用。

Web 伺服器最佳化

HTTP/1.1 + keep-alive（單連線複用）
ThreadingMixIn 多執行緒（請求並行，不再排隊）
靜態資源強快取：Cache-Control: max-age=86400 + Expires: 2030
啟動引數 nolog nocount
路由表重構，/.well-known/ 支援

專案結構整理

data/ 分層：runtime/（手工維護）build/（自動生成）comments/ logs/
assets/images/backgrounds → assets/images/bg
所有指令碼遷移到 scripts/，.cmd 入口統一
changelog.txt → data/logs/changelog.log
外部資源本地化（mirror-external.py），去掉 preconnect 外鏈
counter.py、banned_words.py 等新指令碼獨立拆分

其他

統計頁排除指定 IP（180.154.121.226）
404.html 統一為 HTML 4.01 標準
編輯器路徑修正（pages/blog → blog）
全站圖片 max-width:100%;height:auto; 防溢位
博文數量上升至 50+ 篇，sitemap 同步覆蓋
RSS 改為從編譯好的 dist 頁面提取標題+副標題

留言板表情系統

畫素風 GIF 表情：留言板加了 20 個畫素風表情。點選輸入框下方» 表情摺疊面板，展開選擇，也支援手動輸入 [em01] 到 [em20]。儲存時以程式碼儲存，網頁和郵件中都會自動轉成圖片顯示。

表情面板預設不載入圖片（JS 延遲生成），省了 20 個初始 HTTP 請求。

表單緊湊化：留言板表單從分散的 label+input 改成了 HTML table 表格佈局，Name/Email/內容/顯示IP/傳送按鈕全部在一個 125px 寬的格子裡。表情面板透過摺疊節省空間，1px CSS 邊框替換了原來的 2px 預設邊框。

郵件系統最佳化

後臺非同步傳送：之前 @回覆發郵件是同步的，使用者提交留言後要等郵件發完才能看到頁面跳轉。現在改成了獨立程序後臺傳送（mailer.py），透過 stdin 傳遞內容，subprocess.Popen 啟動後立即返回。
表情在郵件中渲染：郵件正文裡的 [em07] 現在會轉成 <img> 標籤指向伺服器上的 GIF，收到郵件的人也能看到表情動畫了。

日誌系統重構

統一歸類管理：之前各模組的日誌散落在不同位置，現在全部歸到 data/logs/ 下：


data/logs/
├── access/          ← 伺服器訪問日誌（每日 .log，舊日誌 .gz 壓縮）
├── guestbook.log    ← 留言板操作（@提及、SMTP 狀態）
├── editor.log       ← 編輯器操作（新建/編輯/刪除、認證失敗）
├── search.log       ← 搜尋關鍵詞 + 結果數
├── toolbox.log      ← 工具箱使用記錄
├── build.log        ← 構建記錄（頁面構建、全站重建）
└── error.log        ← 跨模組錯誤

建立了統一的 logger.py 模組，所有 CGI 指令碼透過它寫入對應分類日誌。

效能最佳化

外部徽章圖片加了 loading="lazy"，不阻塞首屏渲染
表情面板的 20 張 GIF 也改成了 loading="lazy"，首屏請求減少 20 個
header 加了外部域名 preconnect 預連線提示
側邊欄評論區鎖定 700px 寬度，防止長內容撐破布局

其他小改進

web 伺服器改為白名單路由，敏感目錄（data/、scripts/、src/）統一 403
全站新增 <!DOCTYPE html> 宣告，告別 Quirks Mode
editor.py 增加操作審計（誰在什麼時候改了什麼文章）
構建指令碼增量快取改用 MD5 內容雜湊，元件變化能正確觸發全站重建
部落格編輯器、搜尋引擎、工具箱全部接入了統一日誌
更新了 README 文件，補充了所有新增功能的說明

閱讀模式模式

五月初做了一個大功能：給每篇博文和獨立頁面生成閱讀模式版本。

雙主題切換：普通版是 90s 霓虹暗色主題，點選麵包屑右側 [閱讀模式] 切換到淺色閱讀版。閱讀版米白背景 #f4f4ec、深灰文字、經典藍 #3366cc 連結，字型從宋體換成了 Georgia 襯線棧。
URL 目錄化：閱讀版 URL 用 /read/ 目錄字首，不再像早期那樣用檔名字首。/read/blog-xxx、/en/read/blog-xxx，結構清晰，切換模式不會跳出當前語言。
佈局差異：普通版 980px 三欄，閱讀版去掉了右邊欄和 banner，內容寬度從 700px 擴到 840px。部落格/頁面保留左側 TOC 目錄欄（140px），首頁則 840px 內容居中，沒有空目錄欄。
閱讀版自有元件：reading-header.html、reading-footer.html、reading-sidebar-left.html 等五個閱讀專用元件，和 90s 元件完全獨立。閱讀版去掉留言板、更新日誌、評論區、8831 友鏈，只留文章內容和 TOC。
歸檔 & 標籤頁也有閱讀版：/read/archive、/read/tags，同樣是淺色主題。generate-archive.ps1 在生成普通歸檔後自動生成閱讀版本。
麵包屑統一：普通版和閱讀版麵包屑都是 table 左右佈局——左側路徑 首頁 » 部落格 » 標題，右側 [閱讀模式/返回原版] [English/中文] 兩個按鈕。普通版 90s 霓虹色系，閱讀版深藍 #3366cc。
連結自動重寫：閱讀版構建時把正文裡指向普通版的 blog/page/archive/tags 連結自動改成 /read/ 版本，使用者不會點著點著跳出閱讀模式。

IP 偏好系統

為了讓模式切換"記住"，做了服務端 IP 偏好記錄：

無 JS / 無 Cookie：偏好記錄在 data/runtime/ip_prefs.txt，格式 IP|mode=read|lang=en。訪問 /read/<em> 自動記錄 mode=read，訪問 /en/</em> 自動記錄 lang=en。
內聯處理：?set_mode=normal 和 ?set_lang=zh 引數服務端處理完偏好記錄後直接返回頁面，不發重定向——避免 IE 5.5 重定向卡死。
MSIE 跳過 303：IE 5.5 每個重定向都要重建 TCP 連線，極慢。服務端檢測到 MSIE UA 後跳過所有偏好重定向，IE 5.5 使用者手動點 [閱讀模式] 切換。
_pref_handled 標記：偏好處理完後跳過 .html→clean URL 重定向，防止出現 "點返回原版 → 301 到 clean URL → 又觸發 IP 偏好 303 回到閱讀版" 的死迴圈。這個 bug 浪費了很多時間才定位。

字型系統改進

閱讀模式正文 face 統一：構建時把 md2html.py 生成的 face="'宋體',SimSun" 替換為 face="Georgia, '宋體', SimSun"，保證閱讀模式下通篇都是襯線字型。
程式碼等寬字型：閱讀模式 <code> 標籤字型棧 JetBrains Mono → Georgia → 宋體 → SimSun → monospace。CSS 和 face 屬性雙寫，現代瀏覽器走 CSS，IE 5.5 走 face 屬性。
顏色剝離精細化：之前閱讀模式一刀切去掉所有 color 屬性和 color: 樣式宣告，結果把麵包屑和頁尾的灰色也去掉了。現在只剝離 90s 熒光色（#ff66cc、#ccffcc、#00ffff、#ffff00、khaki 等），麵包屑 #999999、頁尾 #aaaaaa 不受影響。

頁面細節最佳化

Banner 僅首頁顯示：部落格和獨立頁面去掉頂部 960×182 橫幅，內容直接以麵包屑開頭，閱讀區域更緊湊。
資源許可頁面：新建 /resources-license，列出了本站使用的全部字型（宋體、Georgia、JetBrains Mono 等）、軟體（Pillow HPND、psutil BSD、Python PSF）、友鏈徽章來源、音訊宣告、CC BY-NC-SA 4.0 許可全文。頁尾加上了連結。
語言切換修復：英文首頁的歸檔連結之前硬編碼指向 /archive.html（中文歸檔），改成了 /en/archive.html。閱讀版連結重寫規則修了順序 bug——中文正則先執行誤匹配了 /en/ 英文路徑。

程式碼質量

三個核心檔案加滿註釋：web_server.py（~565 行）、build.ps1（~930 行）、rebuild-all.ps1（~230 行）全部加了分段註釋，標註了每一步的輸入輸出、邊界條件和設計決策。方便後續維護和重構。
PowerShell $? 自動變數陷阱："$var?param=value" 中的 ? 會被 PowerShell 解析為 $? 自動變數，導致字串後面部分被吞掉。改用字串拼接 $var + "?param=value" 避開。
PowerShell $var.html 屬性訪問陷阱："$originalPage.html" 會被解析成 $($originalPage.html) 即訪問字串的 .html 屬性，返回 $null。改用 ${originalPage}.html 或直接拼接。

獨立留言板頁面

全量展示：新建 /guestbook.html 獨立頁面，展示全部留言（不限於側邊欄最近 20 條）。980px 居中佈局，無左右側欄，留言框風格對齊主頁側邊欄。
表情面板橫排：去掉了表格佈局，20 個表情圖示橫向排列，點選插入。
導航簡化：麵包屑 首頁 » 留言板 + [English]，去掉切換主題，底部加返回主頁按鈕。
回覆功能完整：@使用者名稱[#樓層] 格式，表情插入，IP 顯示開關。

IE5.5 不相容功能清單

新增獨立頁面 /page-ie55-incompatible，誠實列出全站 22 項不相容 IE5.5 的功能（CSS 11 項、HTML 7 項、JS 4 項），附帶完整技術棧總覽和分層退化相容策略。

郵件通知修復

mailer.py 路徑錯誤：data/guestbook.txt → data/runtime/guestbook.txt，修復後 find_email() 能正確讀到留言資料
extract_mentions 使用者名稱汙染：@DragonRSTER[#50] 的 @(\S+) 正則把 [#50] 也抓入使用者名稱，導致 find_email_by_name('DragonRSTER[#50]') 找不到人。改為匹配後自動 strip 末尾 [#N]
guestbook.py 新增 target_email 直接傳參給 mailer，避免二次查檔案

側邊欄改進

Sticky 定位：全部 9 個側邊欄（含閱讀模式）加 position: sticky; top: 10px，滾動時始終保持在視野內。IE5.5 不支援，退化為正常滾動
回頂按鈕：4 個右側欄底部加 ↑ 回頂部 連結，header 加 <a name="top"> 錨點
左側欄全部留言入口：表情行右側加 全部留言 連結，指向獨立留言板頁面

英文首頁與頁面細節

新建 src/content/index/index-en.html，英文首頁完整翻譯
修復普通模式頁面麵包屑"頁面"無超連結（指向 /archive.html）
SEO 後設資料 + Open Graph + canonical/hreflang 自動生成

—— 寫於 2026 年 5 月 14 日

« 西數HC620食用指南

返回主頁

我與ThinkPad »

工具

[工具箱]
[隨機文章]

本文標籤

日常更新日誌網站建設

↑ 回頂部