修改 Docusaurus 主题样式

src -> css 下有个 custom.css ，在这个文件里编写的所有 CSS 都会全局可用，类名可以直接以字符串形式引用。

用 Infima 给站点添加样式

@docusaurus/preset-classic 用 Infima 作为底层样式框架。 Infima 提供了灵活的布局，以及常见的 UI 组件样式，适用于以内容为中心的网站（博客、文档、首页）。想要了解更多详情，请查看 Infima 网站。

修改上/下一篇文档按钮样式

改为中文

在 src 下新建一个名为 theme 的文件夹，然后在 node_modules/@docusaurus/theme-classic/src/theme/ 下找到 DocPaginator 文件夹，将它复制到自己建的 theme 里。
打开 DocPaginator 里的 index.tsx ，将里面的 previews 、next 改为 “上一篇文档”、“下一篇文档”

/DocPaginator/index.tsx
    {previous && (
        <PaginatorNavLink
          {...previous}
          subLabel={
            <Translate
              id="theme.docs.paginator.previous"
              description="The label used to navigate to the previous doc">
              Previous
            </Translate>
          }
        />
      )}
      {next && (
        <PaginatorNavLink
          {...next}
          subLabel={
            <Translate
              id="theme.docs.paginator.next"
              description="The label used to navigate to the next doc">
              Next
            </Translate>
          }
          isNext
        />
      )}

备注

本地开发时，需要重新启动服务器 ( npm start ) 才能看到修改后的效果。

更改样式

打开 src -> css 下的 custom.css ，可以通过 .paginator-nav_Link 类来修改上/下一篇文档按钮样式。
以下是我的样式，诸位可以根据自己的喜好进行修改：

/src/css/custom.css
.pagination-nav__link:hover {
  background-color: #cde4fa94; /* 鼠标悬停时背景颜色 */
}
.pagination-nav__link {
  border-color: #b6daf8; /* 边框颜色 */
  border-width: 3px; /* 边框厚度 */ 
}

[data-theme='dark'] .pagination-nav__link {
  border-color: #1c5e4f; /* 暗黑模式下，边框颜色 */
  border-width: 3px; /* 暗黑模式下，边框厚度 */  
}

[data-theme='dark'] .pagination-nav__link:hover {
  background-color: #1dffc733; /* 暗黑模式下，悬停时背景颜色 */
  border-color: #2ed3af; /* 暗黑模式下，悬停时边框颜色 */
}

遇到的错误

我看 custom.css 里的那么多主题配色类名写在了一个 [data-theme='dark']{} 里，所以我把暗黑模式下的 .paginator-nav_Link 也写在了一个里面，就像下面这样：

/src/css/custom.css
[data-theme='dark'] { 
  
  .pagination-nav__link:hover {
    background-color: #1dffc733; /* 暗黑模式下，悬停时背景颜色 */
    border-color: #2ed3af; /* 暗黑模式下，悬停时边框颜色 */
  }

  .pagination-nav__link {
    border-color: #1c5e4f; /* 边框颜色 */
    border-width: 3px; /* 边框厚度 */    
  }

}

在本地开发服务器上 (npm start 后打开的网站）也显示的很好，结果我部署到 vercel 上后，样式却变得乱七八糟。
我排查了很久，才发现不能这么写，只能像最上面那样给每个类名前面加上 [data-theme='dark'] 才行。
此外，有时候明明修改了样式，但网站还是显示之前的样式。我中间就修改成正确的写法来着，但因为这个原因，我以为这样写也不对，导致我又浪费了很多时间。
- 解决办法：按 shift+f5 或 ctrl+f5 强制刷新一下浏览器，就可以看到修改后的样式了。
最后，在部署到 vercel 或 github pages 等托管平台之前，可以先进行本地测试，看看实际效果。
- 1、在项目根目录下运行 npm run build ，构建网站的静态文件
```
npm run build
```
- 2、接着运行 npm run serve ，浏览器会自动打开 localhost:3000 ，可以看到网站实际部署后的效果。如果没错，就可以部署到托管平台了，要是不对，还可以再改，总比上传到 github 了才发现有问题的好。
```
npm run serve
```

修改告示样式

步骤

打开 src -> css 下的 custom.css ，可以通过 .alert 类来修改告示样式。
以下是我的样式，诸位可以根据自己的喜好进行修改：

CSS代码
效果

/src/css/custom.css
.alert {
  border: 2px solid var(--ifm-alert-border-color);
}

提示

Docusaurus 官网 上的 “警告” 语法标签，说是 “warning” ，但用起来却和 “danger” 一样，实际上应该是 “caution”

其他

我是看了愧怍这位老哥的网站样式，觉得很好看，于是也对自己的网站进行了魔改。
一开始我在 custom.css 里一个一个给这些告示设置样式，但后来看了 他的 github 中的代码，才想起可以统一设置。
我之后又试了试，把统一设置放在下面，会覆盖掉上面单独设置的样式，所以如果想单独给某个告示设置样式的话，就需要把它放在统一设置的下面。
单独设置告示的类名为：
- tip : .alert--success
- note : .alert--secondary
- info : .alert--info
- warning : .alert--warning
- danger : .alert--danger
docusaurus/preset-classic 用 Infima 作为底层样式框架，这些类名是我在 Infima 官网 上找到的。

修改 Docusaurus 主题样式

用 Infima 给站点添加样式​

修改 上/下 一篇文档 按钮样式​

改为中文​

更改样式​

遇到的错误​

修改 告示 样式​

步骤​

其他​