特性	描述
🌈 柔和渐变	粉蓝双色渐变背景，营造温暖氛围
🫧 毛玻璃效果	导航栏采用 backdrop-filter 模糊效果
🎯 圆润设计	大量使用圆角元素，视觉更加亲和
🌿 清新配色	低饱和度色彩，避免冷冰冰的距离感
💫 微动效	细腻的悬浮动画与过渡效果

🖼️ 视觉亮点

☀️ 明亮主题 - 以白色为基底，搭配柔和的粉蓝色渐变
🎴 卡片式布局 - 内容模块化展示，层次分明
🔤 精致字体 - 使用「筑紫A丸」等优雅中文字体
🎭 装饰元素 - 几何图形点缀，增添活力与趣味

🛠️ 技术栈

技术	用途
Astro	静态站点生成器，高性能构建
Vue 3	组件化开发框架
TypeScript	类型安全的 JavaScript
SCSS	CSS 预处理器，变量与嵌套支持
CSS Variables	主题变量管理

📦 主要依赖

@astrojs/vue - Astro Vue 集成插件
vue ^3.5.31 - Vue 框架
astro ^6.1.2 - Astro 核心
sass ^1.98.0 - SCSS 编译器

📁 项目结构

grdoc-vue-vite/
├── 📂 .cnb/                    # ◀️ CNB 云原生配置
│   ├── settings.yml            # ◀️ 工作空间与 Fork 配置
│   ├── vscode.yml              # ◀️ VS Code 开发环境配置
│   └── web_trigger.yml         # ◀️ Web 触发器配置
│
├── 📂 public/                  # ◀️ 静态资源目录
│   ├── assets/                 # ◀️ 图片资源
│   │   ├── shiroki.jpg         # ◀️ 项目预览图
│   │   └── zhiyuan/            # ◀️ 其他图片资源
│   └── fonts/                  # ◀️ 字体文件
│       ├── 筑紫A丸.woff2       # ◀️ 筑紫A丸字体
│       └── ZiHun232Hao.woff2   # ◀️ 字魂232号字体
│
├── 📂 src/                     # ◀️ 源代码目录
│   ├── 📂 components/          # ◀️ Vue 组件
│   │   └── 📂 index/           # ◀️ 首页组件
│   │       ├── NavBar/         # ◀️ 导航栏组件
│   │       ├── BannerSection/  # ◀️ 首页横幅组件
│   │       ├── SkillsSection/  # ◀️ 技能展示组件
│   │       ├── ProjectsSection/# ◀️ 项目展示组件
│   │       ├── DocsSection/    # ◀️ 文档区域组件
│   │       └── FooterSection/  # ◀️ 页脚组件
│   │
│   ├── 📂 config/              # ◀️ 📝 统一配置文件目录
│   │   ├── 📂 .config/         # ◀️ 👤 【用户自定义配置目录】优先级最高
│   │   │   ├── blogger.ts      # ◀️ 👤 博主信息用户配置
│   │   │   ├── footer.ts       # ◀️ 🔻 页脚用户配置
│   │   │   ├── navbar.ts       # ◀️ 🧭 导航栏用户配置
│   │   │   ├── projects.ts     # ◀️ 💼 项目用户配置
│   │   │   ├── skills.ts       # ◀️ 🎯 技能用户配置
│   │   │   └── socialLinks.ts  # ◀️ 🌐 社交链接用户配置
│   │   ├── blogger.ts          # ◀️ 👤 博主信息默认配置（Banner区域）
│   │   ├── footer.ts           # ◀️ 🔻 页脚默认配置
│   │   ├── navbar.ts           # ◀️ 🧭 导航栏默认配置
│   │   ├── projects.ts         # ◀️ 💼 精选项目默认配置
│   │   ├── skills.ts           # ◀️ 🎯 专业技能默认配置
│   │   └── socialLinks.ts      # ◀️ 🌐 社交链接默认配置
│   │
│   ├── 📂 pages/               # ◀️ Astro 页面
│   │   └── index.astro         # ◀️ 首页入口
│   │
│   └── 📂 styles/              # ◀️ 全局样式
│       └── variables.scss      # ◀️ 🌈 SCSS 变量定义
│
├── 📄 .cnb.yml                 # ◀️ CNB CI/CD 主配置
├── 📄 astro.config.mjs         # ◀️ Astro 配置文件
├── 📄 package.json             # ◀️ 项目依赖配置
├── 📄 tsconfig.json            # ◀️ TypeScript 配置
└── 📄 README.md                # ◀️ 项目说明文档

🚀 快速开始

环境要求

Node.js >= 22.12.0
npm 或 pnpm

1️⃣ 克隆仓库

git clone https://cnb.cool/shiroki.live/grdoc-astro-vue
cd grdoc-astro-vue

2️⃣ 安装依赖

npm install

3️⃣ 启动开发服务器

npm run dev

开发服务器默认运行在 http://localhost:4321

4️⃣ 构建生产版本

npm run build

构建产物将输出到 dist/ 目录

5️⃣ 预览构建结果

npm run preview

🎯 功能模块

模块	描述
🏠 首页横幅	个人介绍与社交链接入口
🧩 技能展示	技术栈与能力可视化
📂 项目作品	作品集展示卡片
📚 技术文档	学习笔记与文档整理
📧 页脚信息	联系方式与版权信息

📝 配置说明

项目采用【双层配置架构】设计，支持【用户配置优先】的个性化定制方案，便于后续项目更新时保留用户的自定义配置：

📁 配置目录结构

src/config/
├── 📂 .config/                 # ◀️ 【用户自定义配置目录】gitignored
│   ├── blogger.ts              # ◀️ 用户博主信息配置
│   ├── navbar.ts               # ◀️ 用户导航栏配置
│   ├── skills.ts               # ◀️ 用户技能配置
│   ├── projects.ts             # ◀️ 用户项目配置
│   ├── footer.ts               # ◀️ 用户页脚配置
│   └── socialLinks.ts          # ◀️ 用户社交链接配置
├── blogger.ts                  # ◀️ 默认博主信息配置
├── navbar.ts                   # ◀️ 默认导航栏配置
├── skills.ts                   # ◀️ 默认技能配置
├── projects.ts                 # ◀️ 默认项目配置
├── footer.ts                   # ◀️ 默认页脚配置
└── socialLinks.ts              # ◀️ 默认社交链接配置

🎯 配置优先级规则

优先级	配置位置	说明
🥇 第一优先	`src/config/.config/*.ts`	用户自定义配置，构建时优先读取
🥈 第二优先	`src/config/*.ts`	默认配置，当用户配置不存在时作为后备

🚀 快速定制步骤

方式一：使用用户配置目录（推荐）✨

1️⃣ 进入用户配置目录

cd src/config/.config/

2️⃣ 修改对应配置文件

/* 📝 示例：修改博主信息 src/config/.config/blogger.ts */
export const userBloggerConfig: Partial<BloggerConfig> = {
  avatar: '/assets/your-avatar.png',  // ◀️ 修改头像
  name: '你的名字',                    // ◀️ 修改名称
  role: '你的职位',                    // ◀️ 修改身份
  description: ['介绍文本第一行', '介绍文本第二行'],
  // ... 其他配置
};

3️⃣ 保存后自动生效 - 无需重启开发服务器，配置热更新

方式二：直接修改默认配置

如需快速体验，可直接修改 src/config/*.ts 文件，但【更新项目时可能会被覆盖】

🔄 项目更新保护机制

.config/ 目录已添加到 .gitignore，这意味着：

场景	行为
🔄 拉取项目更新	`.config/` 目录内的用户配置【不会被覆盖】
🆕 首次使用项目	可到配置 `.config/` 目录进行修改
📤 提交到 Git	`.config/` 目录【不会被提交】，保护隐私配置。可自行取消忽略，查看 src/config/.config/README.md

📋 配置文件对照表

配置文件	用途	对应组件
`blogger.ts`	👤 博主个人信息、头像、介绍、社交链接	BannerSection
`navbar.ts`	🧭 导航栏品牌、菜单项、外部链接	NavBar
`skills.ts`	🎯 技能分类、熟练度、标签云	SkillsSection
`projects.ts`	💼 项目列表、图标、技术标签	ProjectsSection
`footer.ts`	🔻 页脚品牌、链接、联系方式、版权	FooterSection
`socialLinks.ts`	🌐 社交链接列表（供多处复用）	BannerSection / FooterSection

🚀 配置合并规则

用户配置采用【部分覆盖】策略：

✅ 用户定义的属性 → 覆盖默认值
✅ 用户未定义的属性 → 保留默认值
✅ 支持嵌套对象合并

/* 📝 示例：只修改名称和头像，其他保持默认 */
export const userBloggerConfig: Partial<BloggerConfig> = {
  avatar: '/assets/my-avatar.png',  // ◀️ 覆盖默认头像
  name: '白木',                      // ◀️ 覆盖默认名称
  // role、description 等保持默认值不变
};