在nginx配置https的教程

Thu, 15 Jan 2026 00:00:00 GMT

展示在 Astro + Svelte 项目中使用 MDX 的正确方式

Astro + Svelte MDX 示例

Mon, 15 Jan 2024 00:00:00 GMT

Astro + Svelte MDX 演示

基础 Markdown 功能

这是粗体和斜体文本。

代码块

function greet(name) {
  return `Hello, ${name}!`;
}

列表

项目 1
项目 2
项目 3

在 MDX 中使用 Svelte 组件

由于你的项目是 Astro + Svelte，你可以这样使用 Svelte 组件：

<!-- 这是 Svelte 组件语法，不是 JSX -->
<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  点击了 {count} 次
</button>

使用 Astro 组件

你也可以在 MDX 中嵌入 Astro 组件：

---
// 这是 Astro 组件
const message = "Hello from Astro!";
---
<div>{message}</div>

重要区别总结

特性	普通 Markdown	MDX (你的项目)
文件扩展名	`.md`	`.mdx`
Svelte 组件	❌ 不支持	✅ 支持 `.svelte`
Astro 组件	❌ 不支持	✅ 支持 `.astro`
React/JSX 组件	❌ 不支持	❌ 不支持 (需要 React 集成)
JavaScript 表达式	❌ 不支持	✅ 支持

结论

✅ 可以引入：Svelte 组件 (.svelte) 和 Astro 组件 (.astro) ❌ 不能引入：React/JSX 组件 (需要额外的 React 集成)

你的 MDX 文件应该使用 Svelte 语法 而不是 JSX 语法！

minjm的小破站