Docusaurus 2 是否支持单文档页面单独配置自定义主题？

首先明确：Docusaurus官方确实没有提供直接在文档前置元数据里指定主题的原生功能，但咱们可以基于你已经掌握的「包装主题组件」能力，自己实现这个需求。下面是具体的落地步骤：

1. 先做好自定义布局组件 #

先创建你需要的双栏布局组件，比如在src/components/TwoColumnLayout.js里写好结构：

import React from 'react';
import clsx from 'clsx';

export default function TwoColumnLayout({ children, className }) {
  return (
    <div className={clsx('container two-column-layout', className)}>
      <div className="left-column">{children}</div>
      <div className="right-column">
        {/* 这里可以放固定辅助内容，后续也可以改成从文档元数据读取自定义内容 */}
      </div>
    </div>
  );
}

接着在src/css/custom.css里补全双栏的样式：

.two-column-layout {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 2rem;
  margin-top: 1.5rem;
}

2. 改造DocItem包装组件，判断元数据切换布局 #

你之前已经在包装DocItem组件，现在只需要给它加个判断逻辑，读取文档前置元数据里的theme字段：

假设你的包装组件在src/theme/DocItem/index.js，修改成这样：

import React from 'react';
import DocItem from '@theme-original/DocItem';
import TwoColumnLayout from '../../components/TwoColumnLayout';

export default function DocItemWrapper(props) {
  // 从文档数据里拿到前置元数据
  const { frontMatter } = props.content;
  
  // 如果指定了twocol主题，就用双栏布局包裹原组件
  if (frontMatter.theme === 'twocol') {
    return <TwoColumnLayout><DocItem {...props} /></TwoColumnLayout>;
  }
  
  // 其他情况用默认布局
  return <DocItem {...props} />;
}

3. 在文档里配置生效 #

现在就可以像你设想的那样，在需要双栏布局的文档头部加配置了：

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

这里是你的双栏布局文档内容...

额外扩展：支持更多布局 #

如果以后需要其他布局，只需要：

• 新增对应的布局组件（比如三栏、侧边栏在左的布局）
• 在DocItemWrapper里加更多判断分支，比如frontMatter.theme === 'threecol'就渲染三栏组件

注意点 #

如果你的需求不只是内容区域，而是要修改整个页面的框架（比如导航、页脚），那可以换成包装Layout组件，同样通过读取当前页面的前置元数据来切换整体布局。另外要注意自定义样式和Docusaurus默认样式的兼容性，避免出现布局错乱。

内容的提问来源于stack exchange，提问作者Shawn Tabrizi