每个文档页面都带有Docusaurus 2自定义主题

问题描述

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

我在想像文档中的某些东西，例如：

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

在Docusaurus文档中运行时，我还没有发现任何东西，因此希望在此处获得快速解答。

解决方法

从Docusaurus不和谐频道获得了很好的提示后，我想出了方法。我创建了以下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} />
    }
}

这只是根据文档文件的开头选择合适的布局。

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>
        </>
    );
}