能否在Docusaurus中使用JavaScript变量实现动态MDX标题？

原生Markdown语法本身不支持直接嵌入JS变量，所以你之前写的## Heading {variable}会被当作字面量渲染。要实现动态标题，你需要使用Docusaurus支持的MDX语法，具体步骤如下：

1. 使用MDX文件格式
   将你的文档文件后缀改为.mdx（Docusaurus默认支持MDX，无需额外配置），MDX允许在Markdown中直接嵌入JS逻辑和变量插值。

2. 在MDX中定义或导入变量
   你可以在MDX文件内部直接定义变量，或者从外部文件导入：

   // 内部定义变量
   const variable = "foo";
   
   // 或者从外部导入
   // import { variable } from '../path/to/your/variables.js';
   

3. 在标题中插值变量
   直接在Markdown标题语法后使用{变量名}即可，语法和你期望的一致：

   ## Heading {variable}
   

   这样渲染后会得到Heading foo，完全符合你的需求。

对比React组件方式的优势 #

这种MDX写法完美解决了你提到的<Heading/>组件的局限性：

• 无需手动指定标题层级：用#对应h1、##对应h2，和原生Markdown规则完全一致；
• 自动生成slug化的id：和原生Markdown标题的id生成逻辑相同，不用手动计算；
• 样式完全匹配原生MD标题：渲染出的标题尺寸、样式和直接写## Heading foo完全一致，不会出现尺寸差异。

内容的提问来源于stack exchange，提问作者Panagiotis Deligiannis