模版

2023年02月20日

柏拉文

越努力，越幸运

一、标签组

---

效果预览:

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

使用语法:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

二、代码块

---

• 基础代码块

  • 效果预览:

    /src/components/HelloCodeTitle.js

    function HelloCodeTitle(props) {
      return <h1>Hello, {props.name}</h1>;
    }

  • 使用语法:

    /src/components/HelloCodeTitle.js

    function HelloCodeTitle(props) {
      return <h1>Hello, {props.name}</h1>;
    }

• 通过 指定高亮代码块

  • 效果预览:

  import React from 'react';
  
  function MyComponent(props) {
    if (props.isBar) {
      return <div>Bar</div>;
    }
  
    return <div>Foo</div>;
  }
  
  export default MyComponent;

  • 使用语法:

    import React from 'react';
    
    function MyComponent(props) {
      if (props.isBar) {
        return <div>Bar</div>;
      }
    
      return <div>Foo</div>;
    }
    
    export default MyComponent;

• 通过 注释 指定高亮代码块

  • 效果预览:

  function HighlightSomeText(highlight) {
    if (highlight) {
      return 'This text is highlighted!';
    }
  
    return 'Nothing highlighted';
  }
  
  function HighlightMoreText(highlight) {
    if (highlight) {
      return 'This range is highlighted!';
    }
  
    return 'Nothing highlighted';
  }

  • 使用语法:

    function HighlightSomeText(highlight) {
      if (highlight) {
        return 'This text is highlighted!';
      }
    
      return 'Nothing highlighted';
    }
    
    function HighlightMoreText(highlight) {
      if (highlight) {
        return 'This range is highlighted!';
      }
    
      return 'Nothing highlighted';
    }

  • 支持的注释语法为：

    Language	Syntax
    JavaScript	/* ... */ and // ...
    JSX	{/* ... */}
    Python	# ...
    HTML	<!-- ... -->

三、告示框

---

预览效果:

备注

Some content with markdown syntax. Check this api.

提示

Some content with markdown syntax. Check this api.

信息

Some content with markdown syntax. Check this api.

警告

Some content with markdown syntax. Check this api.

危险

Some content with markdown syntax. Check this api.

使用语法:

:::note

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::tip

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::info

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::caution

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::danger

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

四、静态资源

---

引用图片:

• Markdown 语法

  ![Example banner](./assets/docusaurus-asset-example-banner.png)

• JSX 的 require

  <img
    src={require('./assets/docusaurus-asset-example-banner.png').default}
    alt="Example banner"
  />

• ES 的 import

import myImageUrl from './assets/docusaurus-asset-example-banner.png';

<img src={myImageUrl} alt="Example banner" />;

五、React 组件

详情展开组件:

• 效果预览

  Details

  详情代码块标题

  详情代码块内容

• 使用语法

  <details>
    <summary>详情代码块标题</summary>
    详情代码块内容
  </details>

苹果窗口容器组件:

• 效果预览

  http://localhost:3000

  苹果窗口组件内容

• 使用语法

  import BrowserWindow from '@site/src/components/BrowserWindow'; // 置顶
  
  <BrowserWindow>
  苹果窗口组件内容
  </BrowserWindow>

六、Docusaurus 使用 Ant-Design-UI 组件

---

Docusaurus 可以直接使用Ant-Design-UI组件的，但是如果全局引入组件和样式的话，会大大增加打包文件体积的。所以如果需要使用Ant-Design-UI组件，应该按需引入组件和样式。

• 安装Ant-Design-UI

  yarn add antd -S

• 安装babel-plugin-import 、less 和 less-loader

  yarn add babel-plugin-import less less-loader -D

• 配置babel-plugin-import用于支持antd样式按需引入,通过docusaurus-plugin-less配置less-loader用于定制Antd主题

  babel.config.js

  module.exports = {
    presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
    plugins: [
      [
        "import",
        {
          libraryName: "antd",
          libraryDirectory: "es",
          style: true, 
        },
      ],
    ],
  };
  plugins/index.js

  // docusaurus-plugin-less 为上述自己编写的插件
  const DocusaurusPluginLess = require("./docusaurus-plugin-less");
  module.exports = [
    [DocusaurusPluginLess, {
      modifyVars: {
        'primary-color': '#25C2A0',
        'link-color': '#25C2A0',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true,
    }]
  ];
  reademe.md

  import Image from '@site/src/components/Image'
  
  <Image width={200} src="" />