内置组件
手动与自动导入
所有的内置组件都可以直接在 md 文件中使用，但是必须在 svelte 中手动导入
Link
Props
label- 链接文案to- 链接地址withBase- 是否用 sveltekit config.kit.paths.base 属性作为前缀，默认为true
自动外部化图标
以 http(s) 开头的链接将会被自动识别为外部链接，会展示外部链接的图标
Markdown 中使用
* <Link to="https://github.com/" label="Github" />
* <Link to="/" label="首页" />md
点击展开/折叠代码
Svelte 中使用
<script>
import { Link } from '@sveltepress/theme-default/components'
</script>
<div style="line-height: 24px;">
<Lin k to = " /" label="首页" /> <br />
<Lin k to = " https://github.com/" label="Github" />
</div>svelte
点击展开/折叠代码
Tabs & TabPanel
Tab Props
activeName- 默认选中的面板名bodyPadding- 面板内容是否具有一个默认的padding值，默认为：true
TabPanel Props
name- 面板名activeIcon- 选中时展示的图标内容，是一个 svelte 组件inactiveIcon- 未选中时展示的图标内容，是一个 svelte 组件
Markdown 中使用
Svelte
Vue
Counter.svelte
<script>
let count = $ state (0)
</script>
<button onclick={() => count ++}>
你点击了 {count } 次
</button>svelte
<Tabs activeName="Svelte">
<TabPanel name="Svelte">
```svelte title="Counter.svelte"
<script>
let count = $state(0)
</script>
<button onclick={() => count++}>
你点击了 {count} 次
</button>
```
</TabPanel>
<TabPanel name="Vue">
```html title="Counter.vue"
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<button @click="count++">
你点击了 {{ count }} 次
</button>
```
</TabPanel>
</Tabs>md
点击展开/折叠代码
Svelte 中使用
Tab1
Tab2
面板二内容
<script>
import { TabPanel , Tabs } from '@sveltepress/theme-default/components'
</script>
<Tab s act i veName=" Tab2 " >
<TabPane l nam e =" Tab1 " >
<div>面板一内容</div>
</TabPanel >
<TabPane l nam e =" Tab2 " >
<div>面板二内容</div>
</TabPanel >
</Tabs >svelte
点击展开/折叠代码
Expansion
Props
title- 标题showIcon- 是否展示图标，默认为：trueheaderStyle- 自定义头部行内样式bind:expanded- 是否处于展开状态，默认为：false
Slots
default- 需要折叠/展开的内容icon-fold- 折叠状态下展示的图标icon-expanded- 展开状态下展示的图标arrow- 自定义箭头部分的内容
Markdown 中使用
点击展开/折叠面板
一些可折叠的内容
<Expansion title="点击展开/折叠面板">
<div class="text-[24px]">一些可折叠的内容</div>
</Expansion>md
点击展开/折叠代码
Svelte 中使用
一个拥有自定义内容的折叠面板
看看左边，展开时会变色哦！
<script>
import { Expansion } from '@sveltepress/theme-default/components'
</script>
<Expansio n tit l e=" 一个拥有自定义 内容的折叠面板">
<div class="p-4 text-[24px]">
看看左边，展开时会变色哦！
</div>
{#snippet iconFold ()}
<div class="i-bxs-wink-smile"></div>
{/snippet}
{#snippet iconExpanded ()}
<div class="i-fxemoji-smiletongue"></div>
{/snippet}
{#snippet arrow ()}
<div class="i-material-symbols-thumbs-up-down"></div>
{/ sni ppe t }
</Expansion >svelte
点击展开/折叠代码
Icons (Iconify 图标预构建)
图标需要预构建
用到的图标需要加入 iconify 预构建配置 中
Markdown 中使用
<div style="font-size: 28px;">
<IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>md
点击展开/折叠代码
Svelte 中使用
<script>
import { IconifyIcon } from '@sveltepress/theme-default/components'
</script>
<div style="font-size: 28px;">
<IconifyIco n col l ection="vscode-icons" name="file-type-svelte" />
</div>svelte
点击展开/折叠代码
Floating
Markdown 中使用
将鼠标放置在这里
<Floating placement="top">
<div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
将鼠标放置在这里
</div>
{#snippet floatingContent()}
<div class="bg-white dark:bg-dark b-1 b-solid b-blue rounded p-4">
漂浮内容
</div>
{/snippet}
</Floating>md
点击展开/折叠代码
Svelte 中使用
将鼠标放置在这里
<script>
import { Floating } from '@sveltepress/theme-default/components'
</script>
<Floatin g pla c ement=" right " >
<div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
将鼠标放置在这里
</div>
{#snippet floatingContent ()}
<div class="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
漂浮内容
</div>
{/ snippet }
</Fl oating >svelte
点击展开/折叠代码
Props
alwaysShow- 是否始终展示浮动内容，默认为falseplacement- 指定浮动弹出层相对于触发内容的位置，完整取值参考： placement - floating-ui ，默认为：bottom.floatingClass- 加到弹出层容器上的额外自定义样式类名
CodeBlock
Markdown 中使用
const foo = 'bar'<CodeBlock lang="ts" code="const foo = 'bar'" />md
点击展开/折叠代码
Svelte 中使用
const foo = 'bar'<script>
import { CodeBlock } from '@sveltepress/theme-default/components'
</script>
<CodeBloc k lan g ="ts" code="const foo = 'bar'" />svelte
点击展开/折叠代码
Props
lang- 语言名称，例如：'svelte','md','js'code- 代码内容