Files
yitao-ren-gallery/README.md
2026-02-25 16:47:17 +08:00

4.0 KiB
Executable File
Raw Blame History

Yitao-Ren Gallery

一个深色主题的现代摄影作品展示网站使用Django和Tailwind CSS构建。

功能特点

  • 🎨 深色主题设计,极简现代风格
  • 📱 完全响应式设计,适配移动端
  • 🖼️ 瀑布流网格布局展示作品
  • 🔍 图片懒加载,提升性能
  • 📝 作品详情页左右分栏布局
  • 👤 关于页面展示画廊信息
  • 🔧 Django Admin后台管理

技术栈

  • 后端: Django 4.2
  • 前端: Tailwind CSS 3.3
  • 数据库: SQLite (开发) / PostgreSQL (生产)
  • 图片处理: Pillow
  • 字体: Noto Sans SC (中文), Playfair Display (英文标题)

安装步骤

1. 克隆项目

git clone <repository-url>
cd yitao_gallery

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文件设置必要的配置

5. 运行数据库迁移

python manage.py migrate

6. 导入示例数据

python manage.py import_example_images

7. 创建超级用户

python manage.py createsuperuser

8. 运行开发服务器

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//)

  • 左侧: 大图展示 + 返回按钮
  • 右侧: 标题 + 描述 (深蓝色背景卡片)

关于页 (/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 文件了解详情。

联系信息

  • 项目维护者: Yitao-Ren Gallery
  • 网站: © 2026 Yitao-Ren Gallery & iTao TV

更新日志

v1.0.0 (2026-02-05)

  • 初始版本发布
  • 完整的功能实现
  • 响应式设计
  • 深色主题
  • 管理后台