# 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. 克隆项目 ```bash git clone cd <项目目录> ``` ### 2. 创建虚拟环境 ```bash python -m venv venv source venv/bin/activate # Linux/Mac # 或 venv\Scripts\activate # Windows ``` ### 3. 安装依赖 ```bash pip install -r requirements.txt ``` ### 4. 配置环境变量 ```bash cp .env.example .env # 编辑 .env,设置 SECRET_KEY、DEBUG 等 ``` ### 5. 运行数据库迁移 ```bash python manage.py migrate ``` ### 6. 导入示例数据 ```bash python manage.py import_example_images ``` 将 `example_img/` 目录下的图片批量导入数据库,同时创建示例分类和关于页面。 ### 7. 创建超级用户 ```bash python manage.py createsuperuser ``` ### 8. 运行开发服务器 ```bash 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//` - 左侧:大图展示 + 返回按钮 - 右侧:标题、描述、分类信息 - 底部:评论列表及发布评论(需登录) ### 搜索页 `/search/` - 按关键词搜索作品标题/描述 ### 分类页 `/category//` - 展示指定分类下的所有作品 ### 关于页 `/about/` - 画廊介绍信息 ### 登录 `/login/` · 登出 `/logout/` - 标准 Django 认证,评论功能需登录 ## 设计规范 ### 颜色方案 - 背景: `#0a0a0a`(深黑色) - 文字: `#f5f5f5`(浅灰色) - 强调色: `#3b82f6`(蓝色) - 卡片背景: `#1e293b`(深蓝色) ### 字体 - 英文标题: Playfair Display - 中文正文: Noto Sans SC ## 开发说明 ### 添加新作品 1. 登录管理后台 `/admin` 2. 进入 "Artworks" → "Add Artwork" 3. 上传图片,填写标题/描述/分类后保存 4. 系统自动生成缩略图并计算动态网格布局 ### 自定义样式 - 全局样式:`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 安全选项 ## 贡献指南 1. Fork 项目 2. 创建功能分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 创建 Pull Request ## 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](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 后台