chinese-family-tree-2/IMAGE_GUIDE.md

# 欢迎页面图片使用指南

## 推荐图片来源

### 1. 免费高质量图片网站

#### Unsplash（推荐）
- 网址：https://unsplash.com
- 搜索关键词：
  - `chinese ancestral hall` (中国祠堂)
  - `chinese traditional architecture` (中国传统建筑)
  - `chinese genealogy` (中国家谱)
  - `ancient chinese book` (古代中国书籍)
  - `chinese temple` (中国寺庙)

#### Pexels
- 网址：https://www.pexels.com
- 搜索关键词：
  - `chinese architecture`
  - `traditional chinese`
  - `ancient china`

#### Pixabay
- 网址：https://pixabay.com
- 中文搜索：祠堂、家谱、古建筑

### 2. 推荐的具体图片

以下是一些适合的Unsplash图片ID：

1. **中国传统建筑**
   ```
   https://images.unsplash.com/photo-1528360983277-13d401cdc186
   ```

2. **古代书籍/卷轴**
   ```
   https://images.unsplash.com/photo-1481627834876-b7833e8f5570
   ```

3. **中国园林建筑**
   ```
   https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b
   ```

4. **传统中国屋檐**
   ```
   https://images.unsplash.com/photo-1508804185872-d7badad00f7d
   ```

## 使用方法

### 方法1：使用在线图片（当前方案）

已在代码中实现，使用Unsplash CDN：
```tsx
<img 
  src="https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=800&q=80" 
  alt="中国传统建筑"
  className="w-full h-full object-cover blur-sm"
/>
```

优点：
- 无需下载，直接使用
- 自动优化和CDN加速
- 可以随时更换

缺点：
- 依赖外部服务
- 需要网络连接

### 方法2：使用本地图片（生产环境推荐）

#### 步骤1：下载图片
1. 访问Unsplash或其他免费图片网站
2. 下载喜欢的图片（建议尺寸：1920x1080或更大）
3. 重命名为有意义的名称，如 `ancestral-hall.jpg`

#### 步骤2：放置图片
将图片放到项目的 `public` 目录：
```
/Users/freedak/Documents/go-new/chinese-family-tree/public/
  ├── ancestral-hall.jpg
  ├── ancient-book.jpg
  └── traditional-architecture.jpg
```

#### 步骤3：修改代码
在 `app/page.tsx` 中修改图片路径：
```tsx
<img 
  src="/ancestral-hall.jpg" 
  alt="中国传统祠堂"
  className="w-full h-full object-cover blur-sm"
/>
```

### 方法3：使用Next.js Image组件（最佳实践）

```tsx
import Image from "next/image"

<Image 
  src="/ancestral-hall.jpg"
  alt="中国传统祠堂"
  fill
  className="object-cover blur-sm"
  quality={80}
  priority
/>
```

优点：
- 自动优化图片
- 懒加载
- 响应式图片
- 更好的性能

## 设计建议

### 图片处理参数

当前使用的效果：
- `opacity-5` - 5%透明度，非常淡
- `blur-sm` - 轻微模糊
- `-z-10` - 置于背景层

这样处理的目的：
- 不抢主要内容的视觉焦点
- 营造文化氛围
- 保持页面简洁优雅

### 可选的其他效果

1. **更淡的背景**
```tsx
className="opacity-3 blur-md"
```

2. **渐变遮罩**
```tsx
<div className="absolute inset-0 bg-gradient-to-b from-background/50 to-background/90" />
```

3. **多张图片轮播**（高级）
可以使用定时器切换不同的背景图片

## 图片版权说明

### Unsplash
- 完全免费使用
- 无需署名（但建议署名）
- 可商用
- 许可证：Unsplash License

### Pexels
- 完全免费使用
- 无需署名
- 可商用
- 许可证：Pexels License

### Pixabay
- 完全免费使用
- 无需署名
- 可商用
- 许可证：Pixabay License

## 推荐的图片特征

选择图片时注意：
1. **色调** - 偏暖色调或中性色调，与系统配色协调
2. **构图** - 简洁，不要太复杂
3. **主题** - 中国传统建筑、古籍、祠堂等
4. **质量** - 高分辨率，清晰
5. **氛围** - 庄重、典雅、有文化底蕴

## 示例代码

### 完整的欢迎页面（带本地图片）

```tsx
// 如果用户没有家族树，显示欢迎页面
if (!isLoading && !currentTree) {
  return (
    <div className="flex min-h-screen flex-col bg-background font-sans">
      <SiteHeader />
      <main className="flex-1 flex items-center justify-center px-4 md:px-6 relative overflow-hidden">
        {/* 背景图片 */}
        <div className="absolute inset-0 -z-10">
          <Image 
            src="/ancestral-hall.jpg"
            alt="中国传统祠堂"
            fill
            className="object-cover opacity-5 blur-sm"
            quality={80}
            priority
          />
        </div>
        
        <div className="max-w-3xl mx-auto text-center space-y-12">
          {/* 其余内容... */}
        </div>
      </main>
    </div>
  )
}
```

## 快速开始

1. 访问 https://unsplash.com/s/photos/chinese-ancestral-hall
2. 选择一张喜欢的图片
3. 点击下载（选择中等尺寸即可）
4. 将图片放到 `public/` 目录
5. 修改代码中的图片路径

就这么简单！