Yitao-Ren Gallery
一个深色主题的现代摄影作品展示网站，使用 Django 和 Tailwind CSS 构建。
功能特点
- 深色主题设计，极简现代风格
- 完全响应式设计，适配移动端
- 动态网格布局：根据图片宽高比自动调整占位（宽图横跨 2 列，竖图占 2 行）
- 图片懒加载，提升性能
- 作品详情页左右分栏布局，支持评论（文字/图片）
- 关键词搜索、分类筛选
- 用户登录/登出
- Django Admin 后台管理
技术栈
- 后端: Django 4.2
- 前端: Tailwind CSS 3.3
- 数据库: SQLite（开发）/ PostgreSQL（生产）
- 图片处理: Pillow（自动生成缩略图）
- 配置管理: python-decouple（
.env环境变量） - 文件清理: django-cleanup（自动删除孤立媒体文件）
- 字体: Noto Sans SC（中文），Playfair Display（英文标题）
安装步骤
1. 克隆项目
git clone <repository-url>
cd <项目目录>
2. 创建虚拟环境
python -m venv venv
source venv/bin/activate # Linux/Mac
# 或
venv\Scripts\activate # Windows
3. 安装依赖
pip install -r requirements.txt
4. 配置环境变量
cp .env.example .env
# 编辑 .env，设置 SECRET_KEY、DEBUG 等
5. 运行数据库迁移
python manage.py migrate
6. 导入示例数据
python manage.py import_example_images
将 example_img/ 目录下的图片批量导入数据库，同时创建示例分类和关于页面。
7. 创建超级用户
python manage.py createsuperuser
8. 运行开发服务器
python manage.py runserver
访问 http://localhost:8000 查看网站，http://localhost:8000/admin 进入管理后台。
项目结构
rytgallery/
├── rytgallery/ # Django 项目配置
│ ├── settings.py
│ └── urls.py
├── gallery/ # 画廊应用
│ ├── models.py # 数据模型
│ ├── views.py # 视图函数
│ ├── urls.py # URL 路由
│ ├── admin.py # Admin 后台注册
│ ├── templates/ # 模板文件
│ ├── static/ # 静态文件
│ └── management/
│ └── commands/
│ └── import_example_images.py
├── example_img/ # 示例图片（导入用）
├── media/ # 上传的媒体文件
├── .env.example
└── requirements.txt
数据模型
Category（分类）
- 名称、slug（URL 标识）
- 创建/更新时间
Artwork（作品）
- 标题、描述、slug
- 图片、缩略图（自动生成，约 90 万像素）
- 分类（外键，可选）
- 排序序号、浏览次数
- 创建/更新时间
- 网格布局由
get_dynamic_grid_class()根据缩略图宽高比动态计算
About（关于）
- 标题、内容、图片
- 全站仅保留一条记录
Comment（评论）
- 关联作品（外键）
- 发布用户（外键，关联 Django 内置 User）
- 评论文字、评论图片（均可选）
- 是否有效（软删除标记）
- 创建/更新时间
页面说明
首页 /
- 动态网格展示所有作品，图片悬停效果，懒加载
作品详情页 /gallery/<slug>/
- 左侧：大图展示 + 返回按钮
- 右侧：标题、描述、分类信息
- 底部：评论列表及发布评论（需登录）
搜索页 /search/
- 按关键词搜索作品标题/描述
分类页 /category/<slug>/
- 展示指定分类下的所有作品
关于页 /about/
- 画廊介绍信息
登录 /login/ · 登出 /logout/
- 标准 Django 认证，评论功能需登录
设计规范
颜色方案
- 背景:
#0a0a0a（深黑色） - 文字:
#f5f5f5（浅灰色） - 强调色:
#3b82f6（蓝色） - 卡片背景:
#1e293b（深蓝色）
字体
- 英文标题: Playfair Display
- 中文正文: Noto Sans SC
开发说明
添加新作品
- 登录管理后台
/admin - 进入 "Artworks" → "Add Artwork"
- 上传图片，填写标题/描述/分类后保存
- 系统自动生成缩略图并计算动态网格布局
自定义样式
- 全局样式：
gallery/templates/gallery/base.html（Tailwind CSS） - 自定义 CSS：
gallery/static/gallery/css/custom.css - 懒加载脚本：
gallery/static/gallery/js/lazy-load.js
部署建议
DEBUG=False
ALLOWED_HOSTS=your-domain.com
DATABASE_URL=postgres://...
- 使用 PostgreSQL 代替 SQLite
- 配置 Nginx + Gunicorn 服务静态/媒体文件
- 启用 HTTPS 及 CSRF 安全选项
贡献指南
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
联系信息
- 项目维护者: flffake@lizexua.com
更新日志
v1.1.0 (2026-02-25)
- 新增评论系统（文字 + 图片，需登录）
- 新增关键词搜索页
- 新增分类筛选页
- 新增用户登录/登出
- 移除
grid_size静态字段，改用get_dynamic_grid_class()根据宽高比动态布局 - 接入 python-decouple 管理环境变量
v1.0.0 (2026-02-05)
- 初始版本发布
- 瀑布流网格、作品详情、关于页面
- 响应式深色主题
- Django Admin 后台