使用 Docusaurus 2 为每个文档页面自定义主题

Question

我一直在玩弄 Docusaurus 2 上的自定义主题，并且我已经成功扩展了组件，例如 "wrapping theme components" 的 DocItem。我想知道 Docusaurus 2 是否支持每页不同的文档主题。例如，我想创建一个 2 列布局主题，select 一些我将使用该主题的文档页面，而其他页面将继续使用默认的 Docusaurus 主题。

我在想象文档前面的内容，例如：

---
id: doc1
theme: twocol
title: Style Guide
sidebar_label: Style Guide
slug: /
---

当运行围绕 Docusaurus 文档时，我还没有找到任何东西，所以希望能在这里得到一个快速的答案。

Answer 1

从 Docusaurus discord 频道得到很好的提示后，我想出了如何做到这一点。我创建了以下 ThemeSelector 组件：

// Select a theme using the `theme` front matter

import React from 'react';
import OriginalDocItem from "@theme-original/DocItem";
import TwoColDocItem from "../TwoColDocItem"

export default function ThemeSelector(props) {
    const { content: DocContent } = props;
    const { frontMatter: { theme } } = DocContent;

    switch (theme) {
        case "twocol":
            return <TwoColDocItem {...props} />
        default:
            return <OriginalDocItem {...props} />
    }
}

这只是根据doc文件的前面内容选择合适的布局。

TwoColDocItem 布局如下所示：

// Two column layout for react

import React from 'react';
import OriginalDocItem from "@theme-original/DocItem";
import styles from "./style.module.css"

export default function TwoColDocItem(props) {
    return (
        <>
            <div className={styles.row}>
                <div className={styles.col}>
                    <OriginalDocItem {...props} />
                </div>
                <div className={styles.col}>
                    <div>Second Col</div>
                </div>
            </div>
        </>
    );
}

使用 Docusaurus 2 为每个文档页面自定义主题

Custom Theme Per Doc Page with Docusaurus 2

docusaurus