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-hant

執行後會出現 /i18n/zh-hant 的目錄，再來修改設定成中文就可以

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

移除網址最後的斜線

預設的 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/blog/docusaurus-common-setting

這是 google 廣告

這是 google 廣告