深度订制属于自己的docusaurus网站

本站在原始的docusaurus基础上主要定制了两部分：

• 主题配色系统
• 右上角的Social图标

已经有前人给出了许多更详细的定制化方法，但是我没有时间过多参考。最近比较忙，今天就简单写写吧。

主题配色系统

修改/src/css/custom.css即可。建议用VS Code的各种插件去改颜色（因为我装了一堆，所以其实也不知道最后用的是哪个了）。

/src/css/custom.css

:root {
  --ifm-color-primary: #f7931e;
  --ifm-color-primary-dark: #bf7017;
  --ifm-color-primary-darker: #794305;
  --ifm-color-primary-darkest: #4f2b02;
  --ifm-color-primary-light: #f8a94e;
  --ifm-color-primary-lighter: #f9c07e;
  --ifm-color-primary-lightest: #f9c991;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */

[data-theme='dark'] {
  --ifm-color-primary: #ff7bac;
  --ifm-color-primary-dark:  #da5888;
  --ifm-color-primary-darker:  #b02e5d;
  --ifm-color-primary-darkest:  #8c123f;
  --ifm-color-primary-light:  #fa8fb6;
  --ifm-color-primary-lighter:  #f49cbc;
  --ifm-color-primary-lightest:  rgb(245, 194, 227);
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

右上角的Social图标

本站其实集成了Fontawesome，但是默认在docusaurus.config.js里应该是用不了的。总之折腾了半天都不好用，最后干脆参考官方网站的代码和大佬的代码，自己改css了。 相关的Issue可以参考这里。

准备SVG

先把打算用作图标的svg准备好。不要设置填充颜色。放在/static/img下或者你喜欢的位置就好。

准备CSS

还是老文件。

/src/css/custom.css

...
/* 所有图标都需要加 */
.navbar__icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  margin-right: 4px;
  transition: background var(--ifm-transition-fast);
}
/* 圆的图标最好额外加这个，好看 */
.navbar__icon__round {
  border-radius: 50%;
}
/* 控制图标颜色的 */
.navbar__icon:before {
  content: '';
  height: 100%;
  display: block;
  background-color: var(--ifm-navbar-link-color);
}
/* 图标动态效果 */
.navbar__icon:hover {
  background: var(--ifm-color-emphasis-200);
}
/* 嵌入svg，如果你要用别的图标，记得换成别的SVG */
.navbar__github:before {
  mask: url(/img/logo.github.svg) no-repeat 100% 100%;
  mask-size: cover;
}
/* 同上 */
.navbar__research_gate:before {
  mask: url(/img/logo.researchgate.svg) no-repeat 100% 100%;
  mask-size: cover;
}

修改配置文件

/docusaurus.config.js

...
const config = {
  ...
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      ...
      navbar: {
		...
        items: [
	      ...
          {
            'aria-label': 'Research Gate',
            href: "https://www.researchgate.net/profile/Zihang-Su-3",
            position: 'right',
            className: 'navbar__icon navbar__research_gate', // 方图标，不加navbar__icon__round
          },
          {
            'aria-label': 'GitHub repo',
            href: "https://github.com/FerdinandSu",
            position: 'right',
            className: 'navbar__icon navbar__icon__round navbar__github', // 圆图标，加navbar__icon__round
          },
... 
...