跳到主要内容

Blog base

docusaurus 博客基础

1.md 文件文字换行

markdown 文件文字换行

双空格+换行打字

2.代码块

代码块

点点点后加要 highlight 的语言类型,换行 copy 你的代码,再换行用点点点收尾【相当于 pre 标签】

```js
var handsome;
```;

3.发布多个 blog

发布多个 blog

在 config.js 中声明,如下所示:

/static/docusaurus.config.js
plugins: [
[
'@docusaurus/plugin-content-blog',
{
/**
* 多实例插件必填。
*/
id: 'second-blog',
/**
* 你的网站上博客的 URL 路由。
* *请务必不要*添加末尾斜杠。
*/
routeBasePath: 'my-second-blog',
/**
* 相对于站点目录的文件系统路径。
*/
path: './my-second-blog',
},
],
],

4.告示类

p.s. 避免 prettier 将代码格式化成错误语法的影响,还是多空两行比较保险

:::note

一些包含 _Markdown_ `语法`**内容**。 看看[这个 `api`](#4告示类)

:::

:::tip

一些包含 _Markdown_ `语法`**内容**。 看看[这个 `api`](#4告示类)

:::

:::info

一些包含 _Markdown_ `语法`**内容**。 看看[这个 `api`](#4告示类)

:::

:::caution

一些包含 _Markdown_ `语法`**内容**。 看看[这个 `api`](#4告示类)

:::

:::danger

一些包含 _Markdown_ `语法`**内容**。 看看[这个 `api`](#4告示类)

:::
备注

一些包含 Markdown 语法内容。 看看这个 api

提示

一些包含 Markdown 语法内容。 看看这个 api

信息

一些包含 Markdown 语法内容。 看看这个 api

警告

一些包含 Markdown 语法内容。 看看这个 api

危险

一些包含 Markdown 语法内容。 看看这个 api

5.颜色生成器

是个人都不会喜欢最初始给你的颜色主题吧【🐶.jpg】
于是乎,你可以在下面选择你喜欢的颜色,微调,就可以得到一个颜色主题(一系列颜色);你甚至可以直接在该页面预览,你会发现这个博客已经被替换成你的目标颜色主题了。
它会自动生成代码,你可以将其复制到你的 src\css\custom.css 文件,覆盖掉原有的样式。

提示

主色调最好至少有 WCAG-AA contrast ratio 对比度,以保证可读性。你可以用 Docusaurus 自己的网站来预览你的配色的效果。深色模式下,你可以换一套配色,因为同一种颜色一般不能在浅色和深色模式下都保持足够的可读性。

CSS Variable NameHexAdjustmentContrast Rating
--ifm-color-primary-lightest#ffffffAAA 🏅
--ifm-color-primary-lighter#d4fcf4AAA 🏅
--ifm-color-primary-light#c1fbf0AAA 🏅
--ifm-color-primary#9bf9e60AAA 🏅
--ifm-color-primary-dark#75f7dcAAA 🏅
--ifm-color-primary-darker#62f6d8AAA 🏅
--ifm-color-primary-darkest#29f2c9AAA 🏅

src/css/custom.css 中的变量替换成这些新变量。

自动生成代码:覆盖并替换 /src/css/custom.css
[data-theme='dark'] {
--ifm-color-primary: #9bf9e6;
--ifm-color-primary-dark: #75f7dc;
--ifm-color-primary-darker: #62f6d8;
--ifm-color-primary-darkest: #29f2c9;
--ifm-color-primary-light: #c1fbf0;
--ifm-color-primary-lighter: #d4fcf4;
--ifm-color-primary-lightest: #ffffff;
}