主题

原文 - Docs Introduction

使用主题

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

docusaurus.config.js

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

主题组件

通常情况下，主题会提供一系列React组件，比如Navbar，Layout，Footer。

你可以通过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 可被替换的组件列表.