Client API

Docusaurus Client API#

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

Components 组件#

<Head/>#

这是可多次使用的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>

<Link/>#

这个组件能够链接到内部页面, 而且有一个强大的特性叫预加载. 预加载被用来预先加载资源, 用户导航到组件时才加载资源. 对于低优先级的资源, 我们使用 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>
);
};