#Runtime API

Rspress 暴露一些运行时 API，方便你做一些自定义的逻辑。

#usePageData

• 类型： () => PageData

获取当前页面的数据，返回值为一个对象，包含了当前页面的所有数据。

import { usePageData } from '@rspress/core/runtime';

function MyComponent() {
  const pageData = usePageData();
  return <div>{pageData.page.title}</div>;
}

#useLang

• 类型： () => string

获取当前语言，返回值为一个字符串，即当前语言。

import { useLang } from '@rspress/core/runtime';

function MyComponent() {
  const lang = useLang();
  // lang === 'zh-CN'
  return <div>{lang}</div>;
}

#useVersion

• 类型： () => string

在多版本文档的场景下，获取当前文档版本，返回值为一个字符串，即当前版本。

import { useVersion } from '@rspress/core/runtime';

export default () => {
  const version = useVersion();
  return <div>当前版本：{version}</div>;
};

#useDark

• 类型： () => boolean

当前主题是否为暗黑模式，返回值为一个布尔值。

import { useDark } from '@rspress/core/runtime';

function MyComponent() {
  const dark = useDark();
  return <div>{dark}</div>;
}

注意，在 SSG 过程中，useDark 无法准确反映用户浏览器的主题设置，因为 SSG 是在构建阶段执行的。只有在客户端 hydration 完成后，这个 hook 才会返回正确的主题值。

如果你需要在 SSG 阶段应用暗黑主题样式，建议使用 CSS 选择器 .dark 来设置样式。Rspress 会在文档根元素上添加 dark 类名，这个类名在 SSG 和客户端都能正确生效：

/* 浅色模式样式 */
.my-component {
  color: black;
  background-color: white;
}

/* 暗黑模式样式 */
.dark .my-component {
  color: white;
  background-color: #1a1a1a;
}

#useI18n

Rspress 提供了 useI18n 这个 hook 来获取国际化文本，使用方式如下：

import { useI18n } from '@rspress/core/runtime';

const MyComponent = () => {
  const t = useI18n();

  return <div>{t('gettingStarted')}</div>;
};

为了获得更好的类型提示，你可以在 tsconfig.json 中配置 paths:

{
  "compilerOptions": {
    "paths": {
      "i18n": ["./i18n.json"]
    }
  }
}

然后在组件中这样使用:

import { useI18n } from '@rspress/core/runtime';

const MyComponent = () => {
  const t = useI18n<typeof import('i18n')>();

  return <div>{t('gettingStarted')}</div>;
};

这样你就可以获得 i18n.json 中定义的所有文本 key 的类型提示了。

查看 国际化 了解更多。

#路由 Hook

Rspress 内部使用并重导出了 react-router-dom 的所有 API，你可以这样来使用:

import { useLocation } from '@rspress/core/runtime';

function MyComponent() {
  const location = useLocation();
  return <div>{location.pathname}</div>;
}