Files

Jowe 2fbca6ebc7 feat: 完成全站UI优化 - 科技感/未来风设计

- 前台页面全面升级为Tailwind CSS框架
- 引入Google Fonts (Space Grotesk, Noto Sans)
- 主色调更新为#25c0f4 (cyan blue)
- 实现玻璃态效果和渐变背景
- 优化首页网格卡片布局和悬停动画
- 优化详情页双栏布局和渐变Logo光晕
- 优化管理员登录页，添加科技网格背景
- Flask-Admin后台完整深色主题
- 统一Material Symbols图标系统
- 网站自动抓取功能界面优化

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2025-12-27 22:45:09 +08:00

4.4 KiB

Raw Blame History

AI工具导航网站

一个简洁美观的AI产品导航网站，用于展示和管理各类AI工具和应用。

功能特点

✅ 按标签分类展示AI工具
✅ 卡片式设计，美观易用
✅ 详细的工具介绍页面
✅ 完善的后台管理系统
✅ SEO友好的URL结构
✅ 响应式设计，支持移动端
✅ 浏览量统计

技术栈

后端: Flask 3.0 + Python 3.8+
数据库: MySQL 5.7+
前端: Bootstrap 5 + Jinja2模板
管理后台: Flask-Admin
用户认证: Flask-Login

项目结构

zjpb/
├── app.py              # Flask应用主文件
├── config.py           # 配置文件
├── models.py           # 数据库模型
├── init_db.py          # 数据库初始化脚本
├── requirements.txt    # Python依赖
├── .env.example        # 环境变量示例
├── templates/          # HTML模板
│   ├── base.html
│   ├── index.html      # 首页
│   ├── detail.html     # 详情页
│   └── admin_login.html # 登录页
├── static/             # 静态资源
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── images/
└── migrations/         # 数据库迁移文件

快速开始

1. 环境准备

确保已安装以下软件:

Python 3.8+
MySQL 5.7+
pip

2. 安装依赖

# 创建虚拟环境（推荐）
python -m venv venv

# 激活虚拟环境
# Windows:
venv\Scripts\activate
# Linux/Mac:
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt

3. 配置数据库

在MySQL中创建数据库:

CREATE DATABASE ai_nav CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

复制环境变量配置文件:

cp .env.example .env

编辑 .env 文件，修改数据库配置:

DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=ai_nav
SECRET_KEY=your-secret-key-here

4. 初始化数据库

python init_db.py

这将创建所有数据表，并添加示例数据和默认管理员账号。

5. 运行应用

python app.py

访问 http://localhost:5000 查看网站。

管理后台

访问后台

后台地址: http://localhost:5000/admin
登录页面: http://localhost:5000/admin/login

默认管理员账号

用户名: admin
密码: admin123

⚠️ 重要: 首次登录后请立即修改默认密码！

后台功能

网站管理: 添加、编辑、删除AI工具
标签管理: 管理分类标签
管理员管理: 添加和管理管理员账号

宝塔面板部署

1. 安装Python环境

在宝塔面板中安装Python项目管理器，选择Python 3.8+版本。

2. 上传项目

将项目文件上传到服务器，例如 /www/wwwroot/ai_nav

3. 配置项目

在宝塔面板中创建Python项目
项目路径: /www/wwwroot/ai_nav
启动文件: app.py
端口: 5000（或其他可用端口）

4. 安装依赖

在项目目录下执行:

pip install -r requirements.txt

5. 配置反向代理

在宝塔面板的网站设置中配置反向代理:

目标URL: http://127.0.0.1:5000
启用缓存和gzip压缩

6. 配置SSL证书（可选）

为网站配置SSL证书以启用HTTPS。

使用说明

添加新网站

登录后台管理系统
点击"网站管理" -> "Create"
填写网站信息:
- 网站名称
- URL地址
- URL别名（用于SEO友好的URL）
- Logo图片URL
- 简短描述
- 详细介绍
- 主要功能
- 选择标签
- 排序权重（数字越大越靠前）

管理标签

登录后台
点击"标签管理"
可以添加、编辑或删除标签
为标签设置图标（Font Awesome类名）

开发计划

搜索功能
用户评论和评分
关联新闻搜索（2.0版本）
数据统计和分析
API接口
网站收藏功能

常见问题

1. 数据库连接失败

检查 .env 文件中的数据库配置是否正确，确保MySQL服务正在运行。

2. 启动时出现端口占用

修改 app.py 中的端口号，或关闭占用5000端口的其他程序。

3. 静态资源加载失败

检查 static 目录权限，确保Web服务器有读取权限。

许可证

MIT License

联系方式

如有问题或建议，请提交Issue。

4.4 KiB Raw Blame History Unescape Escape