# hello-blog
**Repository Path**: dkbnull/hello-blog
## Basic Information
- **Project Name**: hello-blog
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-04-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Hello Blog
---
## 项目简介
Hello Blog 是一个基于 Vue 3 + Vite 构建的个人技术博客系统，专注于分享 Java、Spring Boot、Docker、Linux 等技术文章。
## 技术栈
| 技术 | 版本 | 说明 |
|------------|--------|-------------|
| Vue | 3.5.30 | 前端框架 |
| Vue Router | 5.0.3 | 路由管理 |
| Vite | 8.0.8 | 构建工具 |
| marked | 17.0.4 | Markdown 解析 |
## 项目结构
```
hello-blog/
├── public/ # 静态资源
| ├── articles/ # 文章内容
│ └── favicon.svg # Logo
├── src/
│ ├── assets/ # 资源文件（图标、图片）
│ ├── components/ # 组件
│ │ ├── Header.vue # 顶部导航
│ │ ├── Footer.vue # 底部
│ │ ├── PostCard.vue # 文章卡片
│ │ └── Sidebar.vue # 侧边栏
│ ├── data/ # 数据层
│ │ ├── articles.js # 文章加载工具
│ │ └── data.js # 文章数据
│ ├── router/ # 路由配置
│ ├── utils/ # 工具函数
│ ├── views/ # 页面
│ │ ├── Home.vue # 首页/分类页
│ │ ├── ArticleDetail.vue # 文章详情
│ │ └── About.vue # 关于
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── style.css # 全局样式（含 CSS 变量）
├── scripts/
│ └── copy-assets.js # 构建后复制静态资源
├── vite.config.js # Vite 配置
└── package.json
```
## 功能特性
### 📝 文章管理
- 文章分类浏览
- Markdown 格式文章展示
- 文章标签筛选
### 🎨 界面设计
- 响应式布局，适配桌面端/移动端
- 深色/浅色模式切换
- CSS 变量统一主题配色（主题色 #42b883）
- 卡片式设计，简洁美观
### ⚡ 性能优化
- 路由懒加载
- 构建资源自动哈希
- 文章内容缓存
## 如何添加文章
### 1. 准备文章内容
在 `public/articles/` 目录下创建分类文件夹和文章文件：
```
public/articles/
├── vue/
│ └── 01.html
├── vite/
│ ├── 00.html
│ ├── 01.html
│ └── ...
└── ...
```
### 2. 添加文章元数据
编辑 `src/data/data.js`，在对应分类下添加文章信息：
```javascript
export const articlesData = {
java: [
{
id: '01',
title: '文章标题',
category: 'vue',
tags: ['Vue', '前端'],
date: '2026-01-01',
author: '作者',
image: vueIcon
}
]
}
```
### 3. 构建验证
```bash
npm run build
```
## 许可证
Apache License 2.0
---
