链接卡片组件

引入组件

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import { DocBox, DocBoxCube, DocLinks, DocPill } from '@theojs/lumen'

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

Box

输入

Box.vue

vue

<Box
  :items="[
    // 普通 iconify 图标
    {
      name: 'iconify',
      link: 'https://iconify.design/',
      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',
      rel: 'noopener noreferrer'
    },
    // 带标签的图标
    {
      name: 'Vue',
      link: 'https://vuejs.org/',
      icon: 'vscode-icons:file-type-vue',
      tag: 'new',
      alt: 'vue icon',
      rel: 'noopener noreferrer'
    }
  ]"
/>

输出

iconify Vercel Vite

支付宝

GitHub Vue

new

参数说明

字段	类型	描述	是否必填
`name`	`string`	DocBox 名称，作为显示文本。	必填
`link`	`string`	DocBox 链接地址，可为外部 URL 或站内路径，如 `/docs`。	必填
`tag`	`string`	标签文本，用于标记或分类显示。	可选
`icon`	`IconImageType`	链接前的图标，支持任意 iconify 图标，支持深浅色模式。如：`{ light: 'solar:book-bold', dark: 'solar:book-bold' }`。优先级高于`image`。	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，也支持深浅色分别设置。如：`{ light: '#666', dark: '#ccc' }` 或 `'rgba(255, 87, 51, 1)'`。	可选
`image`	`IconImageType`	链接前的图片，支持普通图片地址或 `{ light, dark }` 模式。例如：`'https://example.com/icon.webp'` 或 `{ light: 'xxx-light.svg', dark: 'xxx-dark.svg' }`。	可选
`alt`	`string`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选
`rel`	`string`	链接的 `rel` 属性，常用于安全性或 SEO，如 `noopener noreferrer`。	可选

Pill

输入

Pill.vue

template

<!-- iconify 图标 -->
<Pill
  name="Iconify"
  link="https://iconify.design/"
  icon="line-md:iconify2-static"
  color="#1769AA"
  alt="iconify icon"
  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="https://i.theojs.cn/logo/alipay.svg"
  alt="alipay 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"
  rel="noopener noreferrer"
/>

输出

Iconify Vue Vercel Vite

支付宝

GitHub

参数说明

字段	类型	描述	是否必填
`name`	`string`	Pill 名称，作为显示文本。	必填
`link`	`string`	Pill 链接地址，可为外部 URL 或站内路径。	可选
`icon`	`IconImageType`	链接前的图标，支持任意 iconify 图标，支持深浅色模式。如：`{ light: 'solar:book-bold', dark: 'solar:book-bold' }`。优先级高于 image。	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，也支持深浅色分别设置。如：`{ light: '#666', dark: '#ccc' }` 或 `'rgba(255, 87, 51, 1)'`。	可选
`image`	`IconImageType`	链接前的图片，支持普通图片地址或 `{ light, dark }` 模式。例如：`'https://example.com/icon.webp'` 或 `{ light: 'xxx-light.svg', dark: 'xxx-dark.svg' }`。	可选
`alt`	`string`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选
`rel`	`string`	链接的 `rel` 属性，常用于安全性或 SEO，如 `noopener noreferrer`。	可选

Links

输入

Links.vue

vue

<Links
  :items="[
    // iconify 图标
    {
      name: 'iconify',
      link: 'https://iconify.design/',
      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',
      rel: 'noopener noreferrer'
    },
    // 图标 + 描述
    {
      name: 'VitePress',
      link: 'https://vitepress.dev/',
      image: 'https://vitepress.dev/vitepress-logo-large.webp',
      alt: 'vitepress logo',
      desc: 'VitePress 是一个由 Vue 团队开发的静态网站生成器，基于 Vite 和 Vue 3，专注于文档、博客和轻量网站的构建。它支持 Markdown 和 Vue 组件，提供简洁的默认主题和灵活的自定义能力，适合快速创建高性能的技术文档和个人博客。',
      rel: 'noopener noreferrer'
    },
    // 无图标，仅描述
    {
      name: 'Google',
      link: 'https://www.google.com',
      desc: '全球最大的搜索引擎',
      rel: 'noopener noreferrer'
    }
  ]"
/>

输出

VitePress 是一个由 Vue 团队开发的静态网站生成器，基于 Vite 和 Vue 3，专注于文档、博客和轻量网站的构建。它支持 Markdown 和 Vue 组件，提供简洁的默认主题和灵活的自定义能力，适合快速创建高性能的技术文档和个人博客。

Google

全球最大的搜索引擎

参数说明

字段	类型	描述	是否必填
`name`	`string`	DocLinks 名称，作为显示文本。	必填
`desc`	`string`	DocLinks 描述文本，用于补充说明信息。	可选
`link`	`string`	DocLinks 链接地址，支持站内路径或外部 URL。	必填
`icon`	`IconImageType`	链接前的图标，支持任意 iconify 图标，支持深浅色模式。如：`{ light: 'solar:book-bold', dark: 'solar:book-bold' }`。优先级高于image。	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，也支持深浅色分别设置。如：`{ light: '#666', dark: '#ccc' }` 或 `'rgba(255, 87, 51, 1)'`。	可选
`image`	`IconImageType`	链接前的图片，支持普通图片地址或 `{ light, dark }` 模式。例如：`'https://example.com/icon.webp'` 或 `{ light: 'xxx-light.svg', dark: 'xxx-dark.svg' }`。	可选
`alt`	`string`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选
`rel`	`string`	链接的 `rel` 属性，常用于安全性或 SEO，如 `noopener noreferrer`。	可选

BoxCube

输入

BoxCube.vue

vue

<BoxCube
  :items="[
    // 普通 iconify 图标
    {
      name: 'iconify',
      link: 'https://iconify.design/',
      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',
      rel: 'noopener noreferrer'
    },
    // 带描述的项
    {
      name: 'Vue.js',
      link: 'https://vuejs.org/',
      icon: 'devicon:vuejs',
      desc: 'v3.4.31',
      alt: 'vue icon',
      rel: 'noopener noreferrer'
    },
    // 带标签的项
    {
      name: 'Vue',
      link: 'https://vuejs.org/',
      icon: 'vscode-icons:file-type-vue',
      tag: 'new',
      alt: 'vue icon',
      rel: 'noopener noreferrer'
    }
  ]"
/>

输出

iconify Vercel Vite

支付宝

GitHub Vue.js

v3.4.31

Vue

new

参数说明

字段	类型	描述	是否必填
`name`	`string`	BoxCube 名称，作为显示文本。	必填
`link`	`string`	BoxCube 链接地址，支持站内路径或外部 URL。	必填
`desc`	`string`	BoxCube 描述文本，用于补充说明信息。	可选
`tag`	`string`	标签文本，用于标记或分类显示。	可选
`icon`	`IconImageType`	链接前的图标，支持任意 iconify 图标，支持深浅色模式。如：`{ light: 'solar:book-bold', dark: 'solar:book-bold' }`。优先级高于image。	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，也支持深浅色分别设置。如：`{ light: '#666', dark: '#ccc' }` 或 `'rgba(255, 87, 51, 1)'`。	可选
`image`	`IconImageType`	链接前的图片，支持普通图片地址或 `{ light, dark }` 模式。例如：`'https://example.com/icon.webp'` 或 `{ light: 'xxx-light.svg', dark: 'xxx-dark.svg' }`。	可选
`alt`	`string`	图标或图片的无障碍文本描述，建议提供以支持屏幕阅读器。	可选
`rel`	`string`	链接的 `rel` 属性，常用于安全性或 SEO，如 `noopener noreferrer`。	可选

链接卡片组件 ​

引入组件 ​

Box ​

参数说明 ​

Pill ​

参数说明 ​

Links ​

参数说明 ​

BoxCube ​

参数说明 ​

预览:

链接卡片组件

引入组件

Box

参数说明

Pill

参数说明

Links

参数说明

BoxCube

参数说明