不只是博客框架，更是完整的内容创作生态系统
还在为 Hexo 的命令行操作而烦恼吗？还在手动编辑 YAML 配置文件吗？
KMblog 带来全新体验：
- 桌面管理工具 - 精美的 GUI 界面，像使用桌面应用一样管理你的博客
- 拖拽式管理 - 文章分类、合集整理，只需拖拽即可完成
- 实时预览 - 所见即所得，编辑和预览同步进行
- 一键部署 - 无需记忆复杂的 Git 命令，点击按钮即可发布
传统静态博客框架只提供基础的文章展示功能，KMblog 为你准备了更多：
内置 Monaco 编辑器
- 在浏览器中直接编辑文章，无需切换工具
- 完整的代码高亮和智能提示
- 支持实时预览和自动保存
革命性的 Markdown 内嵌 Block
这是 KMblog 最独特的功能！在 Markdown 中直接嵌入丰富的交互式内容：
<!-- B站视频播放器 -->
```bilibili-video
https://www.bilibili.com/video/BV1xx411c7mD
```
<!-- Steam 游戏卡片 -->
```steam-game
https://store.steampowered.com/app/730/
```
<!-- Bangumi 番剧信息 -->
```bangumi
https://bgm.tv/subject/12345
```
<!-- GitHub 仓库卡片 -->
```github-repo
https://github.com/iiishop/KMblog
```
<!-- 小红书笔记 -->
```xiaohongshu
https://www.xiaohongshu.com/explore/xxxxx
```
<!-- Mermaid 流程图 -->
```mermaid
graph TD
A[开始] --> B[写作]
B --> C[发布]
```无需插件，无需额外配置，直接在 Markdown 代码块中使用！这让你的文章不再局限于纯文本，可以嵌入：
- 视频播放器（B站、YouTube 等）
- 游戏信息卡片（Steam）
- 番剧/动画信息（Bangumi）
- 代码仓库展示（GitHub）
- 社交媒体内容（小红书等）
- 流程图和图表（Mermaid）
- 任何你能想到的自定义组件
强大的内容组织
- 合集系统：将系列文章组织成专题，方便读者系统学习
- 加密文章：保护私密内容，只对特定读者开放
- 多维度分类：标签、分类、归档，多种方式组织内容
现代化主题系统
- 明暗模式自动切换，跟随系统设置
- 多套预设主题，一键切换风格
- 平滑过渡动画，细节处处用心
已经在使用 Hexo？没问题！
- 一键迁移工具 - 自动转换 Hexo 文章格式
- 保留所有内容 - 标签、分类、Front Matter 完整保留
- 智能适配 - 自动添加 KMblog 特有的增强字段
不同于其他博客框架，KMblog 为开发者提供了完整的开发体验：
- Vue 3 + Vite - 现代化技术栈，开发体验丝滑
- 组件化架构 - 轻松扩展和自定义功能
- 完整测试 - 单元测试 + 属性测试，保证代码质量
- CI/CD 集成 - 自动构建和发布，专注于内容创作
管理工具不是网页应用，而是真正的桌面软件：
- Windows / macOS / Linux - 三大平台原生支持
- 离线工作 - 无需网络连接即可管理博客
- 自动更新 - 框架更新一键完成，无需手动操作
- GitHub 集成 - 直接在工具中完成部署，无需命令行
- 从 Releases 下载对应平台的管理工具
- 解压并运行
KMblogManager - 点击"初始化博客"按钮
- 开始创作你的第一篇文章
# 克隆仓库
git clone https://github.com/iiishop/KMblog.git
cd KMblog
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 运行管理工具
python blog_manager.py- 创建、编辑、删除文章
- 拖拽式文章分类和合集管理
- Markdown 实时预览
- 代码高亮和一键复制
- 数学公式渲染（KaTeX）
- Mermaid 图表支持
- 任务列表支持
- Markdown 内嵌 Block - 在文章中直接使用 Vue 组件
KMblog 支持在 Markdown 代码块中直接嵌入 Vue 组件，让你的文章更加生动：
内置 Block 组件：
-
B站视频播放器 - 嵌入 B站视频
```bilibili-video https://www.bilibili.com/video/BV1xx411c7mD ```
-
Steam 游戏卡片 - 展示游戏信息、评分、价格
```steam-game https://store.steampowered.com/app/730/ ```
-
Bangumi 番剧卡片 - 展示动画、漫画、游戏信息
```bangumi https://bgm.tv/subject/12345 ```
-
GitHub 仓库卡片 - 展示仓库信息、Star 数、语言
```github-repo https://github.com/iiishop/KMblog ```
-
小红书笔记 - 嵌入小红书内容
```xiaohongshu https://www.xiaohongshu.com/explore/xxxxx ```
-
Mermaid 图表 - 流程图、时序图、甘特图等
```mermaid graph LR A[开始] --> B[处理] B --> C[结束] ```
使用方式：
- 使用标准 Markdown 代码块语法（三个反引号）
- 指定 block 类型（如
bilibili-video、steam-game） - 在代码块内填入对应的 URL 或配置
- 组件自动懒加载，不影响页面性能
- 合集系统 - 将相关文章组织成系列
- 标签分类 - 多维度内容分类
- 归档功能 - 按时间线浏览历史文章
- 加密文章 - 保护私密内容
- 评论系统 - 基于 GitHub Discussions 的 Giscus 评论
KMblog 集成了 Giscus 评论系统，基于 GitHub Discussions 实现：
- 文章评论 - 每篇文章都可以开启评论功能
- 图片评论 - 瀑布流图片也支持评论和点赞
- Markdown 支持 - 评论支持完整的 Markdown 语法
- 反应表情 - 支持 emoji 反应，快速表达态度
- 主题适配 - 自动跟随博客主题切换
- 零成本 - 完全免费，数据存储在 GitHub
配置方式：
- GUI 配置（推荐） - 在博客管理工具的"配置管理"页面，直接粘贴 giscus.app 生成的 script 标签，一键应用
- 手动配置 - 编辑
src/giscus.config.js文件
详见：
- 明暗模式自动切换
- 多套预设主题
- 自定义配色方案
- 背景图片和模糊效果
- 平滑过渡动画
- 可视化配置编辑
- 文章拖拽排序
- 一键构建和部署
- Hexo 文章迁移
- 框架自动更新
- 内置 Markdown 编辑器
| 特性 | KMblog | Hexo |
|---|---|---|
| 管理方式 | 桌面 GUI 工具 | 命令行 |
| 文章编辑 | 内置编辑器 + 实时预览 | 外部编辑器 |
| 配置管理 | 可视化界面 | 手动编辑 YAML |
| 部署方式 | 一键部署 | 命令行操作 |
| Markdown 扩展 | 内嵌 Vue 组件 | 需要插件 |
| 合集管理 | 原生支持 | 需要插件 |
| 加密文章 | 内置功能 | 需要插件 |
| 评论系统 | Giscus 集成 | 需要插件 |
| 主题切换 | 运行时切换 | 需要重新构建 |
| 迁移工具 | 内置 Hexo 迁移 | - |
| 在线编辑 | 支持 | 不支持 |
| 技术栈 | Vue 3 + Vite | EJS/Pug + Webpack |
- 集成 Giscus 评论系统
- 支持文章页面和图片模态框评论
- 添加评论配置文档和示例
- 制作了完整的 CI/CD 流程用于分发
- 支持 Windows、macOS、Linux 三平台自动构建
- 完成了 CollectionPage 合集展示页面
- 完善 Blog Manager 作为完整生态工具
- 添加框架自动更新功能
- 添加了公告模块
- 添加了 AboutMe 自我介绍模块
- 优化了部分 UI 细节
- 使用 Flet 编写了现代化 GUI 的博客管理工具
- 将 build 功能集成到 GUI 中
- 添加了代码复制按钮
- 添加了 Bangumi 模块
- 添加了 Markdown 表格和任务列表支持
- 添加模块懒加载
- 为各模块添加载入动画
博客配置文件位于 src/config.js，也可以通过管理工具的"配置管理"界面进行可视化编辑。
主要配置项：
{
ProjectUrl: 'https://your-blog.github.io', // 博客地址
BlogName: '你的博客名称',
ShortDesc: '博客简介',
// 主题配置
LightTheme: 'day', // 浅色主题
DarkTheme: 'dark', // 深色主题
defaultMode: 'system', // 跟随系统
// 背景设置
BackgroundImg: '/assets/background.png',
BackgroundImgBlur: 20.0,
// 文章展示
PostsPerPage: 5,
EnableDynamicPostsPerPage: true,
// 社交链接
Links: [
{ name: 'GitHub', url: 'https://github.com/...' }
],
// Giscus 评论系统（可选）
Giscus: {
enabled: true,
repo: 'username/repo',
repoId: 'R_kgDOxxxxxxx',
category: 'Announcements',
categoryId: 'DIC_kwDOxxxxxxx',
// 更多配置见文档
}
}详细配置说明请参考 Giscus 配置指南。
- 打开管理工具
- 点击"部署到 GitHub"
- 输入 GitHub Token 和仓库名称
- 点击"开始部署"
# 构建项目
npm run build
# 部署到 gh-pages 分支
git subtree push --prefix dist origin gh-pages- 在
src/components/创建组件文件 - 将组件添加到对应的列表配置中
示例：
// src/config.js
InfoListUp: [
'SelfIntroductionPanel',
'YourCustomPanel', // 添加你的组件
],- 在
src/components/MarkdownPanelComps/创建 Block 组件：
<!-- YourCustomBlock.vue -->
<template>
<div class="your-custom-block">
<h3>{{ title }}</h3>
<p>{{ content }}</p>
</div>
</template>
<script setup>
defineProps({
customUrl: String // 从 URL 中解析参数
});
</script>- 在
MarkdownPanel.vue中注册：
const YourCustomBlock = defineAsyncComponent(() =>
import('./MarkdownPanelComps/YourCustomBlock.vue')
);
// 在 renderDynamicComponents 中添加
renderDynamicComponents(container, {
'yourcustomblock': YourCustomBlock,
// ... 其他组件
});- 在
MarkdownRenender.js中添加解析规则：
md.renderer.rules.fence = function (tokens, idx, options, env, self) {
const token = tokens[idx];
const info = token.info.trim();
const content = token.content.trim();
if (info === 'your-custom') {
return `<YourCustomBlock :customUrl="'${content}'" ></YourCustomBlock>`;
}
// ... 其他规则
};- 在 Markdown 中使用：
```your-custom
https://example.com/your-content
```编辑 src/color.css 添加新主题：
[data-theme="your-theme"] {
--theme-primary: #your-color;
--theme-body-bg: #your-bg;
--theme-body-text: #your-text;
/* 更多变量... */
}然后在 src/config.js 中配置：
availableThemes: ['day', 'dark', 'your-theme'],
LightTheme: 'your-theme',# 运行所有测试
npm run test
# 生成覆盖率报告
npm run test:run
# 使用 UI 界面
npm run test:ui前端
- Vue 3 - 渐进式框架
- Vite - 极速构建工具
- Vue Router - 路由管理
- Markdown-it - Markdown 解析
- Monaco Editor - 代码编辑器
- GSAP - 动画库
管理工具
- Python 3.11+
- Flet - 跨平台 GUI 框架
- PyInstaller - 打包工具
测试
- Vitest - 单元测试
- fast-check - 属性测试
- 音乐播放模块 - 在文章中嵌入音乐播放器
- 全文搜索功能 - 基于客户端的文章搜索
- 更多主题预设 - 提供更多开箱即用的主题
- RSS 订阅生成 - 自动生成 RSS feed
- 站点地图生成 - SEO 优化
- 评论系统集成 - ✅ 已完成（Giscus）
- 多语言支持 - 国际化界面
- 文章推荐 - 基于标签的相关文章推荐
- 阅读进度条 - 显示文章阅读进度
- 目录导航 - 自动生成文章目录
- 访问统计 - 静态博客无法实现真正的统计，建议使用 Google Analytics 等第三方服务
- 用户系统 - 静态博客不需要用户登录
- 实时评论 - 需要后端支持，建议使用第三方评论系统
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
KMblog 使用自动化脚本管理版本发布：
方式 1：自动推荐版本号（推荐）
# 1. 提交所有更改
git add .
git commit -m "feat: 添加新功能"
# 2. 查看推荐的版本号
./scripts/release.sh # Linux/macOS
.\scripts\release.ps1 # Windows
# 输出：
# 当前版本: 1.0.0
# 推荐的版本号:
# 1. 1.0.1 (修复 bug)
# 2. 1.1.0 (新功能)
# 3. 2.0.0 (重大更新)
# 3. 选择合适的版本发布
./scripts/release.sh 1.1.0 # Linux/macOS
.\scripts\release.ps1 1.1.0 # Windows方式 2：直接指定版本号
git add .
git commit -m "feat: 添加新功能"
./scripts/release.sh 1.0.1 # Linux/macOS
.\scripts\release.ps1 1.0.1 # Windows方式 3：强制重新发布
# 如果标签已存在或需要覆盖
./scripts/release.sh 1.0.1 --force # Linux/macOS
.\scripts\release.ps1 1.0.1 -Force # Windows自动检测：
- ✅ VERSION 文件是否需要更新
- ✅ 是否有未提交的更改
- ✅ 是否有未推送的 commit
- ✅ tag 是否已存在
自动执行：
- 更新
VERSION文件（如果需要） - 提交版本更改（如果需要）
- 创建 Git tag
- 推送代码到 GitHub（如果需要）
- 推送标签到 GitHub
- 触发 GitHub Actions 自动构建
智能特性：
- 支持在任何阶段运行（commit 后、push 后、tag 后）
- 只执行必要的操作，跳过不需要的步骤
- 提供清晰的错误提示和解决方案
| 场景 | 命令 | 脚本行为 |
|---|---|---|
| 标准发布 | release.sh 1.0.1 |
更新 VERSION → 提交 → tag → 推送全部 |
| 已推送代码 | release.sh 1.0.1 |
更新 VERSION → 提交 → tag → 推送 VERSION + tag |
| VERSION 已更新 | release.sh 1.0.1 |
跳过 VERSION → tag → 推送 tag |
| 已创建 tag | release.sh 1.0.1 --force |
删除 tag → 更新 VERSION → 重新发布 |
| 已推送 tag | release.sh 1.0.1 --force |
删除远程 tag → 更新 VERSION → 重新发布 |
Q: 不知道下一个版本号是什么？
# 不带参数运行，查看推荐
./scripts/release.shQ: 标签已存在怎么办？
# 使用 --force 强制覆盖
./scripts/release.sh 1.0.1 --forceQ: 忘记更新 VERSION 文件？
# 脚本会自动更新
./scripts/release.sh 1.0.1Q: 已经推送了代码还能用脚本吗？
# 可以！脚本会智能检测并只推送必要的内容
./scripts/release.sh 1.0.1使用语义化版本号（Semantic Versioning）：
- 主版本号（Major）：不兼容的 API 修改
- 次版本号（Minor）：向下兼容的功能性新增
- 修订号（Patch）：向下兼容的问题修正
示例：
1.0.0→1.0.1：修复 bug1.0.1→1.1.0：添加新功能1.1.0→2.0.0：重大更新，可能不兼容
推送标签后，GitHub Actions 会自动：
-
构建多平台版本（约 10-15 分钟）
- Windows (KMblogManager.exe)
- macOS (KMblogManager)
- Linux (KMblogManager)
-
创建 GitHub Release
- 自动生成 Release Notes
- 上传构建产物
- 标记为正式版本
-
用户自动更新
- 用户启动程序时自动检测新版本
- 一键下载并安装更新
- 自动重启到新版本
查看构建进度：https://github.com/iiishop/KMblog/actions
KMblog 支持两种更新检测：
- 框架更新：通过 Git commits 检测博客框架更新
- 管理工具更新：通过 GitHub Releases API 检测管理工具更新
管理工具会在启动时自动检查更新，如果发现新版本会在界面上显示更新徽章。
MIT License - 详见 LICENSE 文件
感谢所有开源项目的贡献者，特别是 Vue.js、Vite 和 Flet 团队。
如果 KMblog 对你有帮助，欢迎 Star ⭐ 支持一下！