快速开始

安装

你可以通过以下三种包管理器安装 @theojs/lumen 插件，选择你熟悉的方式即可

pnpm

pnpm add @theojs/lumen

npm

npm install @theojs/lumen

yarn

yarn add @theojs/lumen

最小配置

在 .vitepress/theme/index.ts 中继承 VitePress 默认主题、导入 Lumen 样式，并注册需要使用的组件：

.vitepress/theme/index.ts

import type { EnhanceAppContext } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { Pill } from '@theojs/lumen'
import '@theojs/lumen/style'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }: EnhanceAppContext) {
    app.component('Pill', Pill)
  }
}

注册后即可在任意 Markdown 页面中使用：

<Pill icon="simple-icons:vitepress" name="VitePress" link="https://vitepress.dev/" />

仅传入可信内容

部分组件的 name、desc、title、label 等字段以及 IconType.svg 会作为 HTML 渲染。请只传入可信的静态配置；若内容来自用户或外部接口，请先进行安全过滤，避免 XSS 风险。

主要功能模块导航

以下是 @theojs/lumen 插件的核心功能模块入口，点击即可查看详细配置和用法

导入主题首页公告栏首页下划线页脚配置侧边栏链接链接卡片图片描述站点统计复制按钮