跳到主要内容

配置

搜索​

Docusaurus 的文档中列举了多个搜索插件以供选择，使用 docusaurus-lunr-search 插件实现离线搜索。

search-offline

具体流程参见插件文档。

备注

可能会报 @node-rs/jieba 模块未找到的错误，安装即可。

Medium 风格的图片缩放​

docusaurus-plugin-image-zoom 插件使用 medium-zoom 库来实现文档中图片的缩放功能。

medium-zoom

具体流程参见插件文档。

浏览器窗口样式容器​

Docusaurus 内置支持 MDX，允许在 Markdown 文件中编写 JSX 并将其渲染为 React 组件。

BrowserWindow​

BrowserWindow 是 Docusaurus 官方文档中使用的一种样式，可以在文档的 GitHub 仓库中获取源码，将源码保存至 src/components 文件夹，在 mdx 文件中导入使用。

import BrowserWindow from "@site/src/components/BrowserWindow";

<BrowserWindow>Hello, world</BrowserWindow>;
https://hcynus.eu.org
Hello, world

IframeWindow​

浏览器窗口样式的 Iframe

import IframeWindow from "@site/src/components/BrowserWindow/IframeWindow";

<IframeWindow url="https://docusaurus.io/" />;
https://docusaurus.io/?docusaurus-theme=dark

粗略样式的页面标注​

Rough Notation React 是 RoughNotation 的 React 封装，它是一个用于在网页上创建动画注释的小型 JavaScript 库。

通过 npm 安装，在 mdx 文件中导入使用。

import { RoughNotation, RoughNotationGroup } from "react-rough-notation";

<h2>
  <RoughNotation type="highlight" show={true} color={"#FFD550"}> Rough Notation </RoughNotation>
</h2>

A small JavaScript library to create and animate <RoughNotation show={true} type="box" color="#f00">annotations</RoughNotation> on a web page

<RoughNotation show={true} type="bracket" color="#f00" brackets="left">
Rough Notation uses <RoughNotation show={true} type="underline" color="#00f">RoughJS</RoughNotation> to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
</RoughNotation>

Rough Notation is <RoughNotation show={true} type="circle" color="#f00">3.8kb</RoughNotation> in size when gzipped, and the code is <RoughNotation show={true} type="strike-through" color="#1C5D20">available on GitHub</RoughNotation>.

To symbolize rejection, use a <RoughNotation show={true} type="crossed-off" color="#F57F18">crossed-off</RoughNotation> effect on an element.
https://hcynus.eu.org

Rough Notation

A small JavaScript library to create and animate annotations on a web page

Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

Rough Notation is 3.8kb in size when gzipped, and the code is available on GitHub.

To symbolize rejection, use a crossed-off effect on an element.

集成 Tailwind CSS​

  1. 安装 Tailwind CSS:
npm i -D tailwindcss postcss autoprefixer
  1. 创建 tailwind.config.js 文件:
npx tailwindcss init
  1. 修改 tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./content/**/*.{jsx,mdx,tsx,html}"],
  darkMode: ["class", '[data-theme="dark"]'],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. 配置插件

创建 plugins 文件夹，在其中创建 tailwind-config.cjs:

function tailwindPlugin(context, options) {
  return {
    name: 'tailwind-plugin',
    configurePostCss(postcssOptions) {
      postcssOptions.plugins = [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
      ];
      return postcssOptions;
    },
  };
}

module.exports = tailwindPlugin;

在 docusaurus.config.js 中添加插件:

import tailwindPlugin from "./plugins/tailwind-config.cjs";

const config = {
  ...
  plugins: [ tailwindPlugin ]
  ...
}
  1. 加载 Tailwind CSS

在 custom.css 文件顶部添加:

src/css/custom.css
@tailwind base;
@tailwind components;
@tailwind utilities;

npm2yarn​

@docusaurus/remark-plugin-npm2yarn 插件能够自动生成对应的 yarn 和 pnpm 命令，无须每次都使用 Tabs 组件。

npm install @docusaurus/remark-plugin-npm2yarn
docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [
            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
          ],
        },
        pages: {
          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
        },
        blog: {
          remarkPlugins: [
            [
              require('@docusaurus/remark-plugin-npm2yarn'),
              {converters: ['pnpm']},
            ],
          ],
          // ...
        },
      },
    ],
  ],
};

然后通过将 npm2yarn 关键词添加到代码块来使用它：

```bash npm2yarn
npm install @docusaurus/remark-plugin-npm2yarn
```

Mermaid​

npm install --save @docusaurus/theme-mermaid
docusaurus.config.js
export default {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};
Example Mermaid diagram
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
https://hcynus.eu.org