MDX 中的表达式与变量插值

引言

MDX 支持在文档中直接插入 JavaScript 表达式，实现内容的动态渲染和变量插值，让文档更具交互性和灵活性。

基本用法

• 使用花括号 {} 包裹表达式：

  当前年份：{new Date().getFullYear()}
  

• 可插入变量、函数调用、三元表达式等。

典型场景

• 动态显示时间、作者、版本号等信息
• 条件渲染内容片段
• 结合组件属性实现个性化展示

示例代码

export const author = '张三'

# 变量插值示例

作者：{author}

当前年份：{new Date().getFullYear()}

{true ? <span style={{color: 'green'}}>显示内容</span> : null}

注意事项

• 仅支持在 Markdown 主体和 JSX 组件属性中插入表达式
• 不支持在代码块、行内代码、链接等 Markdown 语法内插入表达式
• 复杂逻辑建议在 export 语句中提前定义变量或函数

总结

表达式与变量插值让 MDX 文档更具动态性和可维护性，是实现个性化内容和交互的基础。