侧边栏 - 效果图

创建数据

在.vitepress目录下新建data/AsideData.ts文件，并添加以下内容：

// .vitepress/data/AsideData.ts

import type { AsideItem } from '@theojs/lumen'

export const Aside_Data: AsideItem[] = [
  {
    link: 'https://example.com/',
    icon: 'https://example.com/icon.png',
    activity: '活动标题',
    info1: '简介1',
    info2: '简介2' // info1/2 支持 `v-html`语法
  },
  {
    link: 'https://example.com/',
    icon: 'https://example.com/icon.png',
    name: '标题',
    hide1: '隐藏信息1',
    hide2: '隐藏信息2' // hide1/2 支持 `v-html`语法
  },
  {
    link: 'https://example.com/',
    icon: 'https://example.com/icon.png',
    name: '为我赞助'
  }
]

引入组件

//.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import { DocAsideLogo } from '@theojs/lumen'
import { Aside_Data } from '../data/AsideData'
export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      'aside-ads-before': () => h(DocAsideLogo, { Aside_Data }) 
    })
  }
 ...
}

数据接口说明

字段	类型	描述
link	string	链接地址
icon	string	图标地址
name	string	可选 名称
activity	string	可选 活动名称
hide1	string	可选 隐藏信息1
info1	string	可选 信息1
hide2	string	可选 隐藏信息2
info2	string	可选 信息2