# homePage

**Repository Path**: qiangii/homePage

## Basic Information

- **Project Name**: homePage
- **Description**: 一个简洁美观的个人主页项目，集成了任务列表等实用功能，支持多种个性化配置，让你的主页独具特色
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-23
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 🏠 个人主页

**一个极简优雅的个人主页项目**

采用居中布局设计，集成一言、时间显示、社交链接、网站导航等实用功能  
支持多种个性化配置，打造独具特色的个人主页

[简体中文](./README.md) | [English](./README_EN.md)

![主页预览](.github/images/image1.png)
![移动端预览](.github/images/image2.png)

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
[![Vue](https://img.shields.io/badge/Vue-3.4+-green.svg)](https://vuejs.org/)
[![Vite](https://img.shields.io/badge/Vite-4.5+-purple.svg)](https://vitejs.dev/)

</div>

---

## 📖 项目简介

这是一个功能丰富、设计精美的个人主页项目，采用极简居中布局，为用户提供优雅的浏览体验。项目基于 Vue 3 + Vite 构建，支持 PWA，具有良好的移动端适配。

### ✨ 设计特点

- 🎨 **极简设计** - 居中布局，去除多余装饰，专注内容本身
- 🌈 **优雅动画** - 渐进式淡入动画，流畅的交互体验
- 📱 **响应式设计** - 完美适配桌面端和移动端
- 🎭 **毛玻璃效果** - 现代化的视觉风格
- 🖼️ **自定义背景** - 支持多张壁纸随机切换

---

## ✨ 功能特性

- [x] 🎬 载入动画
- [x] 🖼️ 自定义头像和站点名称
- [x] ⏰ 实时时间显示（年/月/日 时:分:秒）
- [x] 💬 Hitokoto 一言（点击刷新）
- [x] 🔗 快捷网站导航（支持水平滑动）
- [x] 👥 社交媒体链接（悬浮显示提示）
- [x] ✅ 任务列表（支持云端同步）
- [x] ⚙️ 全局设置（右上角齿轮图标）
- [x] 📱 完美的移动端适配
- [x] 🖼️ 自定义背景壁纸
- [x] 🎵 音乐播放器（可选）
- [x] 🌤️ 天气显示（可选）

---

## 🚀 快速开始

### 环境要求

- Node.js >= 16.16.0
- pnpm >= 8.0.0

### 本地开发

```bash
# 安装 pnpm
npm install -g pnpm

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview
```

### 配置环境变量

1. 复制 `.env.example` 文件并重命名为 `.env`
2. 根据需要修改配置项

```bash
# 站点信息
VITE_SITE_NAME = "你的主页名称"
VITE_SITE_AUTHOR = "你的名字"
VITE_SITE_URL = "your-domain.com"
VITE_SITE_MAIN_LOGO = "/images/头像.png"  # 主页头像

# 天气 API Key（可选）
VITE_WEATHER_KEY = ""

# 音乐配置（可选）
VITE_SONG_API = ""
VITE_SONG_ID = ""

# 任务列表存储方式
VITE_TODO_STORAGE = "localStorage"  # 或 "webdav" / "minio"
```

---

## 📦 部署方式

### 方式一：Vercel 部署（推荐）

1. Fork 本仓库到你的 GitHub 账号
2. 在 [Vercel](https://vercel.com) 中导入项目
3. 配置环境变量
4. 点击部署

### 方式二：手动部署

```bash
# 构建项目
pnpm build

# 将 dist 目录上传至服务器
```

### 方式三：Docker 部署

```bash
# 构建镜像
docker build -t home .

# 运行容器
docker run -p 12445:12445 -d home
```

---

## ⚙️ 功能配置

### 🔗 网站导航

编辑 `src/assets/siteLinks.json` 文件：

```json
[
  {
    "icon": "Blog",
    "name": "博客",
    "link": "https://blog.example.com/"
  }
]
```

图标配置在 `src/views/MainLeft.vue` 中，可前往 [xicons.org](https://www.xicons.org) 选择图标。

### 👥 社交链接

编辑 `src/assets/socialLinks.json` 文件：

```json
[
  {
    "name": "Github",
    "icon": "/images/icon/github.png",
    "tip": "去 Github 看看",
    "url": "https://github.com/your-username"
  }
]
```

### 💬 一言功能

- 自动从 [Hitokoto](https://hitokoto.cn/) 获取一言
- 点击一言文字可刷新
- 可在设置中开启/关闭

### ✅ 任务列表

支持三种存储方式：

#### 1. localStorage（默认）

```bash
VITE_TODO_STORAGE = "localStorage"
```

#### 2. WebDAV 同步

```bash
VITE_TODO_STORAGE = "webdav"
VITE_WEBDAV_URL = "http://your-domain/dav"
VITE_WEBDAV_USERNAME = "username"
VITE_WEBDAV_PASSWORD = "password"
```

#### 3. MinIO 对象存储

```bash
VITE_TODO_STORAGE = "minio"
VITE_MINIO_ENDPOINT = "http://your-domain:9000"
VITE_MINIO_ACCESS_KEY = "your-access-key"
VITE_MINIO_SECRET_KEY = "your-secret-key"
VITE_MINIO_BUCKET = "your-bucket"
```

### 🖼️ 自定义背景

**默认背景：** 项目内置 10 张背景图片，位于 `public/images/background1.jpg` ~ `background10.jpg`

**添加更多背景：**

1. 将图片命名为 `background11.jpg`、`background12.jpg` 等
2. 放入 `public/images` 目录
3. 修改 `src/components/Background.vue` 中的数字

**自定义头像：**

将你的头像放入 `public/images/` 目录，然后在 `.env` 中配置：

```bash
VITE_SITE_MAIN_LOGO = "/images/头像.png"
```

---

## 🛠️ 技术栈

- **框架：** [Vue 3](https://cn.vuejs.org/)
- **构建工具：** [Vite](https://vitejs.cn/)
- **状态管理：** [Pinia](https://pinia.vuejs.org/zh/)
- **图标库：** [IconPark](https://iconpark.oceanengine.com/official) / [xicons](https://xicons.org/)
- **UI组件：** [Element Plus](https://element-plus.org/)
- **音乐播放器：** [Aplayer](https://aplayer.js.org/)
- **字体：** HarmonyOS Sans / Pacifico / UnidreamLED
- **PWA 支持：** vite-plugin-pwa

---

## 🎨 设计亮点

### 极简居中布局

- 所有内容垂直居中排列
- 去除多余的卡片和边框
- 纯文字和图标展示
- 留白充足，视觉舒适

### 优雅的交互

- 渐进式淡入动画
- 悬浮时的微妙反馈
- 平滑的过渡效果
- 响应式的触摸体验

### 细节优化

- 社交图标悬浮显示提示文字
- 网站导航支持水平滑动
- 时间显示采用 LED 字体
- 一言采用斜体，更具文艺感

---

## 🔌 API 服务

- [Hitokoto 一言](https://hitokoto.cn/)
- [高德开放平台](https://lbs.amap.com/)（可选）
- [教书先生 API](https://api.oioweb.cn/)（备用天气）

---

## 📄 开源协议

本项目基于 [MIT](./LICENSE) 协议开源。

---

## 🙏 鸣谢

感谢所有为本项目提供 API 服务和开源组件的开发者们！

特别感谢原项目 [imsyy/home](https://github.com/imsyy/home) 提供的基础框架。

---

<div align="center">

**如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！**

Made with ❤️ by qzl

</div>