主题

原文 - Docs Introduction

使用主题#

docusaurus.config.js指定使用的主题,可以同时使用多个主题:

docusaurus.config.js
module.exports = {
// ...
themes: ['@docusaurus/theme-classic', '@docusaurus/theme-live-codeblock'],
};

主题组件#

通常情况下,主题会提供一系列React组件,比如NavbarLayoutFooter

你可以通过webpack使用@theme别名,在你的代码中导入这些组件:

import Navbar from '@theme/Navbar';

@theme别名的引用优先级如下:

  1. 项目目录website/src/theme
  2. Docusaurus主题NPM包的theme目录
  3. 回退使用Docusaurus core里提供的组件(通常不会)

一下是目录结构:

website
├── node_modules
│ └── docusaurus-theme
│ └── theme
│ └── Navbar.js
└── src
└── theme
└── Navbar.js

使用<Root>包裹站点#

<Root>主题组件是Docusaurus站点渲染的最顶层组件.

通过创建src/theme/Root.js文件可以包裹你的站点,增加其他逻辑:

src/theme/Root.js
import React from 'react';
// Default implementation, that you can customize
function Root({children}) {
return <>{children}</>;
}
export default Root;

这个组件会被应用到路由和<Layout>, 并且永远不会unmount.

Swizzling 主题组件#

Docusaurus的主题组件被设计成可替换,使用以下命令替换组件

npm run swizzle <theme name> [component name] [-- --danger]

比如替换@docusaurus/theme-classic主题的<Footer /> 组件:

npm run swizzle @docusaurus/theme-classic Footer

或者替换<NavBar />:

npm run swizzle @docusaurus/theme-classic NavBar -- --danger

包裹主题组件#

有时候你仅仅在原有的主题组件的基础上加一些自己的逻辑,这种情况可以导入原始的主题组件,然后在添加自己的代码.

作为站点所有者#

可以通过@theme-original别名导入原始的主题组件,下面是一个在footer上面显示一些文本的例子(文件src/theme/Footer.js):

src/theme/Footer.js
/**
* 注意直接导入 "@theme/Footer" 会失败, 因为上述提到了@theme的优先级,
* 所有在本文件使用 @theme/Footer 想导入自己导入自己,所以会失败
*/
import OriginalFooter from '@theme-original/Footer';
import React from 'react';
export default function Footer(props) {
return (
<>
<div>Before footer</div>
<OriginalFooter {...props} />
</>
);
}
info

点击这里查看 @docusaurus/theme-classic 可被替换的组件列表.