189 lines
4.0 KiB
Markdown
Executable File
189 lines
4.0 KiB
Markdown
Executable File
# Yitao-Ren Gallery
|
||
|
||
一个深色主题的现代摄影作品展示网站，使用Django和Tailwind CSS构建。
|
||
|
||
## 功能特点
|
||
|
||
- 🎨 深色主题设计，极简现代风格
|
||
- 📱 完全响应式设计，适配移动端
|
||
- 🖼️ 瀑布流网格布局展示作品
|
||
- 🔍 图片懒加载，提升性能
|
||
- 📝 作品详情页左右分栏布局
|
||
- 👤 关于页面展示画廊信息
|
||
- 🔧 Django Admin后台管理
|
||
|
||
## 技术栈
|
||
|
||
- **后端**: Django 4.2
|
||
- **前端**: Tailwind CSS 3.3
|
||
- **数据库**: SQLite (开发) / PostgreSQL (生产)
|
||
- **图片处理**: Pillow
|
||
- **字体**: Noto Sans SC (中文), Playfair Display (英文标题)
|
||
|
||
## 安装步骤
|
||
|
||
### 1. 克隆项目
|
||
```bash
|
||
git clone <repository-url>
|
||
cd yitao_gallery
|
||
```
|
||
|
||
### 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文件，设置必要的配置
|
||
```
|
||
|
||
### 5. 运行数据库迁移
|
||
```bash
|
||
python manage.py migrate
|
||
```
|
||
|
||
### 6. 导入示例数据
|
||
```bash
|
||
python manage.py import_example_images
|
||
```
|
||
|
||
### 7. 创建超级用户
|
||
```bash
|
||
python manage.py createsuperuser
|
||
```
|
||
|
||
### 8. 运行开发服务器
|
||
```bash
|
||
python manage.py runserver
|
||
```
|
||
|
||
访问 http://localhost:8000 查看网站，http://localhost:8000/admin 进入管理后台。
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
yitao_gallery/
|
||
├── yitao_gallery/ # Django项目配置
|
||
├── gallery/ # 画廊应用
|
||
│ ├── models.py # 数据模型
|
||
│ ├── views.py # 视图函数
|
||
│ ├── templates/ # 模板文件
|
||
│ └── static/ # 静态文件
|
||
├── media/ # 上传的媒体文件
|
||
└── fixtures/ # 初始数据
|
||
```
|
||
|
||
## 数据模型
|
||
|
||
### Artwork (作品)
|
||
- 标题、描述、图片、缩略图
|
||
- slug (用于URL)
|
||
- 分类 (外键)
|
||
- 创建/更新时间
|
||
- 排序字段
|
||
- 网格尺寸字段
|
||
|
||
### Category (分类)
|
||
- 名称、slug
|
||
|
||
### About (关于)
|
||
- 标题、内容、图片
|
||
|
||
## 页面说明
|
||
|
||
### 首页 (/)
|
||
- 瀑布流网格展示所有作品
|
||
- 图片悬停效果
|
||
- 懒加载图片
|
||
- 点击图片进入详情页
|
||
|
||
### 作品详情页 (/gallery/<slug>/)
|
||
- 左侧: 大图展示 + 返回按钮
|
||
- 右侧: 标题 + 描述 (深蓝色背景卡片)
|
||
|
||
### 关于页 (/about/)
|
||
- 画廊介绍信息
|
||
- 联系方式等
|
||
|
||
## 设计规范
|
||
|
||
### 颜色方案
|
||
- 背景: #0a0a0a (深黑色)
|
||
- 文字: #f5f5f5 (浅灰色)
|
||
- 强调色: #3b82f6 (蓝色)
|
||
- 卡片背景: #1e293b (深蓝色)
|
||
|
||
### 字体
|
||
- 英文标题: Playfair Display
|
||
- 中文正文: Noto Sans SC
|
||
- 导航栏: 衬线字体，全大写
|
||
|
||
### 间距
|
||
- 图片间距: 12px
|
||
- 内容内边距: 24px
|
||
- 响应式断点: sm:640px, md:768px, lg:1024px, xl:1280px
|
||
|
||
## 开发说明
|
||
|
||
### 添加新作品
|
||
1. 登录管理后台 (/admin)
|
||
2. 进入 "Artworks" 部分
|
||
3. 点击 "Add Artwork"
|
||
4. 上传图片，填写信息
|
||
5. 保存即可
|
||
|
||
### 自定义样式
|
||
- 主要样式在 `templates/gallery/base.html` 中使用Tailwind CSS
|
||
- 自定义CSS在 `static/gallery/css/custom.css`
|
||
- JavaScript在 `static/gallery/js/lazy-load.js`
|
||
|
||
### 部署建议
|
||
|
||
#### 生产环境配置
|
||
1. 设置 `DEBUG = False`
|
||
2. 配置 `ALLOWED_HOSTS`
|
||
3. 使用PostgreSQL数据库
|
||
4. 配置静态文件和媒体文件服务
|
||
5. 设置CSRF和SESSION安全选项
|
||
|
||
#### 性能优化
|
||
- 启用缓存
|
||
- 使用CDN分发静态文件
|
||
- 配置图片压缩
|
||
- 启用Gzip压缩
|
||
|
||
## 贡献指南
|
||
|
||
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) 文件了解详情。
|
||
|
||
## 联系信息
|
||
|
||
- 项目维护者: Yitao-Ren Gallery
|
||
- 网站: © 2026 Yitao-Ren Gallery & iTao TV
|
||
|
||
## 更新日志
|
||
|
||
### v1.0.0 (2026-02-05)
|
||
- 初始版本发布
|
||
- 完整的功能实现
|
||
- 响应式设计
|
||
- 深色主题
|
||
- 管理后台 |