跳到主要内容

Swizzle

怎么Swizzle

Swizzle Docs

Swizzle可谓是docusaurus的精髓,有了Swizzle的允许我们可以很方便的自定义docusaurus的样式。

如果你对目录的位置感到不满意或者是导航栏的样式不合你心意,你可以选择把他们“拉出来”自己改。这跟你在其他框架上的做法内核一样,Docusaurus的Swizzle可以更方便更独立地修改。

首先你应该通过列出所有可以Swizzle的组件来查看哪些组件可以swizzle。(一般是用theme-classic,如果不符合的话你可以自己改)

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

那么我一般是用以下命令去做Swizzle的修改:

npm run swizzle -- @docusaurus/theme-classic Navbar

命令执行后会询问你使用的是JS还是TS,然后问你是否确定。然后你可以在/src/theme底下找到你需要修改的文件。

目前,我改了导航栏和TOC侧边栏;TOC侧边栏的样式主要加了字数统计和改了位置。

需要注意的是升级版本之后Swizzle的修改可能不再支持,我曾经遇到过这个问题。出现这个问题,一是在升级版本上改,二是退回版本。退回版本的话你需要在package.json(或者yarn.lock等)里把有关Docusaurus的版本改回稳定的版本,然后重新执行npm install。需要注意最好theme-common、theme-classic等的版本最好都是一致的。

本文字数:0

预计阅读时间:0 分钟

有问题?请向我提出issue