Skip to content

Cnkrru/Blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

个人博客项目

项目简介

这是一个功能完整的个人博客网站,包含文章管理、工具集、音乐播放器和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             # 项目说明

功能模块

1. 文章系统

  • 支持Markdown格式文章
  • 文章分类和标签
  • 文章搜索功能
  • 文章上下篇导航
  • 代码高亮和复制
  • 支持KaTeX数学公式
  • 支持Mermaid流程图
  • 阅读时间预计

2. 工具集

  • Base64编解码器
  • 图表生成器
  • CSS颜色工具
  • 日期工具
  • PDF查看器
  • 二维码生成器
  • 正则表达式生成器

3. 音乐播放器

  • 支持音乐播放、暂停控制
  • 上一首/下一首切换
  • 进度条拖拽控制
  • 音量调节
  • 播放列表管理
  • 页面切换时保持音乐播放
  • 响应式设计,适配不同屏幕尺寸

4. PJAX无刷新导航

  • 页面切换无刷新,提升用户体验
  • 音乐继续播放,保持听觉连续性
  • 支持浏览器前进/后退功能
  • 自动加载页面所需的CSS和JavaScript
  • 平滑的页面过渡效果

5. 其他功能

  • 深色/浅色主题切换
  • 响应式设计
  • 移动端菜单
  • 百度统计分析
  • 分享功能
  • 评论系统
  • 页脚统计信息

如何使用

1. 本地运行

  1. 克隆项目到本地
  2. 使用浏览器直接打开 index.html 文件
  3. 或使用本地服务器运行

2. 部署

  1. 将所有文件上传到静态网站托管服务
  2. 确保 sitemap.xmlrobots.txt 正确配置
  3. 配置百度统计(修改 js/baidu-analytics.js 中的站点ID)

3. 音乐播放器配置

  1. 编辑 config/music.json 文件,添加或修改音乐列表
  2. 音乐文件放置在 static/music/music/ 目录
  3. 音乐封面图片放置在 static/music/img/ 目录
  4. 确保音乐文件路径和封面图片路径正确配置

4. PJAX配置

PJAX功能已内置,无需额外配置。它会自动处理页面切换,保持音乐播放的连续性。

脚本工具

命令行工具 (script/main.py)

项目提供了一个功能强大的命令行工具,用于管理博客内容和维护站点。运行方式:

python script/main.py

主要功能包括:

  1. 文章管理

    • 创建新文章
    • 删除文章(单篇或批量)
    • 编辑文章元数据
    • 预览文章内容
    • 搜索文章
    • 文章统计
    • 扫描并更新search.json
  2. 站点维护

    • 创建Markdown文章模板
    • 草稿管理(重命名、删除、预览、发布)
    • 将草稿转化为HTML模板
    • 清空草稿文件夹
    • 站点统计
    • 自动清理(临时文件和空目录)
  3. 内容导入导出

    • 导出文章为Markdown
    • 导出文章为HTML
    • 从Markdown导入文章
    • 从HTML导入文章
    • 导入导出目录管理
  4. 分类管理

    • 查看所有分类
    • 添加新分类
    • 编辑分类
    • 删除分类
  5. 标签管理

    • 查看所有标签
    • 添加新标签
    • 编辑标签
    • 删除标签
  6. 数据统计和分析

    • 文章统计
    • 分类统计
    • 标签统计
    • 生成统计报告
  7. 配置管理

    • 查看当前配置
    • 编辑配置
    • 重置配置为默认值
    • 导入/导出配置
    • 验证配置
  8. 日志管理

    • 查看日志
    • 清理日志
  9. 帮助中心

    • 查看使用帮助
  10. 版本管理

    • 查看版本信息
    • 更新版本号

技术栈

  • 前端: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无刷新导航等。代码组织清晰,用户体验良好,同时也有一些可以进一步优化的空间。

亮点

  1. 功能丰富:集成了多种实用工具和功能,满足个人博客的各种需求
  2. 技术实现:使用了HTML5 Audio API、History API等现代前端技术
  3. 用户体验:PJAX无刷新导航、主题切换、响应式设计等提升用户体验的功能
  4. 代码组织:模块化设计,清晰的目录结构,便于维护和扩展
  5. 工具脚本:提供了功能强大的Python命令行工具,方便内容管理

改进空间

  1. 性能优化:进一步优化图片资源和代码压缩
  2. SEO优化:增强页面的SEO元标签和结构
  3. 无障碍访问:提高网站的可访问性
  4. 安全性:加强对用户输入的验证
  5. 代码模块化:进一步模块化JavaScript代码

许可证

MIT License

About

个人博客

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors