项目介绍

这是一个基于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 中，同时在开头补充一下本项目的介绍。