时间戳

首页 > 解决方案 > 如何在 mdx 文件中使用 Gatsby 环境变量？

gatsby - 如何在 mdx 文件中使用 Gatsby 环境变量？

问题描述

我正在尝试在 md 文件中显示 Gatsby 环境变量。我在网上查了一下最好的方法是什么，在 md 文件中使用 JSX（在 mdx 插件的帮助下）似乎是最好的选择。例如，我想映射一个来自 env 变量的数组，以显示所有值。但是，不可能访问任何变量。

ex（在我的 mdx 文件中）：<div>{process.env.MyVariable.map(el=>(<div>{el}</div>))}</div>

错误：ReferenceError: process is not defined

我开始在本教程中添加 Gatsby插件环境变量。我仔细检查了如何使用此沙箱进行操作。我可以访问我的文件中的变量，但不能访问我的文件中的变量。.js.mdx

我错过了什么？做正确的事是最好的选择吗？

谢谢你的帮助，

标签： gatsby

解决方案

现在我设法只使用中间 JS 配置来实现它。

1. 创建 JS 配置包装器：

// site-config.js

export const siteConfig = {
  siteUrl: process.env.GATSBY_SITE_URL,
  dashboardUrl: process.env.GATSBY_DASHBOARD_URL,
};

2. 在 MDX 文件中使用这个中间配置

// pages/index.mdx
 
---
title: Getting started
description: How to get started?
---
import { Link } from 'gatsby';
import { siteConfig } from '../../../site-config';


This is our <a href={siteConfig.dashboardUrl}>proxyly.io Dashboard</a>.

推荐阅读