# 專案結構

本頁說明 repo 的目錄配置、範例資料夾的命名規則與首頁如何串起所有範例。

## 目錄配置

| 路徑 | 內容 |
|------|------|
| `index.html` | 首頁：以 PDRenderKit 初始化、PDMarkdownKit 1.6.0 渲染 `README.md` |
| `README.md` | 首頁內容來源，含 38 筆範例預覽清單 |
| `target/<YYYYMMDD>/` | 單一範例，資料夾名即製作日期 |
| `image/<YYYYMMDD>.jpg` | 範例預覽截圖，與資料夾同名 |
| `image/website.jpg` | 首頁 Open Graph 圖片 |
| `css/index.css` | 首頁樣式 |
| `sitemap.xml` | 首頁與 38 個範例的 URL 清單 |
| `.gitattributes` | 將 `.md`／`.scss`／`.css` 排除於 GitHub 語言統計 |

## 範例資料夾組成

| 路徑 | 說明 |
|------|------|
| `index.html` | 範例入口；部分範例另含多個 HTML（如 `20240625` 的 `login.html`、`search.html`） |
| `view/`、`views/` | 以框架動態載入的 HTML 片段（如 `20230616`、`20230719`） |
| `css/` | SCSS 編譯產物，`index.html` 實際載入的檔案 |
| `sass/` | 樣式原始碼，入口檔加上 `_*.scss` partial |
| `js/` | 範例互動邏輯與範例資料 |
| `image/` | 範例自身素材 |

## 首頁與範例的關係

```mermaid
graph TB
    I[index.html] -->|fetch| R[README.md]
    I --> K[PDRenderKit 1.5.2]
    I --> M[PDMarkdownKit 1.6.0]
    R --> M
    M --> G[範例預覽列表]
    G --> P["image/&lt;YYYYMMDD&gt;.jpg"]
    G -->|點擊| T["target/&lt;YYYYMMDD&gt;/index.html"]
    T --> C[css/ 編譯產物]
    T --> J[js/ 互動邏輯]
    T --> F["PDRenderKit／QuickUI CDN"]
    S[sass/] -->|Dart Sass| C
```

## 相關頁面

- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)