Runtime API
Rspress 暴露一些运行时 API,方便你做一些自定义的逻辑。
usePageData
获取当前页面的数据,返回值为一个对象,包含了当前页面的所有数据。
import { usePageData } from 'rspress/runtime';
function MyComponent() {
const pageData = usePageData();
return <div>{pageData.page.title}</div>;
}
useLang
获取当前语言,返回值为一个字符串,即当前语言。
import { useLang } from 'rspress/runtime';
function MyComponent() {
const lang = useLang();
// lang === 'zh-CN'
return <div>{lang}</div>;
}
useVersion
在多版本文档的场景下,获取当前文档版本,返回值为一个字符串,即当前版本。
import { useVersion } from 'rspress/runtime';
export default () => {
const version = useVersion();
return <div>当前版本:{version}</div>;
};
useDark
当前主题是否为暗黑模式,返回值为一个布尔值。
import { useDark } from 'rspress/runtime';
function MyComponent() {
const dark = useDark();
return <div>{dark}</div>;
}
useI18n
框架提供了 useI18n
这个 hook 来获取国际化文本,使用方式如下:
import { useI18n } from 'rspress/runtime';
const MyComponent = () => {
const t = useI18n();
return <div>{t('getting-started')}</div>;
};
为了获得更好的类型提示,你可以在 tsconfig.json 中配置 paths
:
{
"compilerOptions": {
"paths": {
"i18n": ["./i18n.json"]
}
}
}
然后在组件中这样使用:
import { useI18n } from 'rspress/runtime';
const MyComponent = () => {
const t = useI18n<typeof import('i18n')>();
return <div>{t('getting-started')}</div>;
};
这样你就可以获得 i18n.json
中定义的所有文本 key 的类型提示了。
路由 Hook
框架内部使用并重导出了 react-router-dom
的所有 API,你可以这样来使用:
import { useLocation } from 'rspress/runtime';
function MyComponent() {
const location = useLocation();
return <div>{location.pathname}</div>;
}