首页下划线组件 - HomeUnderline


引入组件
.vitepress/theme/index.ts
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
yaml
---
layout: home
hero:
name: Lumen
text: Enhanced # 副标题文本前半部分,下划线会作用于这里
textsuffix: Theme # 副标题文本后半部分
tagline: ✨ 专为 VitePress 打造的主题美化与 Vue 扩展组件库
---
<Home />
接口数据说明
属性名 | 说明 |
---|---|
text | 副标题文本的前半部分(带下划线) |
textsuffix | 副标题文本的后半部分 |