首页下划线组件 - HomeUnderline

首页下划线 - 效果图

首页下划线 - 效果图

引入组件

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import { HomeUnderline } from '@theojs/lumen'

export default {
  extends: DefaultTheme,
  enhanceApp: ({ app }) => {
    app.component('Home', HomeUnderline)
  } 
}

使用示例

在首页的 Markdown 文件（如 .vitepress/index.md）中，通过设置 layout: home 使用首页布局，并在 hero 区域中配置标题文本，同时在页面内容中插入 <Home /> 组件渲染带有动态下划线效果的标题

.vitepress/index.md

---
layout: home

hero:
  name: Lumen
  text: Enhanced # 副标题文本前半部分，下划线会作用于这里
  textsuffix: Theme # 副标题文本后半部分
  tagline: ✨ 专为 VitePress 打造的主题美化与 Vue 扩展组件库
---
<Home />

接口数据说明

属性名	说明
text	副标题文本的前半部分（带下划线）
textsuffix	副标题文本的后半部分