feat(theme): ability to use <DocCardList> without items prop, on any doc page (#8008)

This commit is contained in:
Sébastien Lorber 2022-08-26 17:42:59 +02:00 committed by GitHub
parent ff8ef774d6
commit c811d6249e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 191 additions and 67 deletions

View file

@ -35,9 +35,8 @@ This section serves as an overview of miscellaneous features of the doc sidebar.
```mdx-code-block
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
<DocCardList items={useCurrentSidebarCategory().items}/>
<DocCardList />
```
## Default sidebar {#default-sidebar}

View file

@ -8,6 +8,7 @@ slug: /sidebar/items
```mdx-code-block
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import BrowserWindow from '@site/src/components/BrowserWindow';
```
We have introduced three types of item types in the example in the previous section: `doc`, `category`, and `link`, whose usages are fairly intuitive. We will formally introduce their APIs. There's also a fourth type: `autogenerated`, which we will explain in detail later.
@ -291,18 +292,23 @@ See it in action on the [i18n introduction page](../../../i18n/i18n-introduction
#### Embedding generated index in doc page {#embedding-generated-index-in-doc-page}
You can embed the generated cards list in a normal doc page as well, as long as the doc is used as a category index page. To do so, you need to use the `DocCardList` component, paired with the `useCurrentSidebarCategory` hook.
You can embed the generated cards list in a normal doc page as well with the `DocCardList` component. It will display all the sidebar items of the parent category of the current document.
```jsx title="a-category-index-page.md"
```md title="docs/sidebar/index.md"
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
In this section, we will introduce the following concepts:
<DocCardList items={useCurrentSidebarCategory().items}/>
<DocCardList />
```
See this in action on the [sidebar guides page](index.md).
```mdx-code-block
<BrowserWindow>
import DocCardList from '@theme/DocCardList';
<DocCardList />
</BrowserWindow>
```
### Collapsible categories {#collapsible-categories}