首页公告栏组件 - Announcement

首页公告栏 - 效果图

首页公告栏 - 效果图

引入组件

.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: ✨ 专为 VitePress 打造的主题美化与 Vue 扩展组件库
  prelink: 
    title: '🎉 活动不停歇，青云梯四周年双旦特惠'
    content: '· 月/季/半年付85折 优惠码<span class="promo-text"> qyt85 </span></br>· 年付以及年付以上8折 优惠码<span class="promo-text"> qyt80</span></br>· 年付8折/2年付7折/3年付6折 配合优惠码折上折，最高可达<span class="promo-text"> 48 </span>折'
    date: '2025年1月7日23时59分'
    dateIcon: 'mdi:calendar-star'
    dateText: '活动截止日期'
    link: 'https://itheo.top/qyt'
---

复制安装命令

.vitepress/index.md

---
layout: home

hero:
  name: Lumen
  text: 'Enhanced '
  textsuffix: 'Theme'
  tagline: ✨ 专为 VitePress 打造的主题美化与 Vue 扩展组件库
  prelink:
    copy: true
    install: 'pnpm add @theojs/lumen'
    title: '<iconify-icon class="i-mr" icon="fa6-solid:bolt" style="color:#63E6BE"></iconify-icon> 快速开始'
    content: '<span class="promo-text">pnpm add @theojs/lumen</span>'
---

数据接口说明

字段	类型	描述	是否必填
link	string	链接地址，点击后跳转的目标 URL。	可选
title	string	链接显示的标题文本，突出展示的主要内容。	必填
content	string	链接下方的补充描述内容，可用于详细说明或附加信息。	可选
date	string	活动截止日期或相关时间信息，通常用于提示有效期限。	可选
dateText	string	活动时间的文字说明，默认为 活动时间: 即日至，可自定义显示文案。	可选
dateIcon	string	活动时间旁显示的图标，默认是日历图标（line-md:calendar），支持任意 iconify 图标。	可选
copy	boolean	是否启用点击复制功能。若设置为 true，点击链接时将复制 install 字段内容，且链接不进行跳转。	可选
install	string	复制到剪贴板的文本内容，仅在 copy 为 true 时生效。	可选
alt	string	图标的替代文本，用于无障碍和 SEO 优化。	可选
rel	string	链接的 rel 属性，用于控制链接的安全性和行为，如防止新窗口跳转时的安全风险（noopener）、避免搜索引擎跟踪（nofollow）等。	可选