不知不觉用 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
就会需要先安装 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 就麻烦自己找一下
大概就这样吧,有想到再补充