AI+Flask博客项目实战提示词笔记 20250918
项目介绍
这是一个基于Flask框架开发的现代化个人博客系统，采用科技蓝色调的设计风格。系统提供了完整的博客功能，包括文章发布、分类管理、标签系统、搜索功能、归档展示等。界面简洁美观，响应式设计，适合技术博主、个人开发者和内容创作者使用。
说明：打赏30元即可获取完整源码
项目预览
主要特性
- 🎨 现代化设计 : 采用科技蓝主题，界面简洁美观
- 📱 响应式布局 : 完美适配桌面端、平板和移动设备
- 📝 文章管理 : 支持Markdown格式，代码高亮显示
- 🏷️ 分类标签 : 完善的分类和标签系统
- 🔍 搜索功能 : 全文搜索，支持标题、内容、标签搜索
- 📊 数据统计 : 文章浏览量、点赞数等统计功能
- 🗂️ 归档系统 : 按年月归档文章，便于查找历史内容
- 💬 互动功能 : 点赞、评论等用户互动功能
- 🔗 友情链接 : 支持友情链接管理
- ⚡ 性能优化 : 分页加载，静态资源优化
技术栈
- 后端框架 : Flask 2.3.3
- 模板引擎 : Jinja2
- 前端框架 : Bootstrap 5
- 图标库 : Font Awesome
- JavaScript : jQuery + 原生JS
- 样式预处理 : CSS3 + 自定义主题
- Python版本 : Python 3.8+
设计favicon
你也是一个专业的UI设计师，请你为我们的项目设计一个 favicon 并修改一下使其生效。你可以使用Python创建favicon
规范脚本目录
将所有的Python脚本统一放到 scripts 目录中进行管理
设计项目LOGO
你是一个专业的UI设计师，请你为我们的博客项目设计一个专业的LOGO。
整体是科技蓝主题，博客项目名叫做 PSF博客 。表示Python私教Flask博客。
要符合整体风格，简洁美观。
你可以参考scripts下面的Python脚本，使用Python创建svg格式的LOGO图片。
设计得比较丑陋，放弃了。
设计项目LOGO 2
你是一个专业的UI设计师，请你为我们的博客项目设计一个专业的文字LOGO。
整体是科技蓝主题，博客项目名叫做 PSF博客 。表示Python私教Flask博客。
要符合整体风格，简洁美观。
图标就是favicon就行了，不要生成新的图片。
你把顶部导航和底部导航的LOGO换成favicon+文字的LOGO形式就行了。
设计标签页面
本项目是一个使用Flask+Bootstrap开发的博客项目，整体采用科技蓝主题。
你是一个专业的UI设计师，请你参考已有的界面设计，实现博客标签页面。
点击菜单中的标签，可以跳转到标签页面。
实现以后要进行测试，整体要没有任何错误和警告。
标签页面主题样式优化
本项目是一个使用Flask+Bootstrap开发的博客项目，整体采用科技蓝主题。
你是一个专业的UI设计师，请你参考已有的界面设计，完善博客标签页面。
标签页面要使用科技蓝主题，不要使用紫色，要和整体风格匹配。
实现以后要进行测试，整体要没有任何错误和警告。
模块化开发规范
本项目是一个使用Flask+Bootstrap开发的博客项目，整体采用科技蓝主题。
要遵循模块化开发的规范，按功能拆分代码。
每个页面的HTML，css和JavaScript要分开维护。
实现以后要进行测试，整体要没有任何错误和警告。
模块化开发2
把分类相关页面的css和JavaScript进行抽离单独维护。
把标签相关页面的css和JavaScript进行抽离单独维护。
实现归档页面
你是一个专业的UI设计师，参考已有的界面，实现博客项目的归档页面，要符合整体主题风格。
归档页面的css和js需要抽离进行单独维护。
实现关于页面
你是一个专业的UI设计师，参考已有的界面，实现博客项目的关于页面，要符合整体主题风格。
点击导航栏的关于按钮，跳转到关于页面。导航栏的关于按钮没有下拉框图标。
移除关于页面的面包屑导航。
关于页面的css和js需要抽离进行单独维护。
修改默认作者信息
将项目中的默认作者信息 从 技术博主 改为 Python私教 头像采用cover的形式，防止变形。
修改以后如下：
优化归档页面的UI设计
现在文章归档页面的UI有点丑。参考标签页面的UI设计，改为内容区分为左右，左边是内容，右边是一些侧边导航卡片。
删除文章归档页面独占一行的banner，将相关的数据展示移入到住内容区域的banner。
文章归档页面右侧的最新文章和热门文章卡片都是空的，插入一些测试数据，使其拥有内容。
最后，归档页面相对比较好看了。
优化关于页面的UI设计
对关于页面做刚才归档页面相同的UI设计。
改进以后的关于页面。
编写使用说明文档
总览一下项目，编写项目使用说明文档，教小白如何从零搭建环境并启动项目，详细一点。内容写在 README.md 中，同时在开头补充一下本项目的介绍。