Silksong Maps & Guides

一个简洁的 Hollow Knight: Silksong 游戏攻略网站。

项目结构

silksongmap/
├── src/
│   ├── app/              # Next.js App Router 页面
│   │   ├── globals.css   # 全局样式
│   │   ├── layout.tsx    # 根布局
│   │   └── page.tsx      # 首页
│   ├── components/       # 所有UI组件
│   │   ├── Badge.tsx     # 徽章组件
│   │   ├── Button.tsx    # 按钮组件
│   │   ├── Card.tsx      # 卡片组件
│   │   ├── Container.tsx # 容器组件
│   │   ├── FAQSection.tsx      # FAQ手风琴组件
│   │   ├── InteractiveMap.tsx  # 交互式地图组件
│   │   └── Navigation.tsx      # 导航栏组件
│   ├── lib/              # 工具函数
│   │   ├── constants.ts  # 常量定义
│   │   └── utils.ts      # 工具函数
│   └── types/            # TypeScript 类型定义
│       └── index.ts
├── public/               # 静态资源
│   └── images/
│       └── maps/         # 地图图片
└── 配置文件...

开发命令

npm install         # 安装依赖
npm run dev        # 启动开发服务器
npm run build      # 构建生产版本
npm run start      # 启动生产服务器
npm run lint       # 代码检查

部署

Vercel 部署（推荐）

1. 将代码推送到 GitHub 仓库
2. 连接 Vercel 账户到 GitHub
3. 导入项目并部署
4. 设置环境变量（可选）

手动部署

npm run build       # 构建项目
npm run start       # 启动生产服务器

环境变量

复制 .env.example 为 .env.local 并配置：

NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX  # Google Analytics ID
NEXT_PUBLIC_ADSENSE_ID=ca-pub-XXXXXXXXXXXXXXXX  # AdSense ID

技术栈

• 框架: Next.js 14 (App Router)
• 语言: TypeScript
• 样式: Tailwind CSS
• 字体: Inter (Google Fonts)

特性

• ✅ 响应式设计，适配所有设备
• ✅ 交互式地图查看器
• ✅ FAQ手风琴组件
• ✅ 现代化导航栏
• ✅ SEO优化
• ✅ 快速加载性能