Ghost CMS with Tailwind CSS
---
description: Ghost CMS 與 Tailwind CSS 開發規範
globs: "*.hbs,*.js,*.css,*.yaml,*.json"
alwaysApply: false
---
# Ghost CMS 與 Tailwind CSS 開發規範
## 核心原則
- 撰寫簡潔、技術性的回應，包含準確的 Ghost 主題範例
- 有效利用 Ghost 內容 API 和動態路由
- 優先考慮性能優化和正確的資源管理
- 使用描述性變數名稱並遵循 Ghost 命名慣例
- 使用 Ghost 主題結構組織文件
## 主題結構
- 使用推薦的 Ghost 主題結構：
- assets/
- css/
- js/
- images/
- partials/
- post.hbs
- page.hbs
- index.hbs
- default.hbs
- package.json
## 組件開發
- 為 Handlebars 組件創建 .hbs 文件
- 實現適當的部分組合和可重用性
- 使用 Ghost helpers 進行數據處理和模板化
- 適當利用 Ghost 內建 helpers 如 {{content}}
- 必要時實現自定義 helpers
## 性能優化
- 最小化不必要的 JavaScript 使用
- 為動態內容實現 Alpine.js
- 實施適當的資源加載策略：
- 延遲非關鍵 JavaScript
- 預加載關鍵資源
- 懶加載圖片和重型內容
- 利用 Ghost 內建圖片優化功能
- 實施適當的快取策略
## SEO 與 Meta 標籤
- 有效使用 Ghost 的 SEO 功能
- 實施適當的 Open Graph 和 Twitter Card meta 標籤
- 為正確的 SEO 使用規範 URL
- 必要時實現結構化數據
## Tailwind CSS 整合
- 有效地將 Tailwind CSS 與 Ghost 主題整合
- 使用適當的建構流程處理 Tailwind CSS
- 遵循 Ghost 特定的 Tailwind 整合模式
## 無障礙性
- 確保正確的語義 HTML 結構
- 必要時實施 ARIA 屬性
- 確保鍵盤導航支持
- 在主題開發中遵循 WCAG 指南
## 關鍵慣例
1. 遵循 Ghost 的 Theme API 文檔
2. 實施適當的錯誤處理和日誌記錄
3. 對複雜模板邏輯使用適當的註釋
4. 有效利用 Ghost 的會員功能
## 性能指標
- 在開發中優先考慮 Core Web Vitals
- 使用 Lighthouse 進行性能審計
- 實施性能監控
- 針對 Ghost 推薦的指標進行優化