Astro JS中如何将Frontmatter变量传递至脚本？

在Astro里，Frontmatter代码运行在服务器端，而普通<script>标签默认在客户端浏览器执行，两者分属不同运行上下文，直接像你示例里那样引用变量会触发未定义错误。下面是两种可靠的传递方式：

方法一：使用define:vars指令（官方推荐） #

Astro提供的define:vars指令可安全地将服务器端Frontmatter变量序列化后传递到客户端脚本，支持字符串、数字、布尔值、对象、数组等可序列化类型。

示例代码：

---
const title = "this is title"
---

some content

<script define:vars={{ title }}>
  const metatitle = title;
  console.log(metatitle); // 控制台输出 "this is title"
</script>

方法二：通过DOM属性传递 #

如果需要将变量与DOM元素关联，可把变量值嵌入元素的data-*属性，再在客户端脚本中读取该属性。

示例代码：

---
const title = "this is title"
---

<div id="title-data" data-title={title}></div>

<script>
  const element = document.getElementById('title-data');
  const metatitle = element.dataset.title;
  console.log(metatitle); // 控制台输出 "this is title"
</script>

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