使用小细节

使用小细节

目录下的md名称和目录名称一致

• 配置方法

目录下的md名称和目录名称如果一致的话，那么渲染后的效果就会是以下这样的（点击目录后，直接到达了这个md页面，很nice）。

• 现象

告警框

案例：使用方法

官网链接：

https://docusaurus.io/zh-CN/docs/markdown-features/admonitions

代码：

:::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`](#).

:::

:::warning

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

:::

:::danger

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.

危险

Some content with Markdown syntax. Check this api.

效果：

---

案例：这里的文字可以改变备注信息

配置方法：

效果：

折叠代码块

测试过程：

• 语法

<details>
  <summary>点击查看更多</summary>

我是隐藏内容
</details>

• 测试效果

折叠代码测试：

点击展开所有代码：

#!/bin/bash

# 由用户输入当前机器的IP地址
read -p "请输入当前机器的IP地址： " new_ip_address
echo "开始执行ruyu-blog安装脚本……："

#配置颜色
RED="\E[1;31m"
GREEN="\E[1;32m"
END="\E[0m"

pull_softwares(){
    ########################################步骤1：从oss拉取基础环境包######################################
    echo -e $RED "########################################步骤1：从oss拉取基础环境包######################################" $END
    sleep 2
    cd /root
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/ruyu-blog-install-softwares.zip
    unzip ruyu-blog-install-softwares.zip

    cd /root/
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/apache-maven-3.9.8-bin.tar.gz
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/jdk-17_linux-x64_bin.rpm
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/node-v16.20.2-linux-x64.tar.xz
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/ruyu-blog-v1.4.2.zip
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/docker-compose-linux-x86_64
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/maven-repo.tar.gz

    ##解压ruyu-blog源码及sql
    cd ~
    unzip ruyu-blog-v1.4.2.zip
    mv ruyu-blog-v1.4.2 ruyu-blog
    cd ruyu-blog/sql
    mv "blog(部署).sql" blog.sql
    cp blog.sql ~
}

其它内容。

---

• 测试

docsuarusu渲染后的效果：

• 存在的问题

typora不支持折叠代码，不然体验会更好。

高亮代码行

• 效果

• 配置方法

在代码里加入如下注释行就好：

{
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "types": ["@types/jest"]
  }
}

侧边栏索引

• 效果

• 配置方法

在2、玩转Docusaurus目录下新创建_category_.json文件就好：

{
  "link": {
    "type": "generated-index"
  }
}

案例：测试mdx代码效果（mdx组件）

2024年9月13日-测试成功。

官方js风格测试

环境：

win10 Docusaurus version: 3.5.2 Node version: v20.12.1 npm 10.8.2 基于官网默认仓库

本次测试：

• 创建如下2个文件

src\components\Highlight.js

import React from 'react';

export default function Highlight({children, color}) {
  return (
    <span
      style={{
        backgroundColor: color,
        borderRadius: '2px',
        color: '#fff',
        padding: '0.2rem',
      }}>
      {children}
    </span>
  );
}

src\theme\MDXComponents.js

import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Highlight from '@site/src/components/Highlight';

export default {
  // Re-use the default mapping
  ...MDXComponents,
  // Map the "<Highlight>" tag to our Highlight component
  // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
  Highlight,
};

• docs创建md文件

docs\tutorial-basics\test.md

typora里效果：

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!



---



I can conveniently use <Highlight color="#25c2a0">Docusaurus green</Highlight> everywhere!

• 验证