页脚组件 - Footer

创建数据

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

点开查看

FooterData.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

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

import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import { Footer } from '@theojs/lumen'
import { Footer_Data } from '../data/footerData'

export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      'layout-bottom': () => h(Footer, { 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

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 }

页脚组件 - Footer ​

创建数据 ​

引入组件 ​

数据接口说明 ​

FooterData 接口 ​

Group 接口 ​

Link 接口 ​

Beian 接口 ​

Icp 接口 ​

Police 接口 ​

Author 接口 ​

IconType ​