---
url: /guide/footer.md
description: >-
了解如何使用 @theojs/lumen 插件的 Footer 组件自定义 VitePress
网站的页脚。本指南包含数据配置（链接分组、备案信息、作者）和组件集成步骤，助你打造个性化且信息丰富的网站底部。
---
# 页脚组件 - Footer
::: info
`Footer` 默认只在 `layout: home` 的页面渲染。也可通过 frontmatter 的 `isHome: true` 显式启用；`isHome: false` 会覆盖首页布局判断并关闭显示。
:::
## 创建数据 (点击打开查看)
::: details 在`.vitepress`目录下新建`data/FooterData.ts````ts \[.vitepress/data/FooterData.ts]
import type { FooterData } from '@theojs/lumen'
export const Footer_Data: FooterData = {
beian: {
showIcon: true,
icp: {
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)' }
},
number: '粤ICP备12345678号',
rel: 'noopener noreferrer'
},
police: {
image: {
light: 'https://example.com/light-image.png',
dark: 'https://example.com/dark-image.png',
crop: true
},
number: '粤公网安备12345678号',
rel: 'noopener noreferrer'
}
},
author: {
icon: {
light: 'mdi:copyright',
dark: 'mdi:copyright',
color: { light: '#999', dark: '#ccc' }
},
name: 'Theo',
link: 'https://theojs.net',
rel: 'noopener noreferrer'
},
group: [
{
icon: {
svg: ``
},
title: '外部链接',
links: [
{
icon: {
svg: {
light: ``,
dark: ``
}
},
name: '示例1',
link: 'https://example1.com',
rel: 'noopener noreferrer'
},
{
name: '示例2',
link: 'https://example2.com'
// icon 和 color 可省略
}
]
},
{
icon: {
light: 'bx:link',
dark: 'bx:link',
color: { light: 'rgba(255, 87, 51, 1)', dark: 'rgba(255, 130, 100, 1)' }
},
title: '内部链接',
links: [
{
icon: {
light: 'solar:book-bold',
dark: 'solar:book-bold',
color: { light: 'rgba(200, 100, 50, 1)', dark: 'rgba(255, 150, 100, 1)' }
},
name: '示例1',
link: '/docs',
rel: 'noopener noreferrer'
},
{
name: '示例2',
link: '/page'
// icon 和 color 可省略
}
]
}
]
}
```
::: details 或者支持 `i18n````ts \[.vitepress/data/FooterData\_i18n.ts]
import type { FooterData } from '@theojs/lumen'
export const Footer_Data: FooterData = {
i18n: {
root: {
beian: {
showIcon: true,
icp: {
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)' }
},
number: '粤ICP备12345678号',
rel: 'noopener noreferrer'
}
}
// ...其他项省略
},
en: {
beian: {
showIcon: true,
icp: {
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)' }
},
number: 'ICP 12345678',
rel: 'noopener noreferrer'
}
}
// ...其他项省略
}
}
}
```
::: warning
匹配到当前语言后，语言对象会整体替换根级 Footer 数据，不会进行深度合并。请在每个语言对象中完整填写需要展示的 `group`、`beian`、`author` 和 `noIcon` 字段。
:::
## 引入组件
::: tip
`../data/FooterData` 可替换为实际存放数据的路径。
:::
```ts [.vitepress/theme/index.ts]
import DefaultTheme from 'vitepress/theme'
// [!code ++]
import { h } from 'vue'
// [!code ++]
import { Footer } from '@theojs/lumen'
// [!code ++]
import { Footer_Data } from '../data/FooterData'
export default {
extends: DefaultTheme,
// [!code ++]
Layout() {
// [!code ++]
return h(DefaultTheme.Layout, null, {
// [!code ++]
'layout-bottom': () => h(Footer, { Footer_Data })
}) // [!code ++]
} // [!code ++]
}
```
## 数据接口说明
### `FooterData` 接口
`FooterData` 是 Footer 组件的顶层数据接口，包含以下字段：
| 字段 | 类型 | 描述 | 是否必填 |
| -------- | --------------------------------------------------- | -------------------------------------------------------------------- | --------------------- |
| `i18n` | `Record>>` | 多语言数据配置 | |
| `group` | `Group[]` | 链接分组数组，支持多个分组配置，每个分组包含标题、图标、链接等信息。 | |
| `beian` | `Beian` | ICP 备案与公安备案配置，用于展示网站备案合规信息。 | |
| `author` | `Author` | 作者信息展示，包含作者名称、链接与版权图标，常用于页脚归属标识。 | |
| `noIcon` | `boolean` | 是否隐藏所有外部链接的外链图标 | |
### `Group` 接口
`Group` 接口定义了一个链接分组，包括分组的图标、标题及其下的多个链接。
| 字段 | 类型 | 描述 | 是否必填 |
| -------- | ----------- | -------------------------------------------------------------------------------------------------------- | --------------------- |
| `noIcon` | `boolean` | 是否隐藏该分组下所有外部链接的外链图标 | |
| `icon` | `IconType` | 图标配置，支持字符串或对象及深浅色模式。建议与 `image` 二选一；同时设置时优先显示 `icon`。详情查看 [IconType](#IconType) | |
| `image` | `ImageType` | 图片配置，支持字符串或对象及深浅色模式。建议与 `icon` 二选一；同时设置时优先显示 `icon`。详情查看 [ImageType](#ImageType) | |
| `title` | `string` | 分组标题，将展示为该链接组的名称。 | |
| `links` | `Link[]` | 分组内的链接数组，参考下方 [Link 接口](#link-接口)。 | |
### `Link` 接口
`Link` 接口用于描述具体的链接信息，包括链接的图标、样式、名称、地址及其打开方式。
| 字段 | 类型 | 描述 | 是否必填 |
| -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `noIcon` | `boolean` | 是否隐藏该链接的外部链接图标 | |
| `icon` | `IconType` | 图标配置，支持字符串或对象及深浅色模式。建议与 `image` 二选一；同时设置时优先显示 `icon`。详情查看 [IconType](#IconType) | |
| `image` | `ImageType` | 图片配置，支持字符串或对象及深浅色模式。建议与 `icon` 二选一；同时设置时优先显示 `icon`。详情查看 [ImageType](#ImageType) | |
| `name` | `string` | 链接显示的文本。 | |
| `link` | `LinkType` | 链接地址，可为外部 URL 或内部路径，如 `/docs`。 | |
| `rel` | `RelType` | 设置链接的 `rel` 属性，常见如 `noopener noreferrer`，用于安全性或 SEO 考虑。 | |
| `target` | `TargetType` | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。 | |
### `Beian` 接口
`Beian` 接口用于表示备案信息，包括 ICP 备案号、公安备案号以及是否显示备案图标。
| 字段 | 类型 | 描述 | 是否必填 |
| ---------- | --------- | -------------------------------------------------------------------- | --------------------- |
| `icp` | `Icp` | ICP 备案信息配置。 | |
| `police` | `Police` | 公安备案信息配置。 | |
| `showIcon` | `boolean` | 是否显示ICP和公安备案图标，默认值为 `false`，开启后将渲染图标/图片。 | |
#### `Icp` 接口
`Icp` 接口表示 ICP 备案信息。
| 字段 | 类型 | 描述 | 是否必填 |
| -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `number` | `string` | ICP 备案号文本，例如 `粤ICP备88888888号`，也可用于其他类似用途的自定义文本。 | |
| `link` | `LinkType` | 指向工信部网站备案系统的链接，默认为:`https://beian.miit.gov.cn/`，支持自定义 | |
| `icon` | `IconType` | ICP 图标，仅在 `showIcon` 为 `true` 时显示。建议与 `image` 二选一；同时设置时优先显示 `icon`，两者都未设置时显示默认图标。详情查看 [IconType](#IconType) | |
| `image` | `ImageType` | ICP 图片，仅在 `showIcon` 为 `true` 时显示。建议与 `icon` 二选一；同时设置时优先显示 `icon`，两者都未设置时显示默认图标。详情查看 [ImageType](#ImageType) | |
| `rel` | `RelType` | 设置链接的 `rel` 属性，未设置时组件默认为 `nofollow`。 | |
| `target` | `TargetType` | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。 | |
#### `Police` 接口
`Police` 接口表示公安备案信息。
| 字段 | 类型 | 描述 | 是否必填 |
| -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `number` | `string` | 公安备案号文本，例如 `粤公网安备 88888888888888 号`，用于展示公安机关备案信息，也可用于其他类似用途的自定义文本。 | |
| `link` | `LinkType` | 公安备案号对应的查询链接，默认为:`https://beian.mps.gov.cn/`，支持自定义 | |
| `icon` | `IconType` | 公安备案图标，仅在 `showIcon` 为 `true` 时显示。建议与 `image` 二选一；同时设置时优先显示 `icon`，两者都未设置时显示默认图标。详情查看 [IconType](#IconType) | |
| `image` | `ImageType` | 公安备案图片，仅在 `showIcon` 为 `true` 时显示。建议与 `icon` 二选一；同时设置时优先显示 `icon`，两者都未设置时显示默认图标。详情查看 [ImageType](#ImageType) | |
| `rel` | `RelType` | 设置链接的 `rel` 属性，常见如 `noopener noreferrer`，用于安全性或 SEO 考虑。 | |
| `target` | `TargetType` | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。 | |
### `Author` 接口
`Author` 接口表示作者信息，包括作者姓名和链接。
| 字段 | 类型 | 描述 | 是否必填 |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `icon` | `IconType` | 版权图标。建议与 `image` 二选一；同时设置时优先显示 `icon`，两者都未设置时显示默认版权图标。详情查看 [IconType](#IconType) | |
| `image` | `ImageType` | 版权图片。建议与 `icon` 二选一；同时设置时优先显示 `icon`，两者都未设置时显示默认版权图标。详情查看 [ImageType](#ImageType) | |
| `startYear` | `number` | 版权的起始年份，表示作者首次拥有版权的年份或版权开始生效的年份。如果未提供，则不显示年份范围。 | |
| `name` | `string` | 作者或站点拥有者的名称，将展示在页脚中。 | |
| `link` | `LinkType` | 作者链接地址，若未填写，则默认拼接为 `https://github.com/${name}`。 | |
| `rel` | `RelType` | 设置链接的 `rel` 属性，常见如 `noopener noreferrer`，用于安全性或 SEO 考虑。 | |
| `target` | `TargetType` | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（`_blank`），内部链接无默认值（`即当前页打开`）。可自定义覆盖该行为。 | |
| `text` | `string` | 版权声明尾句，显示在作者名称后。可自定义该文本，默认值为 `All Rights Reserved.`。 | |
## IconType
```ts
export type IconMode = string | { light: string; dark: string }
export type IconType =
| string
| { icon: string; color?: IconMode }
| { light: string; dark: string; color?: IconMode }
| { svg: IconMode }
```
## ImageType
```ts
export type ImageType =
| string
| { src: string; crop?: boolean; [prop: string]: any }
| { light: string; dark: string; crop?: boolean; [prop: string]: any }
```
## 其他公共类型
```ts
export type SizeType = null | string | number
export type LinkType = string | undefined
export type RelType = string | undefined
export type TargetType = string | undefined
```