如何在Docusaurus中实现可变文本？求更优方案及现有方案局限

原方案的局限 #

• 冗余臃肿：每个可变文本都要单独写一个React组件，变量数量一多，就会出现大量重复的小组件，维护起来非常麻烦。
• 扩展性差：如果要给某个变量加样式、或者根据场景做条件渲染，得逐个修改对应的组件，没法统一调整。
• 引用繁琐：每篇MDX文档都得单独导入这些组件，变量多了会有一堆重复的import语句，增加不必要的工作量。
• 动态性不足：组件返回固定文本，无法根据环境、路由（比如多版本文档切换）动态变更值。

更优实现方案 #

方案1：集中式常量配置（推荐，适合静态变量） #

把所有可变文本集中放在一个配置文件里，避免零散的组件：

1. 创建常量文件 src/data/constants.js：

export const DOC_CONSTANTS = {
  version: '4.0',
  ourCompany: 'Spacely Sprockets',
  ourCompetitor: 'Cogswell Cogs'
};

2. 在MDX中直接导入使用：

import {DOC_CONSTANTS} from '../data/constants';

## 公告

我们{DOC_CONSTANTS.ourCompany}很高兴宣布，对标{DOC_CONSTANTS.ourCompetitor}的产品已更新至{DOC_CONSTANTS.version}版本。

如果觉得每次导入麻烦，可以通过Docusaurus的全局注入把常量挂到window对象，或者用remark宏简化引用，不用每次写import。

方案2：React Context全局注入（适合动态变量） #

如果需要根据环境、路由动态切换可变文本（比如多版本文档），用Context实现全局共享：

1. 创建Context文件 src/contexts/DocConstantsContext.js：

import {createContext, useContext} from 'react';

// 默认常量
const defaultConstants = {
  version: '4.0',
  ourCompany: 'Spacely Sprockets',
  ourCompetitor: 'Cogswell Cogs'
};

const DocConstantsContext = createContext(defaultConstants);

export const DocConstantsProvider = DocConstantsContext.Provider;
export const useDocConstants = () => useContext(DocConstantsContext);

2. 全局包裹Provider（比如在自定义布局组件中）：

// src/components/CustomLayout.js
import {DocConstantsProvider} from '../contexts/DocConstantsContext';
import Layout from '@theme/Layout';

export default function CustomLayout(props) {
  // 可根据路由、环境变量动态修改常量
  const currentConstants = {
    ...defaultConstants,
    version: props.route.path.includes('v5') ? '5.0' : '4.0'
  };

  return (
    <DocConstantsProvider value={currentConstants}>
      <Layout {...props} />
    </DocConstantsProvider>
  );
}

3. 在MDX中使用：

import {useDocConstants} from '../contexts/DocConstantsContext';

const Constant = ({key}) => {
  const constants = useDocConstants();
  return constants[key];
};

## 公告

我们<Constant key="ourCompany" />很高兴宣布，对标<Constant key="ourCompetitor" />的产品已更新至<Constant key="version" />版本。

方案3：环境变量注入（适合构建时固定的变量） #

如果可变文本是构建时确定的（比如版本号），直接用环境变量：

1. 在项目根目录创建 .env 文件：

REACT_APP_PRODUCT_VERSION=4.0
REACT_APP_OUR_COMPANY=Spacely Sprockets
REACT_APP_COMPETITOR=Cogswell Cogs

2. 在MDX中直接引用：

## 公告

我们{process.env.REACT_APP_OUR_COMPANY}很高兴宣布，对标{process.env.REACT_APP_COMPETITOR}的产品已更新至{process.env.REACT_APP_PRODUCT_VERSION}版本。

内容的提问来源于stack exchange，提问作者Russ Urquhart