docusaurus - details 简单使用及问题

本篇简单说一下 docusaurus 中 details 的使用, 以及遇到的一点问题，本篇可能在后续继续补充， 谁叫人不可能一下遇到所有问题呢 :)

使用

<details> 标签可以实现一个可展开/收起的区域, 例如下面这样:

<details>
  <summary>这是一个 `details` 的标题</summary>

    这是 `details` 的内容, 可以放任何东西, 包括代码块, 图片等.

    ```js title="这是一个代码块"

    console.log("hello details");
    
    ```
    <details>
    <summary>这是嵌套的标题</summary>

    😲😲😲😲😲
    </details>
</details>

效果如下:

这是一个 details

这是 details 的内容, 可以放任何东西, 包括代码块, 图片等.

这是一个代码块

console.log("hello details");

这是嵌套的标题

😲😲😲😲😲

提示

当你需要在代码块中使用代码块标记时，你需要在外部多加一个反引号，这样内部的反引号才不会被解析。

提示

更多用法可以在 details: 细节披露元素 中找到。

问题

问题1: 标题显示错误

有些时候，你会发现没有显示 summary 内的标题，而是将里面的当做普通问题，其实这是他解析失败了。 我想你写的可能是这样的：

前面的内容

<details>
  <summary>这是一个 `details`</summary>
  这是 `details` 的内容, 可以放任何东西, 包括代码块, 图片等.
</details>

后面的内容

效果如下：

你会发现标题只显示了 Details, 原因也很简单, 就是你需要在 summary 和你接下来写的正文直接需要空一行， 就是这么简单 :)
修改如下：

前面的内容

<details>
  <summary>这是一个 `details`</summary>

  这是 `details` 的内容, 可以放任何东西, 包括代码块, 图片等.(你需要在summary后加一个空行)
</details>

后面的内容