概览

Customizing 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; // 用于导航和目录链接的部分
}

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

图标

所有可配置的图标都可以设置为 iconify 图标, 表情符号和网址, 在底层使用智能图标.

`site`

namestring

标签标题上显示的网站名称: <page> - <site_name>.

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`

阅读更多于 API > Configuration > Banner

enableboolean

false

是否启用横幅.

showCloseboolean

true

是否显示关闭按钮.

tostring

导航链接. 如果不想导航, 请不要设置任何值.

contentstring

要显示的内容 (由 MDC 解析器解析).

targetTarget

_blank

导航的 target.

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' }

Logo 图像文件的路径位于 /public 中. light 用于在亮色模式下显示的图标, dark 用于在暗色模式下显示的图标.

showTitleInMobileboolean

false

是否在移动设备上显示标志和标题. (建议与按钮样式搜索栏一起使用)

navINav[]

[]

页眉中导航栏的内容.

linksILink[]

[]

页眉右侧的链接.

`aside`

useLevelboolean

true

是否使用分级样式侧边栏.

levelStyle'header' | 'aside'

'aside'

分级侧边栏的样式。header 表示顶层链接显示在顶部, aside 表示顶层链接显示在侧边栏.

侧边栏

顶部

建议在使用 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!'

Toast 提示上显示的文字.

fieldRequiredTextstring

'required'

当字段为必填项时, 在 field 组件中显示的文本.

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

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

在 pm 组件中显示的软件包管理器.

codeIconRecord<string, string>

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

imageZoomboolean

true

是否启用图片放大功能. (点击图片可放大)

阅读更多于 Components > Prose Components > Images and embeds > image-zooming

editLinkobject

backToTopboolean

true

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

`footer`

creditsstring

''

页脚左侧的版权文字 (由MDC解析器解析).

borderboolean

true

是否在页脚顶部显示边框.

linksILink[]

[]

页脚右侧的链接.

`toc`

enableboolean

true

是否开启目录部分.

enableInMobileboolean

false

是否在手机上启用目录部分.

enableInHomepageboolean

false

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

progressBarboolean

true

是否在目录部分的左侧显示进度条.

titlestring

'On This Page'

目录部分的标题.

linksILink[]

[]

目录部分下的链接.

iconLinksILink[]

[]

目录部分下的图标链接.

carbonAdsobject

`search`

enableboolean

true

是否启用搜索功能.

inAsideboolean

false

是否在侧边栏显示搜索栏.

style'input' | 'button'

input

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

placeholderstring

'Search...'

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

placeholderDetailedstring

'Search documentation...'

搜索对话框输入中的占位符文本.

`data`

阅读更多于 API > Advanced > Binding Data

默认配置

阅读更多于源文件

本页目录

字段参考
- 图标
site
theme
banner
header
aside
main
footer
toc
search
data
默认配置

在 GitHub 上 Star 创建一个 Issue