Skip to main content

Docusaurus Client API

Docusaurus 为构建站点提供了一些客户端API会帮到你.

Components 组件​

这是可多次使用的React组件, 它将会管理文档头部的所有变更. 它是新人友好的, 接收富HTML标签, 输出富HTML标签, 它是由 React Helmet 包裹.

使用示例:

import React from 'react';
import Head from '@docusaurus/Head';

const MySEO = () => (
  <Head>
    <meta property="og:description" content="My custom description" />
    <meta charSet="utf-8" />
    <title>My Title</title>
    <link rel="canonical" href="http://mysite.com/example" />
  </Head>
);

嵌套或后面的组件将会覆盖重复的使用:

<Parent>
  <Head>
    <title>My Title</title>
    <meta name="description" content="Helmet application" />
  </Head>
  <Child>
    <Head>
      <title>Nested Title</title>
      <meta name="description" content="Nested component" />
    </Head>
  </Child>
</Parent>

最终输出结构为: 

<head>
  <title>Nested Title</title>
  <meta name="description" content="Nested component" />
</head>

这个组件能够链接到内部页面, 而且有一个强大的特性叫预加载. 预加载被用来预先加载资源, 用户导航到组件时才加载资源. 对于低优先级的资源, 我们使用 IntersectionObserver 检测当 <Link>在视窗时加载. 对于高优先级的请求, 使用onMouseOver事件触发:

import React from 'react';
import Link from '@docusaurus/Link';

const Page = () => (
  <div>
    <p>
      Check out my <Link to="/blog">blog</Link>!
    </p>
    <p>
      {/* Note that external links still use `a` tags, but automatically opens in new tab. */}
      Follow me on <a href="https://twitter.com/docusaurus">Twitter</a>!
    </p>
  </div>
);

to: string

需要导航到的目标地址, 比如: /docs/introduction

<Link to="/courses" />

<Redirect/>​

渲染的 <Redirect> 将会导航到一个新地址. 这个新地址将会在历史记录堆栈里覆盖当前地址, 就像是服务器端输出跳转(HTTP 3xxx). 你可以查看React Router's Redirect documentation获取更多可用props信息.

使用示例:

import React from 'react';
import {Redirect} from '@docusaurus/router';

const Home = () => {
  return <Redirect to="/docs/test" />;
};

备注 @docusaurus/router 实现并支持 React Router 的特性.

<BrowserOnly/>​

<BrowserOnly>组件接受一个render函数的属性, 这个渲染函数不会在构建进程里的预渲染阶段执行. 这对只能在浏览器环境运行的代码是有用的. 为了改进SEO，你也可以使用fallback提供回退内容:

import BrowserOnly from '@docusaurus/BrowserOnly';

const MyComponent = () => {
  return (
    <BrowserOnly
      fallback={<div>The fallback content to display on prerendering</div>}>
      {() => {
        // Something that should be excluded during build process prerendering.
      }}
    </BrowserOnly>
  );
};