如何在 Docusaurus 中自定义生成的索引页？

Question

我有一个生成的索引页面，我可以看到如何在目录的类别.json中自定义页面标题和描述，但是有没有办法自定义同一目录中的文件生成的项目？例如：

• 教程
  • _category_.json
  • 01-first-tutorial.md
  • 02-第二个教程.md

我希望能够为每个文件提供一个图标，并且与从这些文件中提取的文本不同的文本第一段似乎是默认的。我想要的也许看起来像这个页面，但图标和文本需要链接到教程页面。

我尝试过使用 DocCardList、添加描述、添加项目（失败）以及更改我的每个教程文件，但到目前为止，还没有任何进展。

Answer 1

编辑：

他们提出了一个名为DocCardList 的新组件，您可以在 2.3.0 版本中使用它。

1. index.mdx在您的类别文件夹中创建一个文件。

2. 添加以下内容：

   import DocCardList from '@theme/DocCardList';
   
   <DocCardList />
   

3. 在文件夹中混合或以其他方式覆盖此组件src/theme以添加自定义样式等。

原答案：

docCategoryGeneratedIndexComponent也许您可以尝试使用prop （参考链接）交换生成的索引组件。这将取代所有自动生成的索引页，这可能是您想要的。

在部分docusaurus.config.js中presets，添加

presets: [
    [
      "classic",
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve("./sidebars.js"),
          docCategoryGeneratedIndexComponent:
            "@site/src/components/CategoryIndexPage",
        },
        // etc.
      }),
    ],
  ],

然后尝试在下面添加以下自定义组件src/components/CategoryIndexPage.tsx：

import React from "react";

export default function CategoryIndexPage(props) {
  return (
    <pre>
      <code>{JSON.stringify(props, null, 2)}</code>
    </pre>
  );
}

这只会向您展示组件中的 prop 结构。

当我查看生成此页面的主题组件时，它使用

const category = useCurrentSidebarCategory();

但是当我尝试获取项目列表时，出现以下错误：

钩子 useDocsSidebar 在 .

也许你可以弄清楚接下来的步骤，但我却做不到。

或者，您可以index.mdx在类别文件夹中创建一个文件，并将自定义 React 组件导入其中。但这给了我同样的上下文冲突错误。

# My custom category page

Some Markdown content here.

import CategoryIndex from "@site/src/components/CategoryIndex.tsx";

<CategoryIndex />