能否在MDX的Markdown链接标签中使用变量作为URL？

问题描述 #

我已声明用于管理所有链接的对象：

export const Links = {
  "foo": "bar",
  "bar": "https://external.goo.com"
}

尝试用Markdown链接语法 [Description]({Links.foo}) 引用变量时，MDX无法解析括号内的变量，会直接渲染出字面量 {foo}。目前只能通过 <a href={Links.foo}>this render variables correctly</a> 实现变量引用，但这种写法过于冗长，远不如Markdown原生语法友好。

请问有没有办法用简洁的语法引用链接变量，或者修改MDX的渲染逻辑？
注：我不是JavaScript开发者，请不要假设我具备相关进阶知识

解决方案 #

方案1：自定义简化链接组件 #

这是最直观的方法，只需两步：

1. 在MDX文件顶部添加以下代码（如果想全局复用，可放到项目的全局MDX组件文件中，具体位置参考你用的工具文档）：

export const Link = ({ to, children }) => <a href={Links[to]}>{children}</a>

2. 之后在文档中即可用简洁写法调用：

<Link to="foo">Description</Link>

这种写法仅比Markdown原生链接多几个字符，逻辑也一致——把[描述](链接)换成<Link to="变量名">描述</Link>即可。

方案2：使用MDX宏（更接近函数调用） #

如果你的MDX环境支持宏（多数现代MDX工具默认支持），可以用宏进一步简化：

1. 在MDX文件顶部定义宏函数：

export const link = (key, text) => `<a href="${Links[key]}">${text}</a>`

2. 在文档中调用宏：

{link('foo', 'Description')}

这种写法更紧凑，适合习惯函数调用逻辑的场景。

注意事项 #

• 确保Links对象和你定义的组件/宏在同一个MDX文件中，或已全局导入（若需全局复用，可查看你使用的静态站点工具（如Next.js、Gatsby）的MDX配置文档，了解如何全局注入变量和组件）。
• 部分MDX插件可直接支持Markdown链接中使用变量，但这类插件需要简单配置，对于非JS开发者来说，自定义组件的方法更易上手。

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