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：

<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 中修改图片路径：

<img 
  src="/ancestral-hall.jpg" 
  alt="中国传统祠堂"
  className="w-full h-full object-cover blur-sm"
/>

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

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. 更淡的背景

className="opacity-3 blur-md"

2. 渐变遮罩

<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. 氛围 - 庄重、典雅、有文化底蕴

示例代码

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

// 如果用户没有家族树，显示欢迎页面
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. 修改代码中的图片路径

就这么简单！