首页公告栏 - 效果图

引入组件

// .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

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: 'Lumen'
  text: 'Enhanced '
  tagline: 用于VitePress主题美化和集成Vue功能组件
  prelink:
    title: '<i class="fa-solid fa-bolt" style="color: #63E6BE;"></i> 快速开始<div style="text-align: right; font-weight: bold;"><i class="fas fa-pnpm" style="color: #FFD43B;"></i>pnpm add @theojs/lumen</div>'
    link: /guide/getting-started
    target: _blank
---