侧边栏链接组件 - 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	跳转链接，支持外部或内部地址。	必填
rel	RelType	链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。	可选
target	TargetType	链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（_blank），内部链接无默认值（即当前页打开）。可自定义覆盖该行为。	可选
icon	IconType	图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType	可选
image	ImageType	图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType	可选
size	SizeType	控制图片或者图标的的尺寸 默认为 width="24" height="24"	可选
info1	string	附加信息 1，例如："新用户立减 5 元"。	可选
info2	string	附加信息 2，例如："优惠截止至 6 月 30 日"。	可选
alt	AltType	图片或图标的替代文本，有助于无障碍访问。	可选

Normal

字段	类型	描述	是否必填
name	string	显示名称，例如："哔哩哔哩"。	必填
link	LinkType	跳转链接，支持外部或内部地址。	必填
rel	RelType	链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。	可选
target	TargetType	链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（_blank），内部链接无默认值（即当前页打开）。可自定义覆盖该行为。	可选
icon	IconType	图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType	可选
image	ImageType	图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType	可选
size	SizeType	控制图片或者图标的的尺寸 默认为 width="24" height="24"	可选
hide1	string	隐藏信息 1，悬停时显示。例如："仅限中国大陆用户"。	可选
hide2	string	隐藏信息 2，用于补充额外提示。例如："每日限量 500 名"。	可选
alt	AltType	图片或图标的替代文本，有助于无障碍访问。	可选

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: [] } }。

IconType

export type IconImageMode = string | { light: string; dark: string }

export type IconType =
  | string
  | { icon: string; color?: IconImageMode; alt?: AltType }
  | { light: string; dark: string; color?: IconImageMode; alt?: AltType }

ImageType

export type ImageType =
  | string
  | { src: string; crop?: CropType; alt?: AltType }
  | { light: string; dark: string; crop?: CropType; alt?: AltType }