首页公告栏 - 效果图

引入组件

// .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: '<i class="fas fa-bolt" style="color: #63E6BE;"></i> 快速开始 <p>pnpm add @theojs/lumen</p>'
    link: /guide/getting-started
    target: _blank
---