页脚组件 - HomeFooter




创建数据
在.vitepress
目录下新建data/footerData.ts
文件,并添加以下内容:
点开查看
FooterData.ts
ts
import type { FooterData } from '@theojs/lumen'
export const Footer_Data: FooterData = {
beian: {
showIcon: true,
icp: {
number: '粤ICP备12345678号',
icon: {
light: 'fluent:globe-shield-48-filled',
dark: 'fluent:globe-shield-48-filled',
color: {
light: 'rgba(20, 150, 255, 1)',
dark: 'rgba(100, 200, 255, 1)'
}
},
alt: 'ICP 备案图标',
rel: 'noopener noreferrer'
},
police: {
number: '粤公网安备12345678号',
icon: {
light: 'fluent:shield-checkmark-48-filled',
dark: 'fluent:shield-checkmark-48-filled',
color: {
light: 'rgba(20, 255, 150, 1)',
dark: 'rgba(100, 255, 200, 1)'
}
},
alt: '公安备案图标',
rel: 'noopener noreferrer'
}
},
author: {
name: 'Theo',
link: 'https://theojs.cn',
icon: {
light: 'mdi:copyright',
dark: 'mdi:copyright',
color: {
light: '#999',
dark: '#ccc'
}
},
alt: '版权图标',
rel: 'noopener noreferrer'
},
group: [
{
title: '外部链接',
icon: {
light: 'bx:link',
dark: 'bx:link',
color: {
light: 'rgba(255, 87, 51, 1)',
dark: 'rgba(255, 130, 100, 1)'
}
},
links: [
{
name: '示例1',
link: 'https://example1.com',
icon: {
light: 'solar:book-bold',
dark: 'solar:book-bold',
color: {
light: 'rgba(200, 100, 50, 1)',
dark: 'rgba(255, 150, 100, 1)'
}
},
alt: '示例1图标',
rel: 'noopener noreferrer'
},
{
name: '示例2',
link: 'https://example2.com'
// icon 和 color 可省略
}
]
},
{
title: '内部链接',
icon: {
light: 'bx:link',
dark: 'bx:link',
color: {
light: 'rgba(255, 87, 51, 1)',
dark: 'rgba(255, 130, 100, 1)'
}
},
links: [
{
name: '示例1',
link: '/docs',
icon: {
light: 'solar:book-bold',
dark: 'solar:book-bold',
color: {
light: 'rgba(200, 100, 50, 1)',
dark: 'rgba(255, 150, 100, 1)'
}
},
alt: '文档链接图标',
rel: 'noopener noreferrer'
},
{
name: '示例2',
link: '/page'
// icon 和 color 可省略
}
]
}
]
}
或者支持 i18n
点开查看
FooterData_i18n.ts
ts
import type { FooterData } from '@theojs/lumen'
export const Footer_Data: FooterData = {
i18n: {
root: {
beian: {
showIcon: true,
icp: {
number: '粤ICP备12345678号',
icon: {
light: 'fluent:globe-shield-48-filled',
dark: 'fluent:globe-shield-48-filled',
color: {
light: 'rgba(20, 150, 255, 1)',
dark: 'rgba(100, 200, 255, 1)'
}
},
alt: 'ICP 备案图标',
rel: 'noopener noreferrer'
}
}
// ...其他项省略
},
en: {
beian: {
showIcon: true,
icp: {
number: 'ICP 12345678',
icon: {
light: 'fluent:globe-shield-48-filled',
dark: 'fluent:globe-shield-48-filled',
color: {
light: 'rgba(20, 150, 255, 1)',
dark: 'rgba(100, 200, 255, 1)'
}
},
alt: 'ICP License Icon',
rel: 'noopener noreferrer'
}
}
// ...其他项省略
}
}
}
引入组件
TIP
.. /data/footerData
可替换为存放数据的路径
.vitepress/theme/index.ts
ts
import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import { HomeFooter } from '@theojs/lumen'
import { Footer_Data } from '../data/footerData'
export default {
extends: DefaultTheme,
Layout() {
return h(DefaultTheme.Layout, null, {
'layout-bottom': () => h(HomeFooter, { Footer_Data })
})
}
}
数据接口说明
FooterData
接口
FooterData
是所有组件的顶层接口,包含了以下几个字段:
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
i18n | Record<string, Partial<Omit<FooterData, 'i18n'>>> | 多语言数据配置 | 可选 |
group | Group[] | 链接分组数组,支持多个分组配置,每个分组包含标题、图标、链接等信息。 | 可选 |
beian | Beian | ICP 备案与公安备案配置,用于展示网站备案合规信息。 | 可选 |
author | Author | 作者信息展示,包含作者名称、链接与版权图标,常用于页脚归属标识。 | 可选 |
noIcon | boolean | 是否隐藏所有外部链接的外链图标 | 可选 |
Group
接口
Group
接口定义了一个链接分组,包括分组的图标、标题及其下的多个链接。
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
noIcon | boolean | 是否隐藏该分组下所有外部链接的外链图标 | 可选 |
icon | IconType | 图标配置,支持字符串或对象,支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
title | string | 分组标题,将展示为该链接组的名称。 | 必填 |
links | Link[] | 分组内的链接数组,参考下方 Link 接口。 | 必填 |
alt | AltType | 图标的无障碍文本描述,供屏幕阅读器使用,建议提供。 | 可选 |
Link
接口
Link
接口用于描述具体的链接信息,包括链接的图标、样式、名称、地址及其打开方式。
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
noIcon | boolean | 是否隐藏该链接的外部链接图标 | 可选 |
icon | IconType | 图标配置,支持字符串或对象,支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
name | string | 链接显示的文本。 | 必填 |
link | string | 链接地址,可为外部 URL 或内部路径,如 /docs 。 | 必填 |
rel | RelType | 设置链接的 rel 属性,常见如 noopener noreferrer ,用于安全性或 SEO 考虑。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断:外部链接默认在新标签页打开(_blank ),内部链接无默认值(即当前页打开 )。可自定义覆盖该行为。 | 可选 |
alt | AltType | 图标的无障碍文本描述,供屏幕阅读器使用,建议提供。 | 可选 |
Beian
接口
Beian
接口用于表示备案信息,包括 ICP 备案号、公安备案号以及是否显示备案图标。
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
icp | Icp | ICP 备案信息配置。 | 可选 |
police | Police | 公安备案信息配置。 | 可选 |
showIcon | boolean | 是否显示备案图标,默认值为 false ,开启后将渲染 iconify 图标。 | 可选 |
Icp
接口
Icp
接口表示 ICP 备案信息。
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
number | string | ICP 备案号文本,例如 粤ICP备88888888号 ,也可用于其他类似用途的自定义文本。 | 可选 |
link | LinkType | 指向工信部网站备案系统的链接,默认为:https://beian.miit.gov.cn/ ,支持自定义 | 可选 |
icon | IconType | 图标配置,支持字符串或对象,支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
alt | AltType | 图标的无障碍文本描述,供屏幕阅读器使用,建议提供。 | 可选 |
rel | RelType | 设置链接的 rel 属性,常见如 noopener noreferrer ,用于安全性或 SEO 考虑。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断:外部链接默认在新标签页打开(_blank ),内部链接无默认值(即当前页打开 )。可自定义覆盖该行为。 | 可选 |
Police
接口
Police
接口表示公安备案信息。
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
number | string | 公安备案号文本,例如 粤公网安备 88888888888888 号 ,用于展示公安机关备案信息,也可用于其他类似用途的自定义文本。 | 可选 |
link | LinkType | 公安备案号对应的查询链接,默认为:https://beian.mps.gov.cn/ ,支持自定义 | 可选 |
icon | IconType | 图标配置,支持字符串或对象,支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
alt | AltType | 图标的无障碍文本描述,供屏幕阅读器使用,建议提供。 | 可选 |
rel | RelType | 设置链接的 rel 属性,常见如 noopener noreferrer ,用于安全性或 SEO 考虑。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断:外部链接默认在新标签页打开(_blank ),内部链接无默认值(即当前页打开 )。可自定义覆盖该行为。 | 可选 |
Author
接口
Author
接口表示作者信息,包括作者姓名和链接。
字段 | 类型 | 描述 | 是否必填 |
---|---|---|---|
name | string | 作者或站点拥有者的名称,将展示在页脚中。 | 可选 |
link | LinkType | 作者链接地址,若未填写,则默认拼接为 https://github.com/${name} 。 | 可选 |
rel | RelType | 设置链接的 rel 属性,常见如 noopener noreferrer ,用于安全性或 SEO 考虑。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断:外部链接默认在新标签页打开(_blank ),内部链接无默认值(即当前页打开 )。可自定义覆盖该行为。 | 可选 |
text | string | 版权声明尾句,显示在作者名称后。可自定义该文本,默认值为 All Rights Reserved. 。 | 可选 |
icon | IconType | 图标配置,支持字符串或对象,支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
alt | AltType | 图标的无障碍文本描述,供屏幕阅读器使用,建议提供。 | 可选 |
IconType
ts
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 }