概览

自定义 shadcn-docs-nuxt。

shadcn-docs-nuxt 通过 app.config.ts 进行配置。

app.config.ts

export default defineAppConfig({
  shadcnDocs: {
    header: {
      // ...
    },
    aside: {
      // ...
    },
    main: {
      // ...
    },
    // ...
  },
});

字段参考

说明性类型声明：

type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;

interface ILink {
  title?: string;
  icon?: string;
  to: string;
  target?: Target;
  showLinkIcon?: boolean; // For nav and toc link section
}

interface INav {
  title: string;
  links?: (ILink & { description: string; icon: string })[];
  to?: string;
  target?: Target;
}

图标

所有可配置的图标都可以设置为 iconify 图标、表情符号和 URL，底层使用智能图标。

`site`

namestring

显示在标签页标题中的站点名称：<页面> - <站点名称>。

descriptionstring

用于 SEO 的站点描述。

ogImagestring

Open Graph 图片的路径。

ogImageComponentstring

ShadcnDocs

用于动态 ogImage 的组件。可能的值：ShadcnDocs、Nuxt、NuxtSeo 或您的自定义组件名称。

ogImageColor'light' | 'dark'

light

用于动态 ogImage 的颜色模式。

umamiobject

`theme`

customizableboolean

true

用户是否可以自定义主题（在标题中显示自定义按钮）。

colorColor

zinc

默认颜色主题。https://www.shadcn-vue.com/themes.html

radiusstring

0.5

默认圆角。

`banner`

Read more at api > configuration > banner

enableboolean

false

是否启用横幅。

showCloseboolean

true

是否显示关闭按钮。

tostring

要导航到的链接。如果不想导航，请不要设置任何值。

contentstring

要显示的内容（由 MDC 解析器解析）。

targetTarget

_blank

导航目标。

borderboolean

true

是否在横幅底部显示边框。

`header`

showLoadingIndicatorboolean

true

是否显示 nuxt 加载指示器。

titlestring

显示在标题中图标旁边的标题。

showTitleboolean

true

是否在标题中显示标题文本。

borderboolean

false

是否显示标题的底部边框。

darkModeToggleboolean

true

是否显示深色模式切换。

languageSwitcherobject

logo{ light: string; dark: string; }

{ light: '/logo.svg', dark: '/logo-dark.svg' }

/public 中徽标图像文件的路径。light 用于浅色模式下显示的图标，dark 用于深色模式下显示的图标。

showTitleInMobileboolean

false

是否在移动设备上显示徽标和标题。（建议与按钮样式搜索栏一起使用）

navINav[]

[]

标题中导航栏的内容。

linksILink[]

[]

标题右侧的链接。

`aside`

useLevelboolean

true

是否使用层级样式侧边栏。

levelStyle'header' | 'aside'

'aside'

层级样式侧边栏的样式。header 表示顶级链接显示在标题中，aside 表示顶级链接显示在侧边栏中。

aside

header

使用 header 样式时，建议将 header.border 设置为 true 以获得更好的视觉分离效果。

headerLevelNavAlign'start' | 'center' | 'end'

'start'

标题顶级导航链接的对齐方式。仅在 levelStyle 设置为 header 时适用。

collapseboolean

false

是否默认折叠所有文件夹。

collapseLevelnumber

1

折叠深度超过定义级别的文件夹。（如果要展开所有文件夹，请设置为 Infinity）

folderStyle'default' | 'tree' | 'group'

default

用于文件夹的默认样式。

`main`

paddedboolean

true

页面是否有内边距。

breadCrumbboolean

true

是否显示面包屑导航。

showTitleboolean

true

是否显示标题部分。

codeCopyToastboolean

false

代码复制时是否显示提示。

codeCopyIconstring

lucide:copy

代码复制按钮使用的图标。

codeCopyToastTextstring

'Copied to clipboard!'

提示器中显示的文本。

fieldRequiredTextstring

'required'

当字段为必填时在字段组件中显示的文本。

pm('npm' | 'pnpm' | 'bun' | 'yarn')[]

['npm', 'pnpm', 'bun', 'yarn']

在包管理器组件中显示的包管理器。

codeIconRecord<string, string>

代码组标题中语言/文件名的图标映射。

imageZoomboolean

true

是否启用图片缩放功能。（点击图片放大）

Read more at components > prose > images-and-embeds > image-zooming

editLinkobject

backToTopboolean

true

是否启用编辑链接旁边的返回顶部按钮。

`footer`

creditsstring

''

页脚左侧的版权文本（由 MDC 解析器解析）。

linksILink[]

[]

页脚右侧的链接。

`toc`

enableboolean

true

是否启用目录部分。

enableInMobileboolean

false

是否在移动设备上启用目录部分。

enableInHomepageboolean

false

是否在首页启用目录部分。

titlestring

'On This Page'

目录部分的标题。

linksILink[]

[]

目录部分下的链接。

iconLinksILink[]

[]

目录部分下的图标链接。

carbonAdsobject

`search`

enableboolean

true

是否启用搜索功能。

inAsideboolean

false

是否在侧边栏中显示搜索栏。

style'input' | 'button'

input

搜索栏是显示为输入框还是按钮。

placeholderstring

'Search...'

搜索栏中显示的占位符文本。

placeholderDetailedstring

'Search documentation...'

搜索对话框输入框中显示的占位符文本。

`data`

Read more at api > advanced > data-binding