這是一個專為網頁開發��學者設計的自動化檢查工具,能幫你確保網站符合基本的 HTML、SEO 和響應式設計標準。
這個工具會自動檢查你的網站,並給出 0-100 分的評分,檢查項目包括:
- ✅ 基本 HTML 結構 (
<html>,<head>,<body>) - ✅ 語言屬性 (
<html lang>) - ✅ 字元編碼 (
<meta charset="UTF-8">) - ✅ 頁面標題 (
<title>不能是空的) - ✅ 網頁描述 (
<meta name="description">,長度需介於 50-160 字元) - ✅ 主標題 (
<h1>有且只能有一個) - ✅ 圖片替代文字 (所有
<img>都要有alt屬性) - ✅ 連結有效性 (所有
<a>的href不能是空的或只有#)
- ✅ 手機版 (320px) 無水平捲動
- ✅ 平板版 (768px) 無水平捲動
- ✅ 桌機版 (1440px) 無水平捲動
當你把程式碼推送到 GitHub 的 main 或 develop 分支後,會自動觸發檢查 (website-check.yml):
何時觸發: 當你推送程式碼到 main 或 develop 分支時
做什麼:
- 自動執行網站檢查
- 在 GitHub Actions 的 Summary 頁面顯示結果
- 所有檢查項目必須通過，否則 CI 會失敗
- Cheerio: 用來解析和檢查 HTML 結構 (類似 jQuery 的語法)
- Playwright: 用來在真實瀏覽器中測試響應式設計和水平捲動
- 總共 11 項檢查 (8 項 HTML/SEO + 3 項響應式)
- 每項約佔 9 分 (100 / 11 ≈ 9.09)
- 通過就得分,最後四捨五入
scripts/check-all.mjs 主要流程:
- 尋找 HTML 檔案: 在根���錄或
docs/資料夾尋找index.html - 靜態檢查: 使用 Cheerio 檢查 HTML 結構和 SEO 標籤
- 動態檢查: 使用 Playwright 在不同螢幕寬度下測試水平捲動
- 輸出結果:
- 終端機顯示
- GitHub Actions Summary
Q: 為什麼我的分數是 0 分?
- 檢查是否有
index.html檔案 - 確認檔案不是空的
Q: 如何知道哪裡出錯了?
- 查看終端機輸出,每項檢查都會顯示 ✅ 或 ❌
- 對於水平捲動問題,會顯示詳細的偵錯資訊
Q: 水平捲動檢查一直失敗怎麼辦?
- 檢查 CSS 是否有固定寬度 (如
width: 1200px) - 使用響應式單位 (如
max-width: 100%,width: 100vw) - 檢查是否有超出螢幕的元素
本專案由六角學院提供,用於教學用途。
如有任何問題,歡迎提出 Issue 或 Pull Request!