Sveltepress
手动与自动导入

所有的内置组件都可以直接在 md 文件中使用，但是必须在 svelte 中手动导入

Link

Props

  • label - 链接文案
  • to - 链接地址
  • target - 链接的 target 属性（例如：_blank 在新标签页打开，_self 在当前标签页打开）。默认行为：外部链接会自动在新标签页打开
  • withBase - 是否用 sveltekit config.kit.paths.base 属性作为前缀，默认为 true
自动外部化图标

以 http(s) 开头的链接将会被自动识别为外部链接，会展示外部链接的图标

Markdown 中使用

* <Link to="https://github.com/" label="Github" />
* <Link to="/" label="首页" />
md

Svelte 中使用

<script>
  import { 

type Link = SvelteComponent<Record<string, any>, any, any>
const Link: LegacyComponentType
Link } from '@sveltepress/theme-default/components' 
</script>
<div style: stringstyle="line-height: 24px;">
  <const Link: LegacyComponentTypeLink to: stringto="/" label: stringlabel="首页" /> <br />
  <const Link: LegacyComponentTypeLink to: stringto="https://github.com/" label: stringlabel="Github" />
</div>
svelte

Tabs & TabPanel

Tab Props

  • activeName - 默认选中的面板名
  • bodyPadding - 面板内容是否具有一个默认的 padding 值，默认为：true

TabPanel Props

  • name - 面板名
  • activeIcon - 选中时展示的图标内容，是一个 svelte 组件
  • inactiveIcon - 未选中时展示的图标内容，是一个 svelte 组件

Markdown 中使用

Counter.svelte
<script>
  let let count: numbercount = 

function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.


Example:



let count = $state(0);
@seehttps://svelte.dev/docs/svelte/$state Documentation@paraminitial  The initial value
$

function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.


Example:



let count = $state(0);
@seehttps://svelte.dev/docs/svelte/$state Documentation@paraminitial  The initial value
state(0)
</script>
<button onclick: () => numberonclick={() => let count: numbercount++}>
  你点击了 {let count: numbercount} 次
</button>
svelte
Counter.vue
<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
<button @click="count++">
  你点击了 {{ count }} 次
</button>
html
<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 中使用

<script>
  import { 

type TabPanel = SvelteComponent<Record<string, any>, any, any>
const TabPanel: LegacyComponentType
TabPanel, 

type Tabs = SvelteComponent<Record<string, any>, any, any>
const Tabs: LegacyComponentType
Tabs } from '@sveltepress/theme-default/components' 
</script>
<const Tabs: LegacyComponentTypeTabs activeName: stringactiveName="Tab2">
  <const TabPanel: LegacyComponentTypeTabPanel name: stringname="Tab1">
    <div>面板一内容</div>
  </const TabPanel: LegacyComponentTypeTabPanel>
  <const TabPanel: LegacyComponentTypeTabPanel name: stringname="Tab2">
    <div>面板二内容</div>
  </const TabPanel: LegacyComponentTypeTabPanel>
</const Tabs: LegacyComponentTypeTabs>
svelte

Expansion

Props

  • title - 标题
  • showIcon - 是否展示图标，默认为：true
  • headerStyle - 自定义头部行内样式
  • bind:expanded - 是否处于展开状态，默认为：false

Slots

  • default - 需要折叠/展开的内容
  • icon-fold - 折叠状态下展示的图标
  • icon-expanded - 展开状态下展示的图标
  • arrow - 自定义箭头部分的内容

Markdown 中使用

一些可折叠的内容
<Expansion title="点击展开/折叠面板">
  <div class="text-[24px]">一些可折叠的内容</div>
</Expansion>
md

Svelte 中使用

<script>
  import { 

type Expansion = SvelteComponent<Record<string, any>, any, any>
const Expansion: LegacyComponentType
Expansion } from '@sveltepress/theme-default/components'
</script>
<const Expansion: LegacyComponentTypeExpansion title: stringtitle="一个拥有自定义内容的折叠面板">
  <div class: stringclass="p-4 text-[24px]">
    看看左边，展开时会变色哦！
  </div>
  {#snippet iconFold: () => anyiconFold()}
    <div class: stringclass="i-bxs-wink-smile"></div>
  {/snippet}
  {#snippet iconExpanded: () => anyiconExpanded()}
    <div class: stringclass="i-fxemoji-smiletongue"></div>
  {/snippet}
  {#snippet arrow: () => anyarrow()}
    <div class: stringclass="i-material-symbols-thumbs-up-down"></div>
  const iconFold: any{/const iconFold: anysniconst iconFold: anyppeconst iconExpanded: anytconst iconExpanded: any}
</const Expansion: LegacyComponentTypeExpansion>
svelte

Icons (Iconify 图标预构建)

图标需要预构建

用到的图标需要加入 iconify 预构建配置 中

Markdown 中使用

<div style="font-size: 28px;">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
md

Svelte 中使用

<script>
  import { 

type IconifyIcon = SvelteComponent<Record<string, any>, any, any>
const IconifyIcon: LegacyComponentType
IconifyIcon } from '@sveltepress/theme-default/components'
</script>
<div style: stringstyle="font-size: 28px;">
  <const IconifyIcon: LegacyComponentTypeIconifyIcon collection: stringcollection="vscode-icons" name: stringname="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 { 

type Floating = {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<PropType>): void;
}
const Floating: Component<PropType, {}, "">
Floating } from '@sveltepress/theme-default/components'
</script>
<const Floating: Component<PropType, {}, "">Floating PropType.placement?: Placement | undefinedplacement="right">
  <div class: stringclass="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    将鼠标放置在这里
  </div>
  {#snippet PropType.floatingContent?: Snippet<[]> | undefinedfloatingContent()}
    <div class: stringclass="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
      漂浮内容
    </div>
  const floatingContent: Snippet<[]> | undefined{/const floatingContent: Snippet<[]> | undefinedsnippetconst floatingContent: Snippet<[]> | undefined}
</const Floating: Component<PropType, {}, "">Flconst Floating: Component<PropType, {}, "">oating>
svelte

Props

  • alwaysShow - 是否始终展示浮动内容，默认为 false
  • placement - 指定浮动弹出层相对于触发内容的位置，完整取值参考：placement - floating-ui，默认为：bottom.
  • floatingClass - 加到弹出层容器上的额外自定义样式类名

CodeBlock

Markdown 中使用

<CodeBlock lang="ts" code="const foo = 'bar'" />
md

Svelte 中使用

<script>
  import { 

type CodeBlock = SvelteComponent<Record<string, any>, any, any>
const CodeBlock: LegacyComponentType
CodeBlock } from '@sveltepress/theme-default/components'
</script>
<const CodeBlock: LegacyComponentTypeCodeBlock lang: stringlang="ts" code: stringcode="const foo = 'bar'" />
svelte

Props

  • lang - 语言名称，例如： 'svelte', 'md', 'js'
  • code - 代码内容