Docusaurus 常用设定笔记

不知不觉用 docusaurus 建了好几个网站，整理一下一些常用的设定

GA 设定

请先申请好GA 的评估ID，可参考GA 申请流程

然后只需要在 docusaurus.config.js 增加 gtag 的 trackingID，将刚才 GA 产生的 评估ID 填入就可以 (或者填 GTM 的 容器ID 也有一样效果)

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        gtag: {
          trackingID: [
            'G-<YOUR-NEW-GA4-ID>'
          ],
        },
      },
    ],
  ],
};

主色系调整

预设的主色系为绿色 #25c2a0 ，设定在/src/css/custom.css 这一个档案中

要置换的话，可以先去挑选一个自己喜欢的颜色，可参考 色码转换器

然后到 docusaurus 的工具：Styling your site with Infima

贴上你挑的颜色后，会产生像以下的 code

:root {
  --ifm-color-primary: #6c7a69;
  --ifm-color-primary-dark: #616e5e;
  --ifm-color-primary-darker: #5c6859;
  --ifm-color-primary-darkest: #4c554a;
  --ifm-color-primary-light: #778673;
  --ifm-color-primary-lighter: #7c8c79;
  --ifm-color-primary-lightest: #8e9c8c;
}

复制后置换掉原来 /src/css/custom.css 档案内容即可

修改 i18n 预设语系为中文

预设的语系是英文，docusaurus.config.js 的设定是

i18n: {
  defaultLocale: 'en',
  locales: ['en'],
},

如果没有网站没有多国语系的话，其实可以不用修改，但缺点是很多讯息就会是英文，

如果希望讯息也是中文的话，先执行

npm run write-translations -- --locale zh-hans

执行后会出现 /i18n/zh-hans 的目录，再来修改设定成中文就可以

i18n: {
  defaultLocale: 'zh-hans',
  locales: ['zh-hans'],
},

移除网址最后的斜线

预设的 sitemap 产生出来的网址预设会有个斜线，个人习惯会在 docusaurus.config.js

增加一行

trailingSlash: false

可参考文件 trailingSlash

部落格侧边栏显示数目

预设只有 5 笔，个人觉得有点少，习惯改成 10 笔，在 docusaurus.config.js 增加 blogSidebarCount 属性

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogSidebarCount: 10,
        },
      },
    ],
  ],
};

可参考文件 Blog sidebar

数学公式

docusaurus 支援 KaTeX，如果希望在页面上呈现像以下的效果

CAGR $= \large\left(\frac{FV}{PV}\right)^{\frac{1}{n}} \normalsize- 1$

就会需要先安装 remark-math、remark-math，注意一下版本，

docusaurus 3 安装

npm install --save remark-math@6 rehype-katex@7

在 docusaurus.config.js 增加以下设定，这个范例是在 /docs 下可以使用 KaTex，如果在 /blog 或 /pages 要使用也要有同样的设定

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
};

然后还要增加一段 CSS

stylesheets: [
  {
    href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
    type: 'text/css',
    integrity:
      'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
    crossorigin: 'anonymous',
  },
],

可参考文件 数学公式

docusaurus 2 则要安装旧版

npm install --save remark-math@3 rehype-katex@5

印象中 docusaurus.config.js 设定语法和新版有点不一样，还在使用 docusaurus 2 就麻烦自己找一下

大概就这样吧，有想到再补充

版权声明

，转载请注明出处
本文键接: https://tech.havocfuture.tw/zh-hans/blog/docusaurus-common-setting

這是 google 廣告

這是 google 廣告