# hello-blog
**Repository Path**: dkbnull/hello-blog
## Basic Information
- **Project Name**: hello-blog
- **Description**: 个人博客系统，用于分享技术文章、开发笔记与生活感悟。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: https://blog.wbnull.cn
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-05-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Hello Blog
---
## 项目简介
Hello Blog 是一个基于 Vue 3 + Vite 构建的个人博客系统，用于分享技术文章、开发笔记与生活感悟。
## 功能特性
### 📝 文章管理
- 文章分类浏览
- 文章标签筛选
- 支持 HTML 和 Markdown 两种格式文章展示
- 文章内容缓存，避免重复请求
### 🔍 搜索功能
- 全站模糊搜索，支持按标题、分类、标签匹配
- 独立搜索结果页面
### 🎨 界面设计
- 响应式布局，适配桌面端/移动端
- 深色/浅色模式切换（状态持久化至 localStorage）
- CSS 变量统一主题配色（主题色 #42b883）
- 卡片式设计，简洁美观
- 默认布局组件（Header + Main + Footer + BackToTop）
### ⚡ 性能优化
- 路由懒加载
- 构建资源自动哈希
- Vite 手动分包（vue/markdown 独立 chunk）
- API 与组件自动导入（unplugin-auto-import / unplugin-vue-components）
### 🔎 SEO 优化
- 构建时注入 SEO 元标签（description、keywords、OG、Twitter Card）
- 构建时注入 JSON-LD 结构化数据（WebSite + SearchAction）
- 运行时路由级 SEO 元信息自动更新
- 文章详情页动态 SEO
- Canonical URL 设置
### 📊 数据统计
- 百度统计集成
- 页面浏览自动上报
- 自定义事件上报支持
### 📄 分页与排序
- 文章列表分页（每页 10 篇）
- 按日期升序/降序排序
## 技术栈
| 技术 | 版本 | 说明 |
|--------------------------|--------|-------------|
| Vue | 3.5.30 | 前端框架 |
| Vue Router | 5.0.3 | 路由管理 |
| Pinia | 3.0.4 | 状态管理 |
| Vite | 8.0.8 | 构建工具 |
| marked | 17.0.4 | Markdown 解析 |
| unplugin-auto-import | 21.0.0 | API 自动导入 |
| unplugin-vue-components | 32.0.0 | 组件自动导入 |
| vite-plugin-vue-devtools | 8.1.1 | Vue 开发者工具 |
## 项目结构
```
hello-blog/
├── plugins/ # Vite 插件
│ └── vite-plugin-seo-analytics.js # SEO 分析构建插件
├── public/
│ └── favicon.svg # Logo
├── src/
│ ├── assets/ # 资源文件（图标、图片）
│ ├── components/ # 组件
│ │ ├── BackToTop.vue # 回到顶部
│ │ ├── Footer.vue # 底部
│ │ ├── Header.vue # 顶部导航
│ │ ├── Pagination.vue # 分页
│ │ ├── PostCard.vue # 文章卡片
│ │ ├── Sidebar.vue # 侧边栏
│ │ └── SortControl.vue # 排序控制
│ ├── composables/ # 组合式函数
│ │ ├── usePagination.js # 分页逻辑
│ │ └── useSeo.js # SEO 元信息管理
│ ├── data/ # 数据层
│ │ ├── articles.js # 文章查询/搜索/内容加载
│ │ └── data.js # 分类与文章元数据
│ ├── layouts/
│ │ └── DefaultLayout.vue # 默认布局
│ ├── plugins/
│ │ └── seoAnalytics.js # SEO 分析运行时插件
│ ├── router/
│ │ └── index.js # 路由配置
│ ├── stores/
│ │ └── app.js # 全局状态（深色模式等）
│ ├── views/ # 页面
│ │ ├── About.vue # 关于
│ │ ├── ArticleDetail.vue # 文章详情
│ │ ├── Home.vue # 首页/分类页
│ │ ├── NotFound.vue # 404
│ │ └── Search.vue # 搜索
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── style.css # 全局样式（含 CSS 变量）
├── .env # 环境变量
├── index.html # HTML 入口
├── vite.config.js # Vite 配置
└── package.json
```
## 如何添加文章
### 1. 准备文章内容
在 `public/articles/` 目录下创建分类文件夹和文章文件，文件命名格式为 `id_title.html` 或 `id_title.md`：
```
public/articles/
├── frontend/
│ ├── 1_Vue 3 新特性详解.html
│ └── 2_TypeScript 入门指南.html
├── backend/
│ ├── 3_Node.js 性能优化技巧.html
│ └── ...
└── ...
```
文章中引用本地图片时，将图片放在对应分类的 `assets/` 目录下，使用相对路径引用：
```
public/articles/
├── frontend/
│ ├── assets/
│ │ └── image.png
│ └── 1_Vue 3 新特性详解.html
```
HTML 文件中使用 `./assets/` 引用图片，加载时会自动替换为正确路径。
### 2. 添加文章元数据
编辑 `src/data/data.js`，在对应分类下添加文章信息：
```javascript
export const articlesData = {
java: [
{
id: '01',
title: '文章标题',
category: 'frontend',
tags: ['Vue', '前端'],
date: '2026-01-01',
author: '作者',
image: frontendIcon
}
]
}
```
## 许可证
Apache License 2.0
---
