这是一个功能完整的个人博客网站,包含文章管理、工具集、音乐播放器和PJAX无刷新导航等功能。项目采用纯HTML、CSS和JavaScript开发,无需后端服务器,可直接部署到任何静态网站托管服务。
- 音乐播放器:支持音乐播放、暂停、上一首/下一首、进度条控制、音量调节和播放列表管理
- PJAX无刷新导航:页面切换无刷新,音乐继续播放,提升用户体验
- 响应式设计:适配不同屏幕尺寸,在移动端和桌面端都有良好的显示效果
- 暗黑模式:支持主题切换,满足不同用户的偏好需求
├── config/ # 配置文件
│ ├── music.json # 音乐播放器配置
│ ├── paths.json # 路径配置
│ ├── projects.json # 项目配置
│ └── search.json # 搜索索引
├── css/ # 样式文件
│ ├── center-css/ # 中心内容样式
│ │ ├── pages-css/ # 页面特定样式
│ │ └── reading-time.css # 阅读时间样式
│ ├── header-css/ # 页头样式
│ │ ├── immersive-reading.css # 沉浸式阅读样式
│ │ ├── music-player.css # 音乐播放器样式
│ │ └── theme-toggle.css # 主题切换样式
│ └── public-css/ # 公共样式
├── html/ # HTML页面
│ ├── archives/ # 归档页面
│ ├── indexs/ # 索引页面
│ ├── links/ # 友链页面
│ ├── posts/ # 文章页面
│ ├── projects/ # 项目页面
│ └── tools/ # 工具页面
├── 404.html # 404错误页面
├── import_export/ # 导入导出目录
│ ├── export/ # 导出文件
│ └── import/ # 导入文件
├── js/ # JavaScript文件
│ ├── center-js/ # 中心内容脚本
│ │ ├── archives-js/ # 归档页面脚本
│ │ ├── posts-js/ # 文章相关脚本
│ │ ├── public-js/ # 公共脚本
│ ├── footer-js/ # 页脚脚本
│ ├── header-js/ # 页头脚本
│ │ ├── back-to-top.js # 返回顶部脚本
│ │ ├── immersive-reading.js # 沉浸式阅读脚本
│ │ ├── music-player.js # 音乐播放器脚本
│ │ ├── search.js # 搜索脚本
│ │ └── theme-toggle.js # 主题切换脚本
│ ├── tools-js/ # 工具页面脚本
│ ├── baidu-analytics.js # 百度统计
│ ├── mobile-menu.js # 移动端菜单脚本
│ └── pjax.js # PJAX无刷新导航脚本
├── script/ # Python脚本
│ ├── category_management.py # 分类管理
│ ├── cli_utils.py # 命令行工具通用函数
│ ├── color_utils.py # 颜色输出工具
│ ├── common.py # 通用工具函数
│ ├── config_utils.py # 配置管理
│ ├── content_import_export.py # 内容导入导出
│ ├── error_handling.py # 错误处理
│ ├── file_monitor.py # 文件系统监控
│ ├── help_utils.py # 帮助系统
│ ├── import_functions.py # 导入功能
│ ├── log_utils.py # 日志管理
│ ├── path_utils.py # 路径管理
│ ├── post_management.py # 文章管理
│ ├── post_operations.py # 文章操作
│ ├── post_utils.py # 文章工具函数
│ ├── site_maintenance.py # 站点维护
│ ├── stats_analysis.py # 数据统计和分析
│ ├── tag_management.py # 标签管理
│ ├── version_utils.py # 版本管理
│ └── main.py # 主调度脚本
├── static/ # 静态资源
│ ├── img/ # 图片
│ │ ├── archives-img/ # 归档页面图片
│ │ └── svg/ # SVG图标
│ └── music/ # 音乐资源
│ ├── img/ # 音乐封面
│ └── music/ # 音乐文件
├── templates/ # 模板文件
│ └── post_template.html # 文章模板
├── index.html # 首页
├── robots.txt # 爬虫配置
├── sitemap.xml # 站点地图
└── README.md # 项目说明
- 支持Markdown格式文章
- 文章分类和标签
- 文章搜索功能
- 文章上下篇导航
- 代码高亮和复制
- 支持KaTeX数学公式
- 支持Mermaid流程图
- 阅读时间预计
- Base64编解码器
- 图表生成器
- CSS颜色工具
- 日期工具
- PDF查看器
- 二维码生成器
- 正则表达式生成器
- 支持音乐播放、暂停控制
- 上一首/下一首切换
- 进度条拖拽控制
- 音量调节
- 播放列表管理
- 页面切换时保持音乐播放
- 响应式设计,适配不同屏幕尺寸
- 页面切换无刷新,提升用户体验
- 音乐继续播放,保持听觉连续性
- 支持浏览器前进/后退功能
- 自动加载页面所需的CSS和JavaScript
- 平滑的页面过渡效果
- 深色/浅色主题切换
- 响应式设计
- 移动端菜单
- 百度统计分析
- 分享功能
- 评论系统
- 页脚统计信息
- 克隆项目到本地
- 使用浏览器直接打开
index.html文件 - 或使用本地服务器运行
- 将所有文件上传到静态网站托管服务
- 确保
sitemap.xml和robots.txt正确配置 - 配置百度统计(修改
js/baidu-analytics.js中的站点ID)
- 编辑
config/music.json文件,添加或修改音乐列表 - 音乐文件放置在
static/music/music/目录 - 音乐封面图片放置在
static/music/img/目录 - 确保音乐文件路径和封面图片路径正确配置
PJAX功能已内置,无需额外配置。它会自动处理页面切换,保持音乐播放的连续性。
项目提供了一个功能强大的命令行工具,用于管理博客内容和维护站点。运行方式:
python script/main.py主要功能包括:
-
文章管理
- 创建新文章
- 删除文章(单篇或批量)
- 编辑文章元数据
- 预览文章内容
- 搜索文章
- 文章统计
- 扫描并更新search.json
-
站点维护
- 创建Markdown文章模板
- 草稿管理(重命名、删除、预览、发布)
- 将草稿转化为HTML模板
- 清空草稿文件夹
- 站点统计
- 自动清理(临时文件和空目录)
-
内容导入导出
- 导出文章为Markdown
- 导出文章为HTML
- 从Markdown导入文章
- 从HTML导入文章
- 导入导出目录管理
-
分类管理
- 查看所有分类
- 添加新分类
- 编辑分类
- 删除分类
-
标签管理
- 查看所有标签
- 添加新标签
- 编辑标签
- 删除标签
-
数据统计和分析
- 文章统计
- 分类统计
- 标签统计
- 生成统计报告
-
配置管理
- 查看当前配置
- 编辑配置
- 重置配置为默认值
- 导入/导出配置
- 验证配置
-
日志管理
- 查看日志
- 清理日志
-
帮助中心
- 查看使用帮助
-
版本管理
- 查看版本信息
- 更新版本号
- 前端:HTML5, CSS3, JavaScript (ES6+)
- 样式:CSS变量, 响应式设计, Flexbox/Grid布局
- 脚本:Python 3
- 核心功能实现:
- 音乐播放器:HTML5 Audio API
- PJAX导航:History API, XMLHttpRequest
- 第三方库:
- KaTeX (数学公式)
- Mermaid (流程图)
- Notyf (通知)
- Clipboard.js (代码复制)
- QRCode.js (二维码)
- PDF.js (PDF查看器)
- config/: 存储各种配置文件
- css/: 样式文件,按功能和页面分类
- html/: 所有HTML页面,按功能分类
- import_export/: 导入导出目录,用于存放导入导出的文件
- js/: JavaScript脚本,按功能分类
- script/: Python工具脚本,包含完整的命令行工具
- static/: 静态资源(图片)
- templates/: 模板文件,用于生成新文章
- 支持现代浏览器(Chrome, Firefox, Safari, Edge)
- 响应式设计,支持移动端
| 评分维度 | 评分 | 说明 |
|---|---|---|
| 功能完整性 | 9/10 | 实现了博客的核心功能,包括文章系统、工具集、音乐播放器、PJAX导航等 |
| 代码质量 | 8/10 | 代码结构清晰,组织合理,使用了模块化设计 |
| 设计美观度 | 8.5/10 | 页面设计简洁美观,响应式布局,支持主题切换 |
| 技术实现 | 9/10 | 使用了现代前端技术,实现了多种复杂功能 |
| 用户体验 | 8.5/10 | 流畅的页面切换,良好的交互体验,响应式设计 |
| 性能优化 | 7.5/10 | 基本的性能优化,如PJAX导航,但仍有提升空间 |
| 可维护性 | 8/10 | 代码组织良好,模块化设计,便于后续维护 |
| 安全性 | 7/10 | 基本的安全考虑,但可进一步加强输入验证 |
8.5/10 - 这是一个功能完善、设计美观、技术实现良好的个人博客项目。项目使用纯前端技术栈实现了丰富的功能,包括文章管理、工具集、音乐播放器和PJAX无刷新导航等。代码组织清晰,用户体验良好,同时也有一些可以进一步优化的空间。
- 功能丰富:集成了多种实用工具和功能,满足个人博客的各种需求
- 技术实现:使用了HTML5 Audio API、History API等现代前端技术
- 用户体验:PJAX无刷新导航、主题切换、响应式设计等提升用户体验的功能
- 代码组织:模块化设计,清晰的目录结构,便于维护和扩展
- 工具脚本:提供了功能强大的Python命令行工具,方便内容管理
- 性能优化:进一步优化图片资源和代码压缩
- SEO优化:增强页面的SEO元标签和结构
- 无障碍访问:提高网站的可访问性
- 安全性:加强对用户输入的验证
- 代码模块化:进一步模块化JavaScript代码
MIT License