跳到主要内容

自定义组件

本文内容搬运自博主 kuizuo,原文地址:自定义组件

初始化的一个 docusaurus 项目就已经有预留好的的组件,例如博客布局,标签页归档页等等。但是这些组件的样式可能不满你的审美,或者是想增加在这些主题组件中增加点东西。那么就需要用到 Swizzle

主题组件

在 docusaurus 中的主题组件存放在 @docusaurus/theme-classic/theme 下,如果想要覆盖某个组件的话可以在 src/theme 目录下创建与之对应文件路径结构相同的文件。

像下面这样

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

每当导入 @theme/Navbar 时,website/src/theme/Navbar.js 都会被优先载入。

关于分层架构可看客户端架构 | Docusaurus

swizzle 组件

要输出所有 @docusaurus/theme-classic 组件的总览,可以运行:

yarn run swizzle @docusaurus/theme-classic -- --list

不过我更倾向于直接在 node_modules/@docusaurus/theme-classic/src/theme 查看所有组件。

这里以归档页举例,官方的归档页面组件是 theme/BlogArchivePage

有两种方式可以完成自定义组件:弹出组件或者包装组件

例如弹出组件,可以执行以下命令

yarn run swizzle @docusaurus/theme-classic BlogArchivePage -- --eject --typescript

这样会创建 src/theme/BlogArchivePage/index.tsx,也就是归档页面的代码,而要做的就是修改代码,实现自己所需的样式与功能。

不过这样获取到的只是index.tsx文件,有可能还存在子组件。所有我一般的做法是在 node_modules/@docusaurus/theme-classic/src/theme 中找到组件所在文件夹,然后将整个文件夹复制到 src/theme 下。这样能得到就是最原始的ts文件,同时所能修改的地方也就越多,更方便的个性化。

警告

但是,在使用自定义组件的时候,有些主题组件可能会存在一定风险。尤其是在升级 Docusaurus 变得更困难,因为如果接收的属性发生变化,或内部使用的主题 API 发生变化,有可能就会导致页面渲染失败。

就比如我在将 docusaurus 升级到 2.0.0 正式版的时候就出现页面错误,原因是 plugin-content-blog 在传递给组件的数据发生了变动,导致数据无法解析,自然而然页面就渲染失败。

信息

当然,如果不升级依赖也确实不会有问题,但谁能保证新版本的一些特性不吸引使用者去升级呢?

所以在自定义组件的时候,升级依赖后就可能需要维护一定的代码。要做的是重新 swizzle 一份最新的文件,然后去比对变化,最终排查问题。

自定义 404 界面

举个简单的例子,如果你嫌弃主题自带的 404 NotFound 界面太单调,那么可以通过 swizzle 来自定义组件

yarn swizzle @docusaurus/theme-classic NotFound

然后他会在 src/theme/ 下生成一下 NotFound.js 文件,对其进行修改就可以自定义 404 界面了