圖片功能示例文章

這篇文章展示了如何在 markdown 文章中使用圖片功能。

基本圖片插入

你可以使用標準的 markdown 語法插入圖片：

![圖片描述](圖片URL)

例如：

帶標題的圖片

你也可以為圖片添加標題，標題會顯示為圖片說明：

![圖片描述](圖片URL "圖片標題")

例如：

網路圖片

你也可以使用網路上的圖片：

圖片功能特色

1. 響應式設計：圖片會自動適應不同螢幕大小
2. 燈箱效果：點擊圖片可以放大檢視
3. 載入動畫：圖片支援懶載入，提升頁面載入速度
4. 圖片說明：支援圖片標題作為說明文字
5. 美觀樣式：圖片有圓角、陰影等美化效果

使用建議

• 建議將圖片放在 public/images/ 資料夾中
• 使用相對路徑 /images/檔名.jpg 引用圖片
• 為圖片添加有意義的 alt 文字，提升無障礙性
• 可以使用圖片標題功能添加說明文字
• 在 Frontmatter 中添加 image 欄位，將圖片設為背景圖片
• 在 Frontmatter 中添加 category 欄位（如：information、tutorial、技術等），用於分類

Frontmatter 範例

---
title: 文章標題
date: "2025-01-15"
description: 文章描述
tags: ["標籤1", "標籤2"]
category: information    # 用於分類歸檔
image: /images/example.jpg  # 用於首頁焦點和文章詳情背景圖片
published: true
---

新功能介紹

首頁佈局

• 焦點推薦：首頁最新文章會以大卡片形式展示，帶有背景圖片
• 文章網格：其他文章以 3x3 網格展示，支援分頁

文章歸檔

• 使用分類抽屜菜單快速篩選不同分類的文章
• 每個文章卡片都展示分類標籤、發佈日期和預計閱讀時間

文章詳情

• 背景圖片會以半透明形式顯示在文章左側
• 圖片為固定位置，不會跟著頁面滾動