logo
shiroki.live/grdoc-astro-vue
Public
3
0
WeChat Login
CodeIssuesPull requestsEventsPackagesInsights
main
Branch
2
Tag
0
白木<misaka273@outlook.com>
❌ 删除旧配置
77d229c8
117 commits
.cnb
.vscode
doc
public
scripts
src
.cnb.yml
.gitignore
LICENSE
README.md
astro.config.mjs
package-lock.json
package.json
pagefind.yml
remove-comments-integration.js
tsconfig.json
vercel.json

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

Shiroki 预览图

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

📝 简介

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

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

🎨 设计特色

✨ 温馨科技风（Soft Minimalism）

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

🖼️ 视觉亮点

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

🛠️ 技术栈

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

📦 主要依赖

🚀 Astro 核心

  • @astrojs/vue ^6.0.1 - Astro Vue 集成插件
  • @astrojs/node ^10.0.4 - Node.js 适配器
  • @astrojs/check ^0.9.8 - Astro 类型检查
  • astro ^6.1.2 - Astro 核心框架

⚡ Vue 生态

  • vue ^3.5.31 - Vue 3 框架
  • typescript ^5.9.3 - 类型安全支持

📝 Markdown 处理

  • markdown-it ^14.1.1 - Markdown 解析器
  • markdown-it-anchor ^9.2.0 - 标题锚点插件
  • markdown-it-container ^4.0.0 - 自定义容器插件
  • marked ^17.0.5 - Markdown 渲染器
  • marked-highlight ^2.2.3 - 代码高亮支持

🎨 代码高亮

  • shiki ^4.0.2 - 语法高亮引擎
  • @shikijs/markdown-it ^4.0.2 - Shiki Markdown 集成
  • highlight.js ^11.11.1 - 备用代码高亮

🔍 搜索功能

  • pagefind ^1.4.0 - 静态站点搜索
  • @pagefind/default-ui ^1.4.0 - 搜索 UI 组件

🛠️ 开发工具

  • sass ^1.98.0 - SCSS 预处理器
  • terser ^5.46.1 - JS 代码压缩
  • concurrently ^9.2.1 - 并行任务运行

📁 项目结构

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.user/    # ◀️ 👤 【用户自定义配置目录】优先级读取
│   │   │   ├── 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

🎯 功能模块

🏠 首页模块

模块描述
🏠 首页横幅个人介绍、头像展示与社交链接入口
👤 角色介绍特性/角色卡片展示区域
🧩 技能展示技术栈分类展示与熟练度可视化
📃 文档列表最新文章展示，支持分类筛选
💼 项目作品精选项目卡片展示
🔻 页脚信息联系方式、版权信息与版本号

📚 文档系统

功能描述
📖 文档列表页/docs 路由，展示所有文档卡片
📃 文档详情页动态路由渲染 Markdown 文档
🏷️ 分类管理支持文档分类与标签系统
📑 目录导航文档内锚点导航与侧边栏

🎨 主题与交互

功能描述
☀️/🌙 主题切换明亮/暗色双主题，支持自动适配
🔍 全文搜索Pagefind 搜索，支持快捷键 Ctrl+K
🧭 智能导航固定导航栏，支持移动端汉堡菜单
🚀 回到顶部滚动显示火箭按钮，一键返回顶部
⌨️ 键盘导航支持方向键、空格、Home/End 快速跳转

⚡ 性能优化

特性描述
🎭 页面加载动画优雅的加载过渡效果
🖼️ 图片懒加载首屏关键图片预加载，其他懒加载
📝 content-visibility非可视区域渲染优化
🎨 CSS 优化玻璃拟态、硬件加速动画

📝 配置说明

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

📁 配置目录结构

src/config/
├── 📂 .config.user/            # ◀️ 【用户自定义配置目录】优先级读取
│   ├── blogger.ts              # ◀️ 👤 用户博主信息配置
│   ├── navbar.ts               # ◀️ 🧭 用户导航栏配置
│   ├── skills.ts               # ◀️ 🎯 用户技能配置
│   ├── projects.ts             # ◀️ 💼 用户项目配置
│   ├── footer.ts               # ◀️ 🔻 用户页脚配置
│   ├── socialLinks.ts          # ◀️ 🔗 用户社交链接配置
│   ├── characters.ts           # ◀️ 🎭 用户角色配置
│   ├── charactersPage.ts       # ◀️ 📄 用户角色页面配置
│   ├── docs.ts                 # ◀️ 📚 用户文档配置
│   └── home.ts                 # ◀️ 🏠 用户首页配置
├── blogger.ts                  # ◀️ 👤 默认博主信息配置
├── navbar.ts                   # ◀️ 🧭 默认导航栏配置
├── skills.ts                   # ◀️ 🎯 默认技能配置
├── projects.ts                 # ◀️ 💼 默认项目配置
├── footer.ts                   # ◀️ 🔻 默认页脚配置
├── socialLinks.ts              # ◀️ 🔗 默认社交链接配置
├── characters.ts               # ◀️ 🎭 默认角色配置
├── charactersPage.ts           # ◀️ 📄 默认角色页面配置
├── docs.ts                     # ◀️ 📚 默认文档配置
├── home.ts                     # ◀️ 🏠 默认首页配置
└── version.ts                  # ◀️ 🔢 版本号配置

🎯 配置优先级规则

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

🚀 快速定制步骤

使用用户配置目录（推荐）✨

1️⃣ 初始化用户配置

npm run init:config

此命令会自动创建 src/config/.config.user/ 目录并生成所有配置模板文件。

2️⃣ 编辑配置文件

路径：

./src/config/.config.user

修改对应配置文件

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

/* 📊 示例：启用 51.la 统计 src/config/.config.user/analytics.ts */
export const userAnalyticsConfig = {
  la51: {
    enabled: true,                          // ◀️ 设置为 true 启用统计
    id: '3LQTKPXwllrMFIlo',                // ◀️ 替换为你的 51.la 统计 ID
    src: '//sdk.51.la/js-sdk-pro.min.js',
    autoTrack: true,
    hashMode: true,
  },
};

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

直接修改默认配置（不推荐）

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

🔄 项目更新保护机制

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

场景行为
🔄 拉取项目更新.config.user/ 目录内的用户配置【不会被覆盖】
🆕 首次使用项目运行 npm run init:config 生成配置模板
📤 提交到 Git.config.user/ 目录【不会被提交】，保护隐私配置

📖 详细文档

更多配置说明请参考：用户自定义配置目录说明文档

📋 配置文件对照表

配置文件用途对应组件/页面
blogger.ts👤 博主个人信息、头像、介绍、社交链接BannerSection
navbar.ts🧭 导航栏品牌、菜单项、外部链接NavBar
skills.ts🎯 技能分类、熟练度、标签云SkillsSection
projects.ts💼 项目列表、图标、技术标签ProjectsSection
footer.ts🔻 页脚品牌、链接、联系方式、版权FooterSection
socialLinks.ts🔗 社交链接列表（供多处复用）BannerSection / FooterSection
characters.ts🎭 首页角色/特性卡片数据CharacterSection
charactersPage.ts📄 角色介绍页面配置characters.astro
docs.ts📚 文档系统配置 - 懒加载、排序、分类等DocsSection / docs.astro
home.ts🏠 首页模块显示开关控制index.astro
version.ts🔢 版本号配置 - 用于页脚显示FooterSection

🚀 配置覆盖规则

用户配置采用【完全覆盖】策略：

  • ✅ 用户配置文件存在 → 完全使用用户配置
  • ✅ 用户配置文件不存在 → 使用默认配置
/* 📝 示例：修改博主信息 */
export const userBloggerConfig = {
  avatar: '/assets/my-avatar.png',  // ◀️ 修改头像
  name: '白木',                      // ◀️ 修改名称
  role: '开发者',
  description: ['个人介绍第一行', '个人介绍第二行'],
  // ... 完整配置
};

🌈 样式变量

项目采用 SCSS 变量统一管理样式，位于 src/styles/variables.scss：

📱 响应式断点系统

项目内置了完善的响应式断点系统，适配多种设备尺寸：

断点名尺寸范围Mixin 名称用途
Mobilemax-width: 768px@include mobile手机端
Tablet769px - 1024px@include tablet平板端
Desktopmin-width: 1025px@include desktop桌面端

布局尺寸常量

常量值说明
$container-max-width1280px容器最大宽度
$container-padding24px容器内边距
$nav-height72px导航栏高度
$section-padding-y96px区域垂直内边距

☁️ CNB 云原生开发

本项目已配置 CNB 云原生开发环境，支持一键启动：

  • 🚀 启动开发环境 - 自动安装依赖并启动 Astro 开发服务器
  • ⚡ 构建＆部署 - 手动触发构建并部署到 dist 分支
  • 🔄 自动部署 - Push 到 master 分支自动触发构建部署

📜 开源协议

本项目采用 MIT License 开源协议温馨清新极简个人博客

🕊️ 白木 原创开发 🔗 gl.baimu.live

用 💕 和 熬夜 精心制作

About

🕊️ 「纸鸢」温馨清新极简个人博客 基于 astro + Vite + vite 独立开发

42.96 MiB
3 forks0 stars2 branches0 TagREADMEOther license
Language
TypeScript30.4%
Vue26.6%
Astro13.3%
JavaScript0.8%
Others28.9%
© 2026 Tencent, Inc. Supported by Tencent Cloud
About Us
Privacy Policy
Terms of Service
SLA
API
Docs
Showcase
Feedback
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
京ICP备11018762号-111
粤公网安备44030002006058号粤公网安备44030002006058号