在Astro的MDX中嵌入前端组件 • CLUE

前言

在使用 Astro 构建内容网站时，你可能希望在 Markdown（或 MDX）中插入一些交互式组件，比如按钮、表单、图表等。本文将通过一个简单的“加法计算器”组件，介绍如何在 MDX 中嵌入 Astro 组件并实现客户端交互。

计算器演示

这是一个嵌入在 MDX 中的计算器组件示例。

两数之和计算器

代码实现

Adder.astro 组件的实现如下：

---

---

<div class="mx-auto mt-8 max-w-md rounded-lg bg-white p-6 shadow-md">
  <div class="mb-4 text-center text-2xl font-bold text-gray-800">两数之和计算器</div>

  <div class="space-y-4">
    <input
      type="number"
      id="num1"
      placeholder="请输入第一个数"
      class="w-full rounded-md border p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
    />

    <input
      type="number"
      id="num2"
      placeholder="请输入第二个数"
      class="w-full rounded-md border p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
    />

    <button
      id="calculateBtn"
      class="w-full rounded-md bg-blue-500 p-2 text-white transition-colors hover:bg-blue-600"
    >
      计算和
    </button>

    <p id="result" class="mt-2 font-mono text-lg"></p>
  </div>
</div>

<script is:client>
  // 客户端脚本处理计算逻辑
  const num1Input = document.getElementById("num1");
  const num2Input = document.getElementById("num2");
  const resultEl = document.getElementById("result");
  const calculateBtn = document.getElementById("calculateBtn");

  function calculateSum() {
    const num1 = parseFloat(num1Input.value);
    const num2 = parseFloat(num2Input.value);

    if (isNaN(num1) || isNaN(num2)) {
      resultEl.textContent = "请输入有效的数字";
      resultEl.classList.add("text-red-500");
      return;
    }

    const sum = num1 + num2;
    resultEl.textContent = `计算结果：${num1} + ${num2} = ${sum}`;
    resultEl.classList.remove("text-red-500");
    resultEl.classList.add("text-green-600");
  }

  calculateBtn.addEventListener("click", calculateSum);
</script>

在Astro的MDX中嵌入前端组件.mdx 组件的实现如下：

import Adder from './components/Adder.astro';

## 计算器演示

这是一个嵌入在MDX中的计算器组件示例。

<Adder client:load />