AI语言的使用场景

Starlight Markdoc 组件示例

本文演示 Markdoc 一些组件的使用

Aside

Badge

Note
Success
Tip
Caution
Danger
New
New and improved
New, improved, and bigger

Code

console.log('This could come from Directus doc_mdc!');

File Tree

astro.config.mjs
package.json
文件夹
src
- 文件夹
  components
  - Header.astro 重要文件
  - Title.astro
- 文件夹
  pages/
  - …

Icon

Link Button

订单审核

Steps

在 Directus 编辑 doc_mdc 字段
保存后文档站 dev 模式约 5 秒内自动同步
访问本页验证组件渲染效果

步骤内嵌代码示例请单独使用 Code 组件：

console.log('Hello from Markdoc steps');

Tabs

Stars
Moons

Sirius, Vega, Betelgeuse

Orion
Gemini

Bellatrix, Rigel, Betelgeuse

Card / LinkCard / CardGrid

Stars

Sirius, Vega, Betelgeuse

快速开始了解蜂巢全渠道文档结构与接入前置条件。

功能 A

需要突出展示的内容。

功能 B

更多说明文字。

Stagger A

交错布局卡片 A。

Stagger B

交错布局卡片 B。

纯 Markdown 段落

下面是普通 Markdown 内容，可与 Markdoc 组件混排在同一篇文档中：

这是可以的。支持粗体、列表和站内链接。

添加上传图片

手动上传

1.商城配置

1.1 商城名称

商城名称会在商城端展示，按下图进行设置。

可以上传图片

<div style="overflow-x:auto;max-width:100%"> <table style="display:table;table-layout:fixed;width:100%;min-width:480px;border:1px solid var(--sl-color-gray-5);border-collapse:collapse"><colgroup><col style="width:33%"><col style="width:33%"><col style="width:34%"></colgroup><thead><tr><th style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top;background-color:color-mix(in srgb, var(--sl-color-gray-6) 35%, transparent)">地区</th><th style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top;background-color:color-mix(in srgb, var(--sl-color-gray-6) 35%, transparent)">人数</th><th style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top;background-color:color-mix(in srgb, var(--sl-color-gray-6) 35%, transparent)">平均</th></tr></thead><tbody><tr><td style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top">上海</td><td style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top">282</td><td style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top">80.3</td></tr><tr style="background-color:color-mix(in srgb, var(--sl-color-gray-6) 35%, transparent)"><td style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top;background-color:color-mix(in srgb, var(--sl-color-gray-6) 35%, transparent)">北京</td><td style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top;background-color:color-mix(in srgb, var(--sl-color-gray-6) 35%, transparent)">381</td><td style="padding-left:8px;padding-right:8px;word-break:break-word;white-space:normal;vertical-align:top;background-color:color-mix(in srgb, var(--sl-color-gray-6) 35%, transparent)">82.2</td></tr></tbody></table> </div>