Skip to main content

使用文档

文档头部元数据示意​

---
sidebar_position: 1
tags: [标签]
title: 文章标题
description: 描述信息
sidebar_label: 文档左侧导航栏文件名称
slug: 文档 URL 路径
---
扩展 Head metadata
hide_table_of_contents: true : 隐藏文档的目录

TOC 目录扩展​

默认情况下 Docusaurus 显示的 TOC 的显示层级为三层, 这种情况不符合我们的与其所以需要进行扩展

---
# 显示 h2 到 h5 标题
toc_min_heading_level: 2
toc_max_heading_level: 5
---

如果需要对全局进行修改, 可以尝试修改 docusaurus.config.ts 文件

docusaurus.config.js
export default {
  themeConfig: {
    tableOfContents: {
      minHeadingLevel: 2,
      maxHeadingLevel: 5,
    },
  },
};

图标​

如果你按照我的教程安装了对应的 Iconify 图标, 使用的格式为

20240528110431

对于图标可以前往 Open Source Icon Sets - Iconify 搜索

折叠块​

折叠块

折叠内容

选项卡​

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\css\custom.css 添加下面代码就可以实现全局居中显示

src\css\custom.css
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}