侧边栏链接组件 - DocAsideLogo

侧边栏 - 效果图

侧边栏 - 效果图

创建数据

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

点开查看

AsideData.ts

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

export const Aside_Data: AsideItem = [
  {
    link: 'https://example.com/',
    image: 'https://example.com/icon.webp',
    promo: '活动标题',
    info1: '简介1',
    info2: '简介2'
  },
  {
    link: 'https://example.com/',
    image: 'https://example.com/icon.webp',
    name: '标题',
    hide1: '隐藏信息1',
    hide2: '隐藏信息2'
  },
  {
    link: 'https://example.com/',
    icon: 'twemoji:red-heart',
    name: '使用iconify图标'
  },
  {
    link: 'https://example.com/',
    icon: { light: 'simple-icons:netflix', dark: 'simple-icons:youtube' },
    color: { light: '#E50914', dark: '#FF0000' },
    name: 'iconify图标的 light/dark 模式'
  },
  {
    link: 'https://xx.theojs.cn/',
    image: {
      light: 'https://i.theojs.cn/logo/github.svg',
      dark: 'https://i.theojs.cn/logo/github-dark.svg'
    },
    name: '图片的 light/dark 模式'
  }
]

或者支持 i18n

点开查看

AsideData_i18n.ts

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

export const Aside_Data: AsideItem = {
  i18n: {
    root: [
      {
        link: 'https://example.com/',
        image: 'https://example.com/icon.webp',
        promo: '活动标题',
        info1: '简介1',
        info2: '简介2'
      }
      // ...其他项省略
    ],
    en: [
      {
        link: 'https://example.com/',
        image: 'https://example.com/icon.webp',
        promo: 'Promotion Title',
        info1: 'Introduction 1',
        info2: 'Introduction 2'
      }
      // ...其他项省略
    ]
  }
}

引入组件

.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 })
    }) 
  } 
}

数据接口说明

Promo

字段	类型	描述	是否必填
promo	string	活动标题，例如："限时折扣"。	必填
link	LinkType	跳转链接，支持外部或内部地址。	必填
icon	IconImageType	图标（支持 iconify，或深浅模式图标）。	可选
color	IconImageType	图标颜色（支持纯色字符串或 { light, dark } 格式）。	可选
image	IconImageType	图片资源（支持普通地址或 { light, dark } 图像）。	可选
info1	string	附加信息 1，例如："新用户立减 5 元"。	可选
info2	string	附加信息 2，例如："优惠截止至 6 月 30 日"。	可选
alt	AltType	图片或图标的替代文本，有助于无障碍访问。	可选
rel	RelType	链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。	可选

Normal

字段	类型	描述	是否必填
name	string	显示名称，例如："哔哩哔哩"。	必填
link	LinkType	跳转链接，支持外部或内部地址。	必填
icon	IconImageType	图标（支持 iconify，或深浅模式图标）。	可选
color	IconImageType	图标颜色（支持纯色字符串或 { light, dark } 格式）。	可选
image	IconImageType	图片资源（支持普通地址或 { light, dark } 图像）。	可选
hide1	string	隐藏信息 1，悬停时显示。例如："仅限中国大陆用户"。	可选
hide2	string	隐藏信息 2，用于补充额外提示。例如："每日限量 500 名"。	可选
alt	AltType	图片或图标的替代文本，有助于无障碍访问。	可选
rel	RelType	链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。	可选

AsidePromo

字段	类型	描述	是否必填
...	同 Promo 接口	同上，字段不再赘述。	-
i18n	Partial<Record<string, Omit<AsidePromo, 'i18n'>>>	可选的多语言翻译字段（键为语言代码，如 zh、en），排除自身递归结构。	可选

AsideNormal

字段	类型	描述	是否必填
...	同 Normal 接口	同上，字段不再赘述。	-
i18n	Partial<Record<string, Omit<AsideNormal, 'i18n'>>>	可选的多语言翻译字段（键为语言代码，如 zh、en），排除自身递归结构。	可选

AsideAll

类型	描述
AsidePromo	表示带有推广性质的活动类型，含 promo、info1 等字段。
AsideNormal	表示普通展示项，仅有 name、link 等基本信息字段。

AsideItem

结构形式	类型	描述
单语言结构	AsideAll[]	直接使用 AsidePromo 或 AsideNormal 组成的数组。
多语言结构	{ i18n: Record<string, AsideAll[]> }	使用 i18n 包裹的对象，不同语言对应不同数组，如 { i18n: { root: [], en: [] } }。

AsideDataWrapper

类型	描述
AsideAll[]	单语言使用方式，数组形式展示所有项目。
{ i18n: Record<string, AsideAll[]> }	多语言支持方式，每种语言对应一个 AsideAll[]，用于完整切换语言场景。