first commit

app/guide/_meta.js

@@ -0,0 +1,4 @@
+export default {
+    basics: "1. 基础概念",
+    "best-practices": "2. 最佳实践",
+};

app/guide/basics/page.mdx

@@ -0,0 +1,80 @@
+# 基础概念
+
+## 文件结构
+
+```
+nextra-docs-template/
+├── app/                    # 应用目录
+│   ├── _meta.js           # 主导航配置
+│   ├── layout.tsx         # 布局组件
+│   ├── page.mdx           # 首页
+│   ├── getting-started/   # 入门指南
+│   └── guide/             # 使用指南
+├── public/                # 静态资源
+├── theme.config.tsx       # 主题配置
+├── next.config.mjs        # Next.js 配置
+├── package.json           # 项目配置
+└── tsconfig.json          # TypeScript 配置
+```
+
+## 核心概念
+
+### MDX
+
+Nextra 使用 MDX 格式，支持在 Markdown 中使用 React 组件：
+
+```markdown
+# 标题
+
+普通文本。
+
+<MyComponent />
+
+代码示例：
+
+\`\`\`js
+console.log('Hello, Nextra!');
+\`\`\`
+```
+
+### 导航系统
+
+Nextra 根据文件结构和 `_meta.js` 自动生成导航。
+
+- **主导航**：`app/_meta.js`
+- **子导航**：各子目录的 `_meta.js`
+
+### 侧边栏
+
+侧边栏自动根据文件结构生成，支持：
+- 手风琴式折叠
+- 多级嵌套
+- 自动排序
+
+## 常用组件
+
+### 代码块
+
+使用三个反引号创建代码块：
+
+```javascript
+function hello() {
+  console.log('Hello!');
+}
+```
+
+### 提示框
+
+使用 `>` 创建提示框：
+
+> 这是一个提示框，用于强调重要内容。
+
+### 列表
+
+**无序列表：**
+- 项目一
+- 项目二
+
+**有序列表：**
+1. 第一步
+2. 第二步

app/guide/best-practices/page.mdx

@@ -0,0 +1,102 @@
+# 最佳实践
+
+## 文档组织
+
+### 合理的目录结构
+
+建议按功能或主题组织文档：
+
+```
+app/
+├── getting-started/     # 入门相关
+├── guide/               # 使用指南
+├── api/                 # API 文档
+└── examples/            # 示例代码
+```
+
+### 清晰的命名
+
+使用简洁、清晰的文件名：
+- ✅ `installation.mdx`
+- ✅ `quick-start.mdx`
+- ❌ `page1.mdx`
+- ❌ `how-to-install-this-thing.mdx`
+
+## 内容编写
+
+### 使用标题层级
+
+- `#` 用于页面标题（每个页面只有一个）
+- `##` 用于主要章节
+- `###` 用于子章节
+
+避免跳级使用标题。
+
+### 添加代码示例
+
+代码示例应清晰、完整、可运行：
+
+```javascript
+// ✅ 好的示例
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+
+console.log(greet('World')); // 输出: Hello, World!
+```
+
+### 使用表格展示数据
+
+| 配置项 | 类型 | 说明 |
+|--------|------|------|
+| `theme` | string | 主题名称 |
+| `logo` | ReactNode | 站点 Logo |
+
+## 性能优化
+
+### 图片优化
+
+使用 WebP 格式，压缩图片大小：
+
+```markdown
+![示例图片](./image.webp)
+```
+
+### 代码高亮
+
+指定语言以启用代码高亮：
+
+\`\`\`javascript
+const code = 'highlighted';
+\`\`\`
+
+## 可访问性
+
+### 语义化 HTML
+
+使用正确的标题层级和语义化标签。
+
+### 描述性链接
+
+避免使用"点击这里"这样的链接文本：
+
+- ✅ [查看安装指南](/getting-started/installation)
+- ❌ [点击这里](/getting-started/installation)
+
+## 部署建议
+
+### 静态托管
+
+推荐使用以下静态托管服务：
+- Vercel
+- Netlify
+- GitHub Pages
+- Cloudflare Pages
+
+### 构建命令
+
+```bash
+pnpm build
+```
+
+构建完成后，`out` 目录包含所有静态文件。