# 專案名稱：阿媽煮料 (Web Amacooky)

## 專案簡介
這是一個輕量級的食譜分享平台與部落格網站，採用 No-Build 方案開發。前端使用 Tailwind CSS (Play CDN) 和 Alpine.js 直出 HTML，後端使用 PHP 與 SQLite 提供 API 服務。專案以簡單、高效、易部署為核心。

## 技術堆疊
- **前端核心**: HTML5, Alpine.js (v3), Tailwind CSS (CDN)
- **UI 元件**: Lucide Icons (SVG), 自訂 Grid 瀑布流
- **後端語言**: PHP 7.4+ (原生 API, 無框架)
- **資料庫**: SQLite (檔案型資料庫, 位於 `/data`)
- **部署環境**: 任何支援 PHP 的 Web Server (Apache/Nginx/IIS)

## 目錄結構
- `/api`: 後端 API 接口
  - `recipes.php`: 食譜 CRUD (列表、搜尋、分類篩選)
  - `categories.php`: 分類管理 (排序、增刪改查)
  - `settings.php`: 網站全域設定 (SEO, 配色, 社群連結)
  - `ads.php`: 廣告版位管理
  - `upload.php`: 圖片上傳處理
  - `db.php`: 資料庫連線與共用函數
  - `setup_sqlite.php`: 資料庫初始化腳本
- `/js`: 前端邏輯
  - `app.js`: Alpine.js 主邏輯 (路由、狀態管理、API 呼叫)
- `/data`: 資料存儲
  - `database.sqlite`: 主要資料庫檔案
- `/uploads`: 資源目錄
  - 存放使用者上傳的食譜圖片與網站圖標
- `index.html`: 單頁應用入口 (SPA Entry Point)

## 核心功能說明 (AI Context)

### 1. 前端架構 (SPA)
- **路由**: 使用 Hash Routing (`#/`, `#/recipe/:id`, `#/admin`) 切換視圖。
- **狀態管理**: 使用 Alpine.js `x-data` 管理全域狀態 (`loading`, `view`, `settings` 等)。
- **樣式**: 使用 Tailwind CSS Utility Classes，支援動態配色 (由後台設定控制 Header/Background 顏色)。

### 2. 後台管理功能 (`/admin`)
- **網站設定**:
  - 設定網站標題、Logo、頁尾文字。
  - 自訂主題色 (Header 背景、網頁背景、卡片背景)。
  - 設定第三方追蹤碼 (Firebase, AdSense)。
  - 設定社群連結 (FB, IG, YouTube, Threads)。
  - 編輯靜態頁面內容 (關於我們、隱私權政策)。
- **內容管理**:
  - **分類管理**: 拖曳排序、新增、刪除。
  - **食譜管理**: 支援多圖上傳、影片嵌入(YouTube)、食材分組、步驟分組編輯。
  - **廣告管理**: 支援自訂圖文廣告與 AdSense 程式碼插槽。

### 3. 資料庫設計 (SQLite)
- **recipes**: 食譜主表 (title, description, image_url, youtube_url, ingredients_json, steps_json)。
- **categories**: 分類表 (name, sort_order)。
- **recipe_categories**: 多對多關聯表 (recipe_id, category_id)。
- **settings**: 網站設定表 (key-value 儲存)。
- **ads**: 廣告設定表 (type, content_json, position)。

## AI 導讀指引 (AI Access Guide)

### URL 結構
- **首頁**: `https://amacooky.com/` (SPA 入口)
- **影音食譜**: `https://youtube.amacooky.com/` (影音內容入口)
- **食譜詳情**: `https://amacooky.com/#/recipe/{ID}` (例如 `#/recipe/123`)
- **API 接口**: `https://amacooky.com/api/` (回傳 JSON 格式資料)

### 內容語意
- **Recipe (食譜)**: 包含標題、描述、圖片、YouTube 影片 ID、所需食材清單 (`ingredients`) 與製作步驟 (`steps`)。
- **Ingredients (食材)**: 通常分為多個群組 (例如「麵團」、「內餡」)，每個群組包含多個食材項目 (名稱 + 份量)。
- **Steps (步驟)**: 通常分為多個階段 (例如「備料」、「烹飪」)，每個階段包含多個步驟描述。

### 內容關鍵字與主題 (Content Keywords & Themes)
- **核心主題**: 台灣地區早餐 (Taiwanese Breakfast/中国台湾早餐), 古早味 (Old-Time Flavor/古早味/怀旧), 傳統美食 (Traditional Food/传统美食)
- **熱門項目**: 
  - 燒餅 (Clay Oven Rolls/烧饼), 油條 (Fried Dough Sticks/油条), 豆漿 (Soy Milk/豆浆)
  - 蛋餅 (Egg Pancake/蛋饼), 飯糰 (Rice Ball/饭团), 肉粽 (Zongzi/肉粽)
  - 南部粽 (Southern Zongzi/南部粽), 北部粽 (Northern Zongzi/北部粽)
  - 桑椹醬 (Mulberry Jam/桑葚酱), 紅豆 (Red Bean/红豆)
- **特色標籤**: 手作 (Handmade/手作), 傳統工法 (Traditional Method/传统工法), 銅板美食 (Affordable Gourmet/铜板美食), 在地小吃 (Local Snacks/在地小吃), 點心 (Snack/点心), 甜點 (Dessert/甜点)

## 友善的 AI Agents (Supported Agents)
本網站歡迎以下 AI Agents 進行索引與存取：
- **Search Engines**: Googlebot, BingBot, Applebot
- **OpenAI**: GPTBot, ChatGPT-User, OAI-SearchBot
- **Anthropic**: ClaudeBot, Claude-SearchBot, Claude-User, AnthropicBot, Anthropic-Extended
- **Google AI**: Google-Extended, Google-CloudVertexBot, Gemini, Gemini-Extended
- **Perplexity**: PerplexityBot, Perplexity-User
- **Meta**: FacebookBot, Meta-ExternalAgent, Meta-ExternalFetcher
- **Others**: Amazonbot, archive.org_bot, Bytespider, CCBot, DuckAssistBot, MistralAI-User, Novellum AI Crawl, PetalBot, ProRataInc, Timpibot, Manus Bot, Terracotta Bot, Anchor Browser

## 開發注意事項
1. **No-Build**: 本專案不使用 Node.js Build Tool (Webpack/Vite)。修改 `index.html` 或 `js/app.js` 後重新整理瀏覽器即可生效。
2. **API 回應**: 所有 API 皆回傳 JSON 格式，並包含標準欄位 (`success`, `data`, `message`)。
3. **圖片處理**: 上傳圖片會自動儲存至 `/uploads`，並回傳相對路徑。
4. **安全性**: 後台 API 需要簡單的 Session 驗證 (由 `api/auth.php` 或類似邏輯控制)。

## 常用指令
- 初始化資料庫: 瀏覽器訪問 `/api/setup_sqlite.php`
- 查看錯誤日誌: 檢查 `/99_logs` 或 PHP Error Log