外觀設定
外觀設定允許管理員配置多個外部 CSS 樣式表，這些樣式表會自動注入到所有頁面的 HTML <head> 中。這使您可以在不修改核心程式碼的情況下進行站點範圍的外觀自訂，類似於 Moodle 的外觀自訂功能。
外觀設定提供：
- 外部 CSS 樣式表：新增多個樣式表 URL
- 順序控制：重新排序樣式表以控制 CSS 級聯優先級
- URL 驗證：自動驗證 HTTP/HTTPS URL
- 輕鬆管理：透過簡單介面新增、刪除和重新排序樣式表
- 全域應用：樣式表自動應用於所有頁面
存取外觀設定
Section titled “存取外觀設定”有兩種方式存取外觀設定頁面：
方法1：透過管理員儀表板
Section titled “方法1：透過管理員儀表板”- 以管理員身份登入
- 導航到頂部導航中的 站點管理
- 點擊站點管理選單中的 “外觀” 標籤
- 點擊外觀部分中的 “附加 CSS”
- 您將被帶到
/admin/appearance的外觀設定頁面
方法2：直接導航
Section titled “方法2：直接導航”- 以管理員身份登入
- 在瀏覽器中直接導航到
/admin/appearance
新增 CSS 樣式表
Section titled “新增 CSS 樣式表”要新增新的 CSS 樣式表：
- 導航到外觀設定頁面
- 點擊 “新增樣式表” 按鈕
- 在文字輸入欄位中輸入樣式表 URL
- URL 必須是有效的 HTTP 或 HTTPS URL
- 點擊 “儲存變更” 以套用
URL 格式
Section titled “URL 格式”樣式表 URL 必須：
- 協定：使用
http://或https://（推薦 HTTPS） - 格式：有效的 URL 格式
- 可存取性：公開可存取（不需要身份驗證）
- CORS：如果需要，具有適當的 CORS 標頭
URL 範例：
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.csshttps://example.com/custom-theme.cssURL 驗證
Section titled “URL 驗證”系統在多個級別驗證 URL：
- 欄位級驗證：使用 JavaScript
URL建構函式檢查 URL 格式 - 伺服器端驗證：在儲存前驗證所有 URL
- 客戶端驗證：表單中的即時回饋
無效的 URL 將顯示錯誤訊息：“必須是有效的 HTTP 或 HTTPS URL”
重新排序樣式表
Section titled “重新排序樣式表”樣式表的順序對於 CSS 級聯優先級很重要。後面的樣式表可以覆蓋前面的樣式表。
向上移動樣式表
Section titled “向上移動樣式表”要在列表中較早移動樣式表：
- 找到要移動的樣式表
- 點擊樣式表旁邊的 “向上” 按鈕（↑）
- 樣式表將向上移動一個位置
- 點擊 “儲存變更” 以套用新順序
向下移動樣式表
Section titled “向下移動樣式表”要在列表中較晚移動樣式表：
- 找到要移動的樣式表
- 點擊樣式表旁邊的 “向下” 按鈕（↓）
- 樣式表將向下移動一個位置
- 點擊 “儲存變更” 以套用新順序
- 向上按鈕：在第一個樣式表上停用（無法進一步向上移動）
- 向下按鈕：在最後一個樣式表上停用（無法進一步向下移動）
- 活動按鈕：在中間的樣式表上啟用
CSS 級聯優先級
Section titled “CSS 級聯優先級”樣式表按配置的順序載入：
- 第一個樣式表：首先載入，優先級最低
- 後續樣式表：按順序載入，每個都可以覆蓋前一個
- 最後一個樣式表：最後載入，優先級最高
這允許您：
- 首先載入基礎樣式：基礎樣式表（例如，Bootstrap）
- 其次載入主題覆蓋：主題特定樣式
- 最後載入自訂：站點特定自訂（最高優先級）
1. Bootstrap CSS（基礎框架）2. 主題 CSS（主題覆蓋）3. 自訂 CSS（站點特定自訂）← 最高優先級要刪除樣式表：
- 找到要刪除的樣式表
- 點擊樣式表旁邊的 “刪除” 按鈕（垃圾桶圖示）
- 樣式表將從列表中刪除
- 點擊 “儲存變更” 以套用
未配置樣式表時：
- 空狀態訊息：“未配置樣式表。點擊 ‘新增樣式表’ 新增一個。”
- 新增按鈕：可用於新增第一個樣式表
- 無影響：頁面將在沒有附加樣式表的情況下正常載入
樣式表的載入方式
Section titled “樣式表的載入方式”樣式表按以下順序注入到 HTML <head> 中：
- Mantine 核心樣式：基礎框架樣式（透過
@mantine/core/styles.css匯入） - Highlight.js 樣式表：程式碼高亮主題（主題感知）
- 附加 CSS 樣式表：您配置的樣式表（按配置順序）← 新增
- 頁面特定樣式：任何頁面特定樣式
HTML 結構
Section titled “HTML 結構”樣式表在 HTML 中顯示為：
<head> <!-- Mantine 樣式 --> <link rel="stylesheet" href="/mantine-styles.css" />
<!-- Highlight.js 樣式 --> <link rel="stylesheet" href="/highlight-theme.css" />
<!-- 您配置的樣式表 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://example.com/custom.css" />
<!-- 頁面內容 --></head>- 使用 CDN：優先使用 CDN 託管的樣式表以獲得可靠性和效能
- 僅 HTTPS：出於安全考慮使用 HTTPS URL
- 壓縮版本：使用壓縮的 CSS 檔案以獲得更好的效能
- 版本固定：考慮使用版本化的 URL 以獲得穩定性
- 邏輯順序：從一般到特定對樣式表進行排序
- 文件：記錄每個樣式表的功能
- 測試：在部署前測試樣式表組合
- 備份：記錄您的樣式表配置
- 限制數量：避免新增太多樣式表（影響頁面載入時間）
- 優化順序：將最重要的樣式表放在前面
- 監控影響：新增樣式表後檢查頁面載入效能
- 使用非同步：考慮對非關鍵樣式表進行非同步載入（未來功能）
- 定期審查：定期審查並刪除未使用的樣式表
- 更新 URL：保持樣式表 URL 最新
- 測試變更：在新增或重新排序樣式表後測試外觀
- 版本控制：在文件中追蹤樣式表變更
樣式表未載入
Section titled “樣式表未載入”如果樣式表未載入：
- 驗證 URL 是否可存取（在瀏覽器中開啟）
- 檢查 URL 是否使用 HTTP 或 HTTPS 協定
- 驗證 CORS 標頭是否允許從您的網域載入
- 檢查瀏覽器控制台中的載入錯誤
- 驗證樣式表已儲存且頁面已重新整理
如果樣式未套用：
- 檢查樣式表順序（後面的樣式表覆蓋前面的樣式表）
- 驗證 CSS 特異性（您的樣式可能需要更高的特異性）
- 檢查瀏覽器開發工具中的 CSS 衝突
- 確保樣式表正在載入（檢查網路標籤）
- 驗證樣式表內容是否正確
無效 URL 錯誤
Section titled “無效 URL 錯誤”如果收到無效 URL 錯誤：
- 確保 URL 以
http://或https://開頭 - 驗證 URL 格式是否正確
- 檢查 URL 中的拼寫錯誤
- 在瀏覽器中測試 URL 以確保可存取
- 刪除可能破壞 URL 的任何特殊字元
順序未持久化
Section titled “順序未持久化”如果樣式表順序未持久化：
- 驗證您在重新排序後點擊了 “儲存變更”
- 重新整理頁面以查看更新的順序
- 檢查變更是否已儲存到資料庫
- 驗證您有管理員權限
- 檢查系統日誌中的錯誤
如果頁面載入緩慢：
- 減少樣式表數量
- 使用壓縮的 CSS 檔案
- 考慮合併樣式表
- 使用 CDN 託管的樣式表以獲得更好的快取
- 監控網路標籤中載入緩慢的樣式表
