80 lines
1.4 KiB
Plaintext
80 lines
1.4 KiB
Plaintext
# 基础概念
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
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. 第二步 |