项目简介

耶温博客（SimpleBlog）是一个现代化、极简风格的个人博客系统，基于 Vue 3 + TypeScript + Vite 构建。

采用静态站点生成（SSG）方案，提供极佳的性能和 SEO 优化。设计理念是"简约而不简单"，在保持界面清爽的同时，提供完整的功能体验。

核心特性

📝 内容管理

  • Markdown 支持 - 使用 Markdown 格式编写文章，支持 front-matter 元数据
  • 智能路由 - 自动生成文章列表和详情页路由
  • 分类标签 - 支持文章分类和标签系统
  • 文章目录 - 自动生成目录，方便快速导航

🔍 搜索功能

  • 全文搜索 - 搜索文章标题、标签和简介
  • 快捷键支持 - Cmd/Ctrl + K 或 Q 快速打开搜索
  • 实时结果 - 防抖优化，流畅的搜索体验

🎨 视觉效果

  • 水墨涟漪 - 首页水墨风格背景动画
  • 雪花飘落 - 冬日主题雪花效果
  • 毛玻璃设计 - macOS 风格 Dock 导航菜单

📊 数据展示

  • Git 活动图 - 类似 GitHub 的贡献度热力图
  • 最新文章 - 首页底部显示最新文章列表

🚀 性能优化

  • 静态站点生成 - 使用 vite-ssg 预渲染所有页面
  • 代码高亮 - 基于 Shiki 的语法高亮，支持 20+ 种编程语言
  • 按需加载 - 路由和组件懒加载，减少首屏体积
  • XSS 防护 - 使用 DOMPurify 净化 HTML 内容

技术栈

核心框架

  • Vue 3.4 - 渐进式 JavaScript 框架
  • TypeScript 5.3 - 类型安全
  • Vite 5.0 - 构建工具
  • Vue Router 4.2 - 路由管理器

核心功能

  • markdown-it 14.0 - Markdown 解析器
  • Shiki 3.21 - 代码高亮
  • DOMPurify 3.3 - XSS 防护

其他

  • @vueuse/head - SEO 元数据管理
  • vite-ssg - 静态站点生成器
  • vite-plugin-pwa - PWA 支持

快速开始

环境要求

  • Node.js >= 18.0.0
  • npm >= 9.0.0

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

构建产物位于 dist/ 目录。

撰写文章

文件位置

在 blogs/ 目录下创建 .md 文件：

blogs/
├── 技术/
│   ├── Vue/
│   │   └── vue-composition-api.md
│   └── TypeScript/
│       └── ts-best-practices.md
└── 耶温/
    └── 关于本站.md

文章格式

---
id: a1b2c3d4
title: 文章标题
date: 2026-01-16
category: 分类/子分类
excerpt: 文章简介
author: 耶温
tags:
  - Vue
  - TypeScript
---

文章内容...

Front-matter 字段

字段 必填 说明
id 是 文章唯一标识（8位字母数字）
title 是 文章标题
date 是 发布日期（YYYY-MM-DD）
category 是 文章分类
excerpt 否 文章简介（不填则自动提取）
author 否 作者名称
tags 否 文章标签

自动生成 ID

运行以下命令自动生成文章 ID：

npm run ensure-ids

项目配置

站点信息

编辑 src/constants/index.ts 修改站点配置：

export const SITE_CONFIG = {
    title: '耶温博客',
    description: '记录思考，分享知识',
    keywords: '耶温博客, 技术博客',
    author: '耶温',
    url: 'https://blog.yuwb.cn',
}

主题颜色

编辑 src/styles/variables.css 自定义主题：

:root {
    --color-text: #3a3a3a;
    --color-bg: #ffffff;
    --color-accent: #1a1a1a;
}

可用脚本

命令 说明
npm run dev 启动开发服务器
npm run build 生产构建
npm run preview 预览生产构建
npm run fetch-git 获取 Git 活动数据
npm run ensure-ids 生成文章 ID
npm run generate-sitemap 生成 sitemap.xml
npm run format 格式化代码
npm run lint 代码检查

常见问题

Q: 如何修改网站标题和描述？

A: 编辑 src/constants/index.ts 中的 SITE_CONFIG。

Q: 文章 ID 是如何生成的？

A: 运行 npm run ensure-ids 会为没有 ID 的文章生成 8 位随机 ID（小写字母+数字）。

Q: 如何禁用首页动画？

A: 编辑 src/pages/HomePage.vue，注释掉 <InkBackground /> 和 <SnowfallEffect />。

Q: 支持哪些编程语言的代码高亮？

A: 支持 JavaScript、TypeScript、Bash、Python、Java、Go、Rust、HTML、CSS、Markdown、JSON、YAML、SQL 等 20+ 种语言。

Q: 如何自定义代码高亮主题？

A: 编辑 src/utils/markdown.ts 中的 SHIKI_THEME 常量。

开源协议

本项目采用 MIT License 开源协议。

联系方式