hook-docs — 以 ReactUse 方式为钩子编写文档
文档位于 Astro 站点 packages/website-astro 中。侧边栏和路由由文件路径自动构建——没有 routes.json 或侧边栏配置需要编辑。
文件位置(每个语言一个)
packages/website-astro/src/content/docs/{category}/useX.mdx # 英文
packages/website-astro/src/content/docs-zh-hans/{category}/useX.mdx # 简体中文
packages/website-astro/src/content/docs-zh-hant/{category}/useX.mdx # 繁體中文
{category} 选项为:browser、effect、element、state、integrations。你选择的文件夹就是类别——它决定了注册表条目和规范 URL(https://reactuse.com/{category}/usex/,小写)。
前端元数据
Schema 位于 packages/website-astro/src/content.config.ts——只有 title 是必需的;description、sidebar_label、sidebar_position 为可选项。要与现有样式一致:
---
title: useX – 状态钩子用法与示例
sidebar_label: useX
description: "useX 是一个 React 钩子,……(一句话,用作 meta 描述)。"
---
正文结构
遵循既定的模板(见 content/docs/browser/useClipboard.mdx):
# useX
一行描述它的功能。
一个简短的段落解释该钩子,如有需要,可链接到相关的 MDN/规范页面。
### 何时使用
- 一个具体用例的列表项
- 另一个用例
### 注意事项
- SSR 安全性 / 浏览器支持注意事项
- 任何需要注意的地方
## 用法
```tsx live
function Demo() {
const [value, set] = useX(0);
return <button onClick={() => set(value + 1)}>{value}</button>;
};
%%API%%
- ` ```tsx live ` 代码块用于渲染一个可实时编辑的演示。请**内联**编写演示,无需从钩子源码导入。
- 保留 `%%API%%` 作为最后一行。它会在构建时被替换为自动生成的 API 表格(来自钩子的 `interface.ts` JSDoc);如果尚未有任何 API 文档,它会被静默移除。
## 翻译
zh-Hans / zh-Hant 文件完全镜像英文结构——翻译正文和前端元数据的 `title`/`description`,保持代码演示不变。
zh-Hans → zh-Hant 不是单纯的字符转换;这些术语有所不同:
| 简体 | 繁體 | | 简体 | 繁體 |
|------|------|-----|------|------|
| 状态 | 狀態 | | 默认 | 預設 |
| 函数 | 函數 | | 设置 | 設定 |
| 参数 | 參數 | | 获取 | 獲取 |
| 组件 | 組件 | | 监听 | 監聽 |
| 类型 | 類型 | | 处理 | 處理 |
| 数组 | 數組 | | 实例 | 實例 |
| 对象 | 對象 | | 管理 / 配置 | 不變 |
## 编写后——重新生成注册表
```bash
bash scripts/generate-hook-registry.sh
这会遍历英文文档文件夹并重写 scripts/hook-registry.json(hookName → { category, url })。确保博客/文档链接正确解析。验证新钩子出现在正确的类别下且 URL 为小写。