不知不覺用 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
就會需要先安裝 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 就麻煩自己找一下
大概就這樣吧,有想到再補充