链接卡片组件

引入组件

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import { DocBoxCube, DocLinks, DocPill } from '@theojs/lumen'

export default {
  extends: DefaultTheme,
  enhanceApp: ({ app }) => {
    app.component('Pill', DocPill) 
    app.component('Links', DocLinks) 
    app.component('BoxCube', DocBoxCube) 
  } 
}

Pill

输入

Pill.vue

template

<!-- iconify 图标 -->
<Pill
  name="Iconify"
  link="https://iconify.design/"
  :icon="{ icon: 'line-md:iconify2-static', color: '#1769AA', alt: 'iconify icon' }"
  :size="16"
  rel="noopener noreferrer"
/>
<Pill name="Vue" link="https://vuejs.org/" icon="vscode-icons:file-type-vue" alt="vue icon" rel="noopener noreferrer" />

<!-- 深浅模式的 iconify 图标 -->
<Pill
  name="Vercel"
  link="https://vercel.com/"
  :icon="{
    light: 'ion:logo-vercel',
    dark: 'ion:logo-vercel',
    color: { light: '#000000', dark: '#FFFFFF' }
  }"
  alt="vercel icon"
  rel="noopener noreferrer"
/>
<Pill
  name="Vite"
  link="https://vitejs.dev/"
  :icon="{ light: 'skill-icons:vite-dark', dark: 'skill-icons:vite-light' }"
  alt="vite icon"
  rel="noopener noreferrer"
/>

<!-- 图片 -->
<Pill
  name="支付宝"
  link="https://i.theojs.cn/alipay.webp"
  :image="{
    src: 'https://i.theojs.cn/logo/alipay.svg',
    alt: 'github icon'
  }"
  rel="noopener noreferrer"
/>

<!-- 深浅模式的图片 -->
<Pill
  name="GitHub"
  link="https://github.com"
  :image="{
    light: 'https://i.theojs.cn/logo/github.svg',
    dark: 'https://i.theojs.cn/logo/github-dark.svg',
    alt: 'github icon',
    crop: true
  }"
  rel="noopener noreferrer"
/>

输出

Iconify Vue Vercel Vite

支付宝

GitHub

参数说明

字段	类型	描述	是否必填
`name`	`string`	Pill 名称，作为显示文本。	必填
`link`	`LinkType`	Pill 链接地址，可为外部 URL 或站内路径。	可选
`rel`	`RelType`	链接的 `rel` 属性，建议设置为 `noopener noreferrer` 以增强安全性。	可选
`target`	`TargetType`	链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。	可选
`icon`	`IconType`	图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType	可选
`image`	`ImageType`	图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType	可选
`size`	`SizeType`	控制图片或者图标的的尺寸默认为 `width="14" height="14"`	可选
`alt`	`AltType`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选

Links

输入

默认自定义 2 列自定义 3 列

vue

<Links
  :items="[
    // iconify 图标
    {
      name: 'iconify',
      link: 'https://iconify.design/',
      icon: {
        icon: 'line-md:iconify2-static',
        color: '#1769AA',
        alt: 'iconify icon'
      },
      size: 48,
      desc: '开源的图标库，提供了数以万计的矢量图标，支持多种框架和平台。它允许开发者轻松地在项目中使用各种图标，并且支持深浅模式切换。',
      rel: 'noopener noreferrer'
    }
  ]"
/>

vue

<Links
  :grid="2"
  :items="[
    // 普通图片
    {
      name: '支付宝',
      link: 'https://i.theojs.cn/alipay.webp',
      image: {
        src: 'https://i.theojs.cn/logo/alipay.svg',
        alt: 'alipay icon'
      },
      desc: '移动支付平台，提供便捷的在线支付和转账服务',
      rel: 'noopener noreferrer'
    },
    // 深浅模式图片
    {
      name: 'GitHub',
      link: 'https://github.com',
      image: {
        light: 'https://i.theojs.cn/logo/github.svg',
        dark: 'https://i.theojs.cn/logo/github-dark.svg',
        crop: true,
        alt: 'github icon'
      },
      desc: '全球最大代码托管平台，支持版本控制和协作开发。',
      rel: 'noopener noreferrer'
    }
  ]"
/>

vue

<Links
  :grid="3"
  :items="[
    // 深浅模式 iconify 图标
    {
      name: 'Vercel',
      link: 'https://vercel.com/',
      icon: {
        light: 'ion:logo-vercel',
        dark: 'ion:logo-vercel',
        color: { light: '#000000', dark: '#FFFFFF' },
        alt: 'Vercel icon'
      },
      desc: '适用于前端框架的无服务器部署平台，支持静态生成和即时预览。',
      rel: 'noopener noreferrer'
    },
    // 深浅模式 iconify 图标，无 color
    {
      name: 'Vite',
      link: 'https://vitejs.dev/',
      icon: {
        light: 'skill-icons:vite-light',
        dark: 'skill-icons:vite-dark',
        alt: 'Vite icon'
      },
      desc: '极速的现代前端构建工具，支持热更新与按需加载。',
      rel: 'noopener noreferrer'
    },
    {
      name: 'Netlify',
      link: 'https://www.netlify.com/',
      icon: {
        light: 'skill-icons:netlify-light',
        dark: 'skill-icons:netlify-dark',
        alt: 'Netlify icon'
      },
      desc: '提供 CI/CD、自动构建和无服务器函数的前端部署平台。',
      rel: 'noopener noreferrer'
    },
    // 无图标
    {
      name: 'MDN Web Docs',
      link: 'https://developer.mozilla.org/',
      desc: '权威的 Web 技术文档库，涵盖 HTML、CSS 和 JavaScript。',
      alt: 'MDN Web Docs',
      rel: 'noopener noreferrer'
    },
    {
      name: 'Stack Overflow',
      link: 'https://stackoverflow.com/',
      desc: '全球最大程序员问答社区，快速解决开发难题。',
      alt: 'Stack Overflow',
      rel: 'noopener noreferrer'
    },
    {
      name: 'DevDocs',
      link: 'https://devdocs.io/',
      desc: '整合多种技术文档的搜索工具，支持离线访问。',
      alt: 'DevDocs',
      rel: 'noopener noreferrer'
    }
  ]"
/>

输出

iconify

开源的图标库，提供了数以万计的矢量图标，支持多种框架和平台。它允许开发者轻松地在项目中使用各种图标，并且支持深浅模式切换。

支付宝

移动支付平台，提供便捷的在线支付和转账服务

GitHub

全球最大代码托管平台，支持版本控制和协作开发。

Vercel

适用于前端框架的无服务器部署平台，支持静态生成和即时预览。

Vite

极速的现代前端构建工具，支持热更新与按需加载。

Netlify

提供 CI/CD、自动构建和无服务器函数的前端部署平台。

MDN Web Docs

权威的 Web 技术文档库，涵盖 HTML、CSS 和 JavaScript。

Stack Overflow

全球最大程序员问答社区，快速解决开发难题。

DevDocs

整合多种技术文档的搜索工具，支持离线访问。

参数说明

字段	类型	描述	是否必填
`grid`	`number`	网格列数。默认为单列，传入数字如 `3`、`4` 可指定多列。	可选
`name`	`string`	DocLinks 名称，作为显示文本。	必填
`desc`	`string`	DocLinks 描述文本，用于补充说明信息。	可选
`link`	`LinkType`	DocLinks 链接地址，支持站内路径或外部 URL。	必填
`rel`	`RelType`	链接的 `rel` 属性，建议设置为 `noopener noreferrer` 以增强安全性。	可选
`target`	`TargetType`	链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。	可选
`icon`	`IconType`	图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType	可选
`image`	`ImageType`	图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType	可选
`size`	`SizeType`	控制图片或者图标的的尺寸默认为 `width="32" height="32"`	可选
`alt`	`AltType`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选

BoxCube

输入

BoxCube.vue

vue

<BoxCube
  :grid="6"
  :items="[
    // 普通 iconify 图标
    {
      name: 'iconify',
      link: 'https://iconify.design/',
      icon: { icon: 'line-md:iconify2-static', color: '#1769AA', alt: 'iconify icon' },
      rel: 'noopener noreferrer'
    },
    // 深浅色模式的 iconify 图标
    {
      name: 'Vercel',
      link: 'https://vercel.com/',
      icon: {
        light: 'ion:logo-vercel',
        dark: 'ion:logo-vercel',
        color: { light: '#000000', dark: '#FFFFFF' },
        alt: 'Vercel icon'
      },
      rel: 'noopener noreferrer'
    },
    // 深浅色模式 iconify 图标（无 color）
    {
      name: 'Vite',
      link: 'https://vitejs.dev/',
      icon: { light: 'skill-icons:vite-light', dark: 'skill-icons:vite-dark', alt: 'Vite icon' },
      rel: 'noopener noreferrer'
    },
    // 普通图片
    {
      name: '支付宝',
      link: 'https://i.theojs.cn/alipay.webp',
      image: 'https://i.theojs.cn/logo/alipay.svg',
      alt: 'alipay icon',
      rel: 'noopener noreferrer'
    },
    // 深浅色模式图片
    {
      name: 'GitHub',
      link: 'https://github.com',
      image: {
        light: 'https://i.theojs.cn/logo/github.svg',
        dark: 'https://i.theojs.cn/logo/github-dark.svg',
        alt: 'github icon',
        crop: true
      },
      size: 48,
      rel: 'noopener noreferrer'
    }
  ]"
/>

输出

iconify Vercel Vite

支付宝

GitHub

参数说明

字段	类型	描述	是否必填
`grid`	`number`	网格列数。默认为 `6` 列，传入数字如 `3`、`4` 可指定多列。	可选
`name`	`string`	BoxCube 名称，作为显示文本。	必填
`link`	`LinkType`	BoxCube 链接地址，支持站内路径或外部 URL。	必填
`rel`	`RelType`	链接的 `rel` 属性，建议设置为 `noopener noreferrer` 以增强安全性。	可选
`target`	`TargetType`	链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。	可选
`icon`	`IconType`	图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType	可选
`image`	`ImageType`	图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType	可选
`size`	`SizeType`	控制图片或者图标的的尺寸默认为 `width="32" height="32"`	可选
`alt`	`AltType`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选

Card

输入

默认自定义 2 列

vue

<Card
  :items="[
    // iconify 图标
    {
      name: 'iconify',
      link: 'https://iconify.design/',
      icon: {
        icon: 'line-md:iconify2-static',
        color: '#1769AA',
        alt: 'iconify icon'
      },
      desc: '开源的图标库，提供了数以万计的矢量图标，支持多种框架和平台。',
      rel: 'noopener noreferrer'
    },
    // 普通图片
    {
      name: '支付宝',
      link: 'https://i.theojs.cn/alipay.webp',
      image: {
        src: 'https://i.theojs.cn/logo/alipay.svg',
        alt: 'alipay icon'
      },
      desc: '中国领先的第三方支付平台，支持转账、支付和理财服务。',
      rel: 'noopener noreferrer'
    },
    // 深浅模式图片
    {
      name: 'GitHub',
      link: 'https://github.com',
      image: {
        light: 'https://i.theojs.cn/logo/github.svg',
        dark: 'https://i.theojs.cn/logo/github-dark.svg',
        alt: 'github icon'
      },
      desc: '全球最大代码托管平台，支持版本控制和协作开发。',
      rel: 'noopener noreferrer'
    },
    // 深浅模式 iconify 图标
    {
      name: 'Vercel',
      link: 'https://vercel.com/',
      icon: {
        light: 'ion:logo-vercel',
        dark: 'ion:logo-vercel',
        color: { light: '#000000', dark: '#FFFFFF' },
        alt: 'Vercel icon'
      },
      desc: '适用于前端框架的无服务器部署平台，支持静态生成和即时预览。',
      rel: 'noopener noreferrer'
    }
  ]"
/>

vue

<Card
  :grid="2"
  :items="[
    // 深浅模式 iconify 图标，无 color
    {
      link: 'https://vitejs.dev/',
      icon: {
        light: 'skill-icons:vite-light',
        dark: 'skill-icons:vite-dark',
        alt: 'Vite icon'
      },
      size: 128,
      desc: '极速的现代前端构建工具，支持热更新与按需加载。',
      rel: 'noopener noreferrer'
    },
    {
      link: 'https://www.netlify.com/',
      icon: {
        light: 'skill-icons:netlify-light',
        dark: 'skill-icons:netlify-dark',
        alt: 'Netlify icon'
      },
      size: 128,
      desc: '提供 CI/CD、自动构建和无服务器函数的前端部署平台。',
      rel: 'noopener noreferrer'
    }
  ]"
/>

输出

iconify

开源的图标库，提供了数以万计的矢量图标，支持多种框架和平台。

支付宝

中国领先的第三方支付平台，支持转账、支付和理财服务。

GitHub

全球最大代码托管平台，支持版本控制和协作开发。

Vercel

适用于前端框架的无服务器部署平台，支持静态生成和即时预览。

极速的现代前端构建工具，支持热更新与按需加载。

提供 CI/CD、自动构建和无服务器函数的前端部署平台。

字段	类型	描述	是否必填
`grid`	`number`	网格列数。默认为 `4` 列，传入数字如 `2`、`3` 可指定多列。	可选
`name`	`string`	DocCard 名称，作为显示文本。	必填
`desc`	`string`	DocCard 描述文本，用于补充说明信息。	可选
`link`	`LinkType`	DocCard 链接地址，支持站内路径或外部 URL。	必填
`rel`	`RelType`	链接的 `rel` 属性，建议设置为 `noopener noreferrer` 以增强安全性。	可选
`target`	`TargetType`	链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。	可选
`icon`	`IconType`	图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType	可选
`image`	`ImageType`	图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType	可选
`size`	`SizeType`	控制图片或者图标的的尺寸默认为 `width="64" height="64"`	可选
`alt`	`AltType`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选

IconType

export type IconImageMode = string | { light: string; dark: string }

export type IconType =
  | string
  | { icon: string; color?: IconImageMode; alt?: AltType }
  | { light: string; dark: string; color?: IconImageMode; alt?: AltType }

ImageType

export type ImageType =
  | string
  | { src: string; crop?: CropType; alt?: AltType }
  | { light: string; dark: string; crop?: CropType; alt?: AltType }

链接卡片组件 ​

引入组件 ​

Pill ​

参数说明 ​

Links ​

参数说明 ​

BoxCube ​

参数说明 ​

Card ​

IconType ​

ImageType ​

链接卡片组件

引入组件

Pill

参数说明

Links

参数说明

BoxCube

参数说明

Card

IconType

ImageType