极简笔记

基于 VuePress Theme Hope v2 的美观炫丽个人知识库。

技术栈

• Vue3 + VuePress2 + vuepress-theme-hope v2
• Markdown + KaTeX 公式 + 代码分组
• 靛蓝紫主色 + 粉色强调色 + 渐变光效
• pnpm 包管理

视觉特性

• 页面过渡动画（淡入 + 上移）
• Hero 全屏动画（图片呼吸效果）
• 导航栏渐变线条 + 悬浮高亮
• 卡片光效边框 + 悬浮上移 + 交错淡入
• 背景微光装饰
• 浅色/深色双套炫丽配色
• 动画降级（尊重 prefers-reduced-motion）

快速上手

1. 环境准备

• Node.js >= 18.x
• pnpm >= 9.x (npm install -g pnpm)

2. 安装与启动

# 克隆项目
git clone https://github.com/shawnxie/mininote.git
cd mininote

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建静态站点
pnpm build

# 本地预览构建产物
pnpm preview

3. 编写笔记

在对应目录下添加 .md 文件即可：

# 例：添加一篇 AI 应用笔记
src/ai/applications/my-article.md

# 例：添加一篇 Vue 笔记
src/frontend/vue/my-article.md

文章需包含以下 frontmatter：

---
title: 文章标题
excerpt: 文章摘要
date: 2024-01-15
category: 分类名称
tags:
  - 标签1
  - 标签2
---

4. 图片管理

每篇文章的图片存放在对应的 images 目录中：

src/ai/principles/neural-network.md  →  src/ai/principles/images/neural-network/xxx.png

文章中引用：![描述](./images/neural-network/xxx.png)

5. 插件配置

6. 部署

推送到 GitHub 后，GitHub Actions 自动构建并部署到 GitHub Pages。

目录结构

src/
├── .vuepress/          # 站点配置
│   ├── config.ts       # 主配置
│   ├── navbar.ts       # 导航栏
│   ├── sidebar.ts      # 侧边栏
│   ├── theme.ts        # 主题与插件（炫丽视觉配置）
│   ├── client.ts       # 客户端增强
│   ├── components/     # 自定义组件
│   ├── styles/         # 炫丽调色板 + 动画样式
│   └── public/         # 静态资源
├── front/              # 前沿（RSS）
├── ai/                 # AI 笔记
├── frontend/           # 前端笔记
├── backend/            # 后端笔记
├── opensource/         # 开源笔记
├── topic/              # 专题笔记
├── life/               # 生活笔记
└── index.md            # 首页（Hero全屏 + 卡片列表）

命令一览