shiroki.live/grdoc-astro-vue

Public

WeChat Login

Code Issues Pull requests Events Packages Insights

main

💫 优化搜索框样式

.cnb
.vscode
doc
public
src
.cnb.yml
.gitignore
LICENSE
README.md
astro.config.mjs
package.json
pagefind.yml
remove-comments-integration.js
tsconfig.json
vercel.json

🕊️ 「纸鸢」Astro温馨清新极简个人博客

Shiroki 预览图

简介 • 设计特色 • 技术栈 • 项目结构 • 配置说明 • 快速开始

📝 简介

「纸鸢」 是一个基于 Astro + Vue 构建的个人主页/作品集网站模板，采用「温馨科技风」（Soft Minimalism）设计理念，融合了清新、专业、亲和与现代的设计元素温馨清新极简个人博客

💡 热爱技术与设计的创作者，专注于构建优雅且实用的数字产品温馨清新极简个人博客在这里记录学习历程，分享技术心得，探索无限可能温馨清新极简个人博客

🎨 设计特色

✨ 温馨科技风（Soft Minimalism）

特性	描述
🌈 柔和渐变	粉蓝双色渐变背景，营造温暖氛围
🫧 毛玻璃效果	导航栏采用 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

6️⃣ 生成 Pagefind 搜索索引


npm run pagefind

7️⃣ 复制 Pagefind 索引到 public 目录


npm run copy-pagefind

8️⃣ 先构建再启动开发服务器

完整本地开发环境启动指令


npm run dev:full

🎯 功能模块

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

📝 配置说明

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

📁 配置目录结构


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 等保持默认值不变
};