🚀 快速开始

欢迎使用纸鸢Astro温馨清新极简个人博客！本文档将帮助你快速了解如何使用本项目🔽

📋 前置要求

在开始之前，请确保你的环境满足以下条件：

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

📁 项目结构

.
├── doc/                    # ◀️ 文档目录「存放 MD 文档」
│   ├── getting-started.md  # ◀️ 快速开始
│   └── ...
├── src/
│   ├── components/         # ◀️ Vue 组件
│   ├── pages/              # ◀️ 页面路由
│   └── styles/             # ◀️ 样式文件
├── public/                 # ◀️ 静态资源
└── astro.config.mjs        # ◀️ Astro 配置

📝 添加新文档

只需在 doc 目录下创建 .md 文件，即可自动生成对应路由：

文件路径	访问链接
`doc/getting-started.md`	`/doc/getting-started`
`doc/api-reference.md`	`/doc/api-reference`
`doc/guide/faq.md`	`/doc/guide/faq`

🔗 自定义访问路径

你可以在文档的 frontmatter 中添加 url 字段来自定义访问路径：

---
title: '快速开始'
description: '项目快速入门指南'
url: '/quick-start'
---

文件路径	自定义URL	实际访问链接
`doc/getting-started.md`	`/quick-start`	`/quick-start`
`doc/api-reference.md`	`/api`	`/api`
`doc/guide/faq.md`	`/help/faq`	`/help/faq`

💡 提示：自定义URL支持多级路径，如 /help/faq、/docs/v2/api 等🔽

🖼️ 设置封面图片

你可以在文档的 frontmatter 中添加 cover 字段来设置封面图片，封面图会显示在首页【最新文档】板块：

---
title: '快速开始'
description: '项目快速入门指南'
cover: '/assets/images/banner.jpg'
---

字段	说明	示例
`cover`	封面图片地址，支持相对路径或绝对路径	`/assets/zhiyuan/gura.avif`

💡 提示：封面图片建议使用 16:9 比例的图片，宽度建议 800px 以上，以获得最佳显示效果🔽

🎨 自定义样式

文档页面支持 ☀️ 亮色和 🌆 暗色两种主题，自动根据系统偏好切换🔽

💡 提示：所有文档都支持标准的 Markdown 语法，包括代码块、表格、列表等🔽

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