---
title: "组件"
description: "在 SVX 和 MDX 风格的文档页面里编写交互式 Svelte 组件。"
---

> Documentation Index
> Fetch the complete documentation index at: https://svedocs.pwp.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# 组件

<script>
  let target = 'SvelteKit';
</script>

# 组件

文档里需要直接使用 Svelte 组件时，可以改用 `.svx` 或 `.mdx`。这些页面仍然会进入和 Markdown 相同的路由、导航、搜索和 SEO 流程。

## 交互式写作

<Callout tone="edge">
  组件可以通过 `svedocs()` Vite 插件注入，并直接在文档文件里使用。
</Callout>

<button class="sd-button" type="button" on:click={() => (target = target === 'SvelteKit' ? 'Cloudflare' : 'SvelteKit')}>
  切换 {target}
</button>

上面的组件会直接编译成 Svelte，不需要 React MDX 运行时。

```ts title="component-authoring.ts" {1}
export const runtime = 'svelte';
export const framework = 'svedocs';
```

## 什么时候用它

- 小型交互示例。
- 多语言示例和提示块。
- 需要保持在文档主题内部的布局敏感片段。

Source: https://svedocs.pwp.sh/docs/zh/writing/components