请使用 Next.js 创建一个画家风格对比画廊网站,包含搜索筛选、收藏、lightbox 等功能,参考项目 https://github.com/joeseesun/qiaomu-artist-style 的设计。将 383 张静态 WebP 图片放在 public/generated/ 目录,并根据 data/artists.ts 生成数据文件。
// 入口片段 app/page.tsx —— 完整源码见仓库
import { StyleGallery } from "@/components/StyleGallery";
import { artists, promptTemplate } from "@/data/artists";
export default function Home() {
return <StyleGallery artists={artists} promptTemplate={promptTemplate} />;
}
HOW IT'S MADE / 拆解
01
克隆仓库并运行 `npm install` 安装依赖。
02
执行 `npm run build:artists` 生成艺术家数据,或使用已提供的静态图片。
03
运行 `npm run dev` 启动本地开发服务器,访问 `http://localhost:3000`。
Dr.Sharp 点评
Dr. Sharp:一个巧妙的艺术家风格对照集,代码结构清晰,美中不足是图像生成依赖外部 API,复现时需自行备齐钥匙和耐心。