Lumen v5.3.5

主题模式

引入组件 ​

.vitepress/theme/index.ts
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 ​

输入

vue
<Box
  :items="[
    // iconify图标
    {
      name: 'iconify',
      link: '#',
      icon: 'line-md:iconify2-static',
      color: '#1769AA'
    },
    //深浅模式的iconify图标
    {
      name: 'Vercel',
      link: '#',
      icon: { light: 'ion:logo-vercel', dark: 'ion:logo-vercel' },
      color: { light: '#000000', dark: '#FFFFFF' }
    },
    {
      name: 'Vite',
      link: '#',
      icon: { light: 'skill-icons:vite-light', dark: 'skill-icons:vite-dark' }
    },
    //图片
    {
      name: '支付宝',
      link: 'https://i.theojs.cn/docs/202405201752089.webp',
      image: 'https://i.theojs.cn/logo/alipay.svg'
    },
    //深浅模式的图片
    {
      name: 'GitHub',
      link: '#',
      image: {
        light: 'https://i.theojs.cn/logo/github.svg',
        dark: 'https://i.theojs.cn/logo/github-dark.svg'
      }
    },
    //标签
    { name: 'Vue', link: '#', icon: 'vscode-icons:file-type-vue', tag: 'new' }
  ]"
/>

输出

iconify

Vercel

Vite

支付宝

GitHub

Vue

new

参数说明 ​

字段类型描述
namestringDocBox 名称。
linkstringDocBox 链接。
tagstring可选 DocBox 标签。
colorstring | { light: string; dark: string }可选 图标的颜色。 也可以是包含 light 和 dark 属性的对象
iconstring | { light: string; dark: string }可选 图标名称，支持

iconify 图标

可为单一图标名称或包含 light 和 dark 模式的对象
imagestring | { light: string; dark: string }可选 图片地址或包含 light 和 dark 模式的对象。

Pill ​

输入

template
<!-- iconify图标 -->
<Pill name="Iconify" link="#" icon="line-md:iconify2-static" color="#1769AA" />
<Pill name="Vue" link="#" icon="vscode-icons:file-type-vue" />

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

<!-- 图片 -->
<Pill
  name="支付宝"
  link="https://i.theojs.cn/docs/202405201752089.webp"
  image="https://i.theojs.cn/logo/alipay.svg"
/>

<!-- 深浅模式的图片 -->
<Pill
  name="GitHub"
  link="#"
  :image="{
    light: 'https://i.theojs.cn/logo/github.svg',
    dark: 'https://i.theojs.cn/logo/github-dark.svg'
  }"
/>

输出

Iconify

Vue

Vercel

Vite

支付宝

GitHub

参数说明 ​

字段类型描述
namestringPill 名称。
linkstringPill 链接。
colorstring | { light: string; dark: string }可选 图标的颜色。也可以是包含 light 和 dark 属性的对象
iconstring | { light: string; dark: string }可选 图标名称，支持

iconify 图标

可为单一图标名称或包含 light 和 dark 模式的对象
imagestring | { light: string; dark: string }可选 图片地址或包含 light 和 dark 模式的对象。

输入

vue
<Links
  :items="[
    // iconify图标
    {
      name: 'iconify',
      link: '#',
      icon: 'line-md:iconify2-static',
      color: '#1769AA'
    },
    //深浅模式的iconify图标
    {
      name: 'Vercel',
      link: '#',
      icon: { light: 'ion:logo-vercel', dark: 'ion:logo-vercel' },
      color: { light: '#000000', dark: '#FFFFFF' }
    },
    {
      name: 'Vite',
      link: '#',
      icon: { light: 'skill-icons:vite-dark', dark: 'skill-icons:vite-light' }
    },
    //图片
    {
      name: '支付宝',
      link: 'https://i.theojs.cn/docs/202405201752089.webp',
      image: 'https://i.theojs.cn/logo/alipay.svg'
    },
    //深浅模式的图片
    {
      name: 'GitHub',
      link: '#',
      image: {
        light: 'https://i.theojs.cn/logo/github.svg',
        dark: 'https://i.theojs.cn/logo/github-dark.svg'
      }
    },
    // 使用图标 + 描述
    {
      name: 'VitePress',
      link: 'https://www.google.com',
      image: 'https://vitepress.dev/vitepress-logo-large.webp',
      desc: 'VitePress 是一个由 Vue 团队开发的静态网站生成器，基于 Vite 和 Vue 3，专注于文档、博客和轻量网站的构建。它支持 Markdown 和 Vue 组件，提供简洁的默认主题和灵活的自定义能力，适合快速创建高性能的技术文档和个人博客。'
    },
    // 不使用图标 + 描述
    {
      name: 'Google',
      link: 'https://www.google.com',
      desc: '全球最大的搜索引擎'
    }
  ]"
/>

输出

iconify

Vercel

Vite

支付宝

GitHub

VitePress

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

Google

全球最大的搜索引擎

参数说明 ​

字段类型描述
namestringDocLinks 名称。
descstring可选 DocLinks 描述信息。
linkstringDocLinks 链接。
colorstring | { light: string; dark: string }可选 图标的颜色。也可以是包含 light 和 dark 属性的对象
iconstring | { light: string; dark: string }可选 图标名称，支持

iconify 图标

可为单一图标名称或包含 light 和 dark 模式的对象
imagestring | { light: string; dark: string }可选 支持单一图片地址或包含 light 和 dark 两种模式的对象。

BoxCube ​

输入

vue
<BoxCube
  :items="[
    //iconify图标
    {
      name: 'iconify',
      link: '#',
      icon: 'line-md:iconify2-static',
      color: '#1769AA'
    },
    //深浅模式的iconify图标
    {
      name: 'Vercel',
      link: '#',
      icon: { light: 'ion:logo-vercel', dark: 'ion:logo-vercel' },
      color: { light: '#000000', dark: '#FFFFFF' }
    },
    {
      name: 'Vite',
      link: '#',
      icon: { light: 'skill-icons:vite-dark', dark: 'skill-icons:vite-light' }
    },
    //图片
    {
      name: '支付宝',
      link: 'https://i.theojs.cn/docs/202405201752089.webp',
      image: 'https://i.theojs.cn/logo/alipay.svg'
    },
    //深浅模式的图片
    {
      name: 'GitHub',
      link: '#',
      image: {
        light: 'https://i.theojs.cn/logo/github.svg',
        dark: 'https://i.theojs.cn/logo/github-dark.svg'
      }
    },
    //描述
    { name: 'Vue.js', link: '#', icon: 'devicon:vuejs', desc: 'v3.4.31' },
    //标签
    {
      name: 'Typescript',
      link: '#',
      icon: 'logos:typescript-icon',
      tag: 'new'
    }
  ]"
/>

输出

iconify

Vercel

Vite

支付宝

GitHub

Vue.js

v3.4.31

Typescript

new

参数说明 ​

字段类型描述
namestringBoxCube 名称。
linkstringBoxCube 链接。
descstring可选 BoxCube 描述。
tagstring可选 BoxCube 标签。
colorstring | { light: string; dark: string }可选 图标的颜色。也可以是包含 light 和 dark 属性的对象
iconstring | { light: string; dark: string }可选 图标名称，支持

iconify 图标

可为单一图标名称或包含 light 和 dark 模式的对象
imagestring | { light: string; dark: string }可选 支持单一图片地址或包含 light 和 dark 模式的对象。