首页公告栏 - 效果图

引入组件

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import { Announcement } from '@theojs/lumen'
import { h } from 'vue'

export default {
  extends: DefaultTheme,
  Layout() { 
    return h(DefaultTheme.Layout, null, { 
      'home-hero-info-before': () => h(Announcement) 
    }) 
  } 
  ...
}

配置公告栏

修改index.md

---
layout: home

hero:
  name: Lumen
  text: 'Enhanced '
  textsuffix: 'Theme'
  tagline: ✨ 集成 Vue 功能组件和主题美化的 VitePress 插件
  prelink:
    title: '<iconify-icon icon="fa6-solid:bolt" style="margin-right:0.25rem;color:#63E6BE;"></iconify-icon> 快速开始 <p>pnpm add @theojs/lumen</p>'
    link: /guide/getting-started
    target: _blank
---

数据接口说明

字段	类型	描述
link	string	链接的 URL。
target	string	可选 链接的目标。
title	string	链接的标题。