首页公告栏 - 效果图

引入组件

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import { h } from 'vue'

import { Announcement } from '@theojs/lumen'

export default {
  extends: DefaultTheme,
  Layout() { 

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

配置公告栏

.vitepress/index.md

---
layout: home

hero:
  name: Lumen
  text: 'Enhanced '
  textsuffix: 'Theme'
  tagline: ✨ 集成 Vue 功能组件和主题美化的 VitePress 插件
  prelink:
    title: '🎉 活动不停歇，青云梯四周年双旦特惠'
    content: '· 月/季/半年付85折 优惠码<span style="color: var(--vp-c-brand-3); font-weight: bold;"> qyt85 </span></br>· 年付以及年付以上8折 优惠码<span style="color: var(--vp-c-brand-3); font-weight: bold;"> qyt80</span></br>· 年付8折/2年付7折/3年付6折 配合优惠码折上折，最高可达<span style="color: var(--vp-c-brand-3); font-weight: bold;"> 48 </span>折'
    date: '2025年1月7日23时59分'
    dateIcon: 'mdi:calendar-star'
    dateText: '活动截止日期'
    link: https://qytcc01.qingyunti.pro/register?aff=jjgD79Jd
---

复制安装命令

.vitepress/index.md

---
layout: home

hero:
  name: Lumen
  text: 'Enhanced '
  textsuffix: 'Theme'
  tagline: ✨ 集成 Vue 功能组件和主题美化的 VitePress 插件
  prelink:
    copy: true
    install: 'pnpm add @theojs/lumen'
    title: '<iconify-icon icon="fa6-solid:bolt" style="margin-right:0.25rem;color:#63E6BE;"></iconify-icon> 快速开始'
    content: '<span style="color: var(--vp-c-brand-3); font-weight: bold;">pnpm add @theojs/lumen</span>'
---

数据接口说明

字段	类型	描述
link	string	可选 链接的 URL。
title	string	链接的标题。
content	string	可选 链接的内容。
date	string	可选 活动截止日期。
dateText	string	可选 活动截止内容。默认为 活动时间: 即日至;
dateIcon	string	可选 活动截止图标。默认为line-md:calendar。支持 iconify 图标
copy	boolean	可选 复制开关，默认为 false，设置为 true 时，点击链接将复制 install 字段中的内容，并且链接将无任何跳转行为
install	string	可选 复制的内容，当 copy 为 true 时，点击链接将复制该内容到剪贴板。