# App 介紹 230710

紅色系企業樣板，以 PDRenderKit 1.2.0 的 :if/:path 依 ?page= 切換 7 頁，含部落格與 Markdown 文章。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-07-10 |
| 分類 | 商業網站範例 |
| HTML 檔案 | `index.html`, `views/nav.html`, `views/header.html`, `views/section-3.html`, `views/section-4.html`, `views/section-5.html`, `views/section-6.html`, `views/section-7.html`, `views/section-8.html`, `views/section-9.html`, `views/section-blog.html`, `views/section-article.html`, `views/section-contact.html`, `views/footer.html` |
| 原始碼 | [target/20230710](https://github.com/pardnio/demo-web/tree/main/target/20230710) |

## 即時預覽

<iframe src="/target/20230710/" title="App 介紹 230710" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/target/20230710/)

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列（views/nav.html） | sticky 導覽列，連結 ?page=home/feature/service/pricing、Pages 下拉（Blog、Article）與 Contact；以 :index="nav_index" 高亮；@click=tabShow 開關行動選單。 |
| 主視覺（views/header.html） | 小標、標題、段落、GitHub / Email 按鈕（文字取自 attr(txt)）與 image/header.png。僅首頁。 |
| 區塊 3 | image/section-3.png 搭配依 section_3 圖示名稱以 :for 渲染的 4 列特色。 |
| 區塊 4 | 3 張服務卡，含圖示與 inline SVG 裝飾（image/svg-1.svg）。 |
| 區塊 5 | 文字與 4 張 App 截圖 image/app0..3.png，依 [index] 屬性排版（固定 index=0）。 |
| 區塊 6（價目） | 3 張年費方案（49 / 99 / 149）含項目清單與 GET STARTED，:bg-image 背景與 svg-2 裝飾。 |
| 區塊 7（輪播） | 6 張卡片輪播與 4 個指示點；點擊指示點設定 [index] 以 margin-left 位移。 |
| 區塊 8 | CTA 文字與 GitHub / Email 按鈕、image/section-8.png 搭配循環 section-8 keyframes 動畫與 svg-2 裝飾。 |
| 區塊 9 | 結尾 CTA 標題與按鈕，背後為佔位圖。 |
| 部落格（?page=blog） | 5 張文章卡含日期標籤、標籤與留言數、靜態分頁；側欄含搜尋、分類、最新文章、標籤、電子報。 |
| 文章（?page=article） | 封面、標題、資訊、由 PDMarkdownKit viewer 填入的 section.md、按讚／分享列、上下篇、作者簡介、:for 留言與 :if 巢狀回覆、相同側欄。 |
| 聯絡（?page=contact） | Google 地圖 iframe、留言表單（無處理邏輯）與地址 / Email / GitHub / LinkedIn 卡片。 |
| 頁尾（views/footer.html） | 品牌簡介、Quick Link 與 Support 清單、電子報輸入、版權與社群圖示。 |

## 互動行為

- js/index.js（module）：以 location.href.$query("page") 讀取頁面（預設 home）並換算 nav_index，建立 new PD({id: "app"})；index.html 以 :if / :else-if="page == ..." 決定載入哪些 :path 片段。
- event.tabShow 切換選單按鈕前一個兄弟元素的 .show；event.section7Click 依指示點 data-index 設定輪播容器的 index。
- ?page=article 時抓取 https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md，500ms 後將 PDMarkdownKit viewer 掛入 section.md。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.2.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.2.0/dist/PDRenderKit.js |
| PDMarkdownKit (ES module) | 1.6.0 | https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/dist/PDMarkdownKit.module.js |
| Google Maps embed iframe | - | https://www.google.com/maps/embed?pb=... |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js | - | ./js/index.js (type=module) |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_nav.scss`, `_footer.scss`, `_header.scss`, `_section-3.scss`, `_section-4.scss`, `_section-5.scss`, `_section-6.scss`, `_section-7.scss`, `_section-8.scss`, `_section-9.scss`, `animation/_rotate.scss` |

index.scss（873 行）：:root safe-area env() 變數、reset、body 捲動容器，以及 #section-contact 與 #section-blog（部落格與文章共用：卡片、.md、.bottom、.page、.about、.comment、側欄）樣式。partials 涵蓋導覽（@for [index] 高亮、下拉、行動版 .show）、header（attr(txt) 按鈕）、區塊 3-9（_section-5 與 _section-7 以 @for [index] 排版，_section-8 含 section-8 keyframes）、頁尾。animation/_rotate.scss 為空檔且未被 import。紅色 rgba 變數位於 inline &lt;style&gt;。

```bash
cd target/20230710
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## 使用技巧

- 以查詢字串搭配 PD :if / :else-if 條件區塊與 :path 片段做前端路由，單一 HTML 提供 7 頁。
- 綁定中的屬性插值（:class="fa-solid fa-{{ e }}"、:src="./image/app{{ e }}.png"）、含索引的 :for、:data-index、:bg-image、巢狀 :if。
- 以 [index] 屬性控制輪播與版面，SCSS @for 依斷點產生 margin-left 位移。
- 以 span.svg[src] 注入 inline SVG；content: attr(txt) 按鈕文字；sticky 導覽；斷點 480/512/640/800/960/1024/1120px。

## 外部資源

- https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md (fetched as article content)
- https://www.google.com/maps/embed?pb=... (contact map iframe)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images and section-6 :bg-image)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230710.jpg (og/twitter image)

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)