页脚组件 - HomeFooter

创建数据

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

数据接口说明

IconImageType 类型说明

export type IconImageType = string | IconImageMode

export interface IconImageMode {
  /** 浅色模式下的图标和图片 */
  light: string
  /** 深色模式下的图标和图片 */
  dark: string
}

IconImageType 支持：

字符串形式（如 mdi:home）
对象形式，用于浅色和深色模式的图标或图片分别设置：

const icon: IconImageType = {
  light: 'mdi:home-outline',
  dark: 'mdi:home'
}

`FooterData` 接口

FooterData 是所有组件的顶层接口，包含了以下几个字段：

字段	类型	描述	是否必填
`i18n`	`Record<string, Partial<Omit<FooterData, 'i18n'>>>`	多语言数据配置	可选
`group`	`Group[]`	链接分组数组，支持多个分组配置，每个分组包含标题、图标、链接等信息。	可选
`beian`	`Beian`	ICP 备案与公安备案配置，用于展示网站备案合规信息。	可选
`author`	`Author`	作者信息展示，包含作者名称、链接与版权图标，常用于页脚归属标识。	可选

`Group` 接口

Group 接口定义了一个链接分组，包括分组的图标、标题及其下的多个链接。

字段	类型	描述	是否必填
`icon`	`IconImageType`	分组图标，支持任意 iconify 图标，亦可设置深浅色模式。例如：`icon: { light: 'mdi:home-outline', dark: 'mdi:home' }`	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，亦可分别设置深浅色。例如：`color: { light: '#666', dark: '#ccc' }` 或 `color: 'rgba(255, 87, 51, 1)'`	可选
`title`	`string`	分组标题，将展示为该链接组的名称。	必填
`links`	`Link[]`	分组内的链接数组，参考下方 Link 接口。	必填
`alt`	`string`	图标的无障碍文本描述，供屏幕阅读器使用，建议提供。	可选

`Link` 接口

Link 接口用于描述具体的链接信息，包括链接的图标、样式、名称、地址及其打开方式。

字段	类型	描述	是否必填
`icon`	`IconImageType`	链接前的图标，支持任意 iconify 图标，支持深浅色模式。例如：`icon: { light: 'solar:book-bold', dark: 'solar:book-bold' }`	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，亦可分别设置深浅色。例如：`color: { light: '#666', dark: '#ccc' }` 或 `color: 'rgba(255, 87, 51, 1)'`	可选
`name`	`string`	链接显示的文本。	必填
`link`	`string`	链接地址，可为外部 URL 或内部路径，如 `/docs`。	必填
`alt`	`string`	图标的无障碍文本描述，供屏幕阅读器使用，建议提供。	可选
`rel`	`string`	设置链接的 `rel` 属性，常见如 `noopener noreferrer`，用于安全性或 SEO 考虑。	可选

`Beian` 接口

Beian 接口用于表示备案信息，包括 ICP 备案号、公安备案号以及是否显示备案图标。

字段	类型	描述	是否必填
`icp`	`Icp`	ICP 备案信息配置。	可选
`police`	`Police`	公安备案信息配置。	可选
`showIcon`	`boolean`	是否显示备案图标，默认值为 `false`，开启后将渲染 iconify 图标。	可选

`Icp` 接口

Icp 接口表示 ICP 备案信息。

字段	类型	描述	是否必填
`number`	`string`	ICP 备案号文本，例如 `粤ICP备88888888号`。	可选
`icon`	`IconImageType`	图标名称，支持任意 iconify 图标，默认 `'fluent:globe-shield-48-filled'`。支持深浅色模式。例如：`icon: { light: 'solar:book-bold', dark: 'solar:book-bold' }`	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，亦可分别设置深浅色。例如：`color: { light: '#666', dark: '#ccc' }` 或 `color: 'rgba(255, 87, 51, 1)'`	可选
`alt`	`string`	图标的无障碍文本描述，供屏幕阅读器使用，建议提供。	可选
`rel`	`string`	设置链接的 `rel` 属性，常见如 `noopener noreferrer`，用于安全性或 SEO 考虑。	可选

`Police` 接口

Police 接口表示公安备案信息。

字段	类型	描述	是否必填
`number`	`string`	公安备案号文本，例如 `粤公网安备 88888888888888 号`。	可选
`icon`	`IconImageType`	图标名称，支持任意 iconify 图标，默认 `'fluent:shield-checkmark-48-filled'`，支持深浅色模式。例如：`icon: { light: 'solar:book-bold', dark: 'solar:book-bold' }`	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，亦可分别设置深浅色。例如：`color: { light: '#666', dark: '#ccc' }` 或 `color: 'rgba(255, 87, 51, 1)'`	可选
`alt`	`string`	图标的无障碍文本描述，供屏幕阅读器使用，建议提供。	可选
`rel`	`string`	设置链接的 `rel` 属性，常见如 `noopener noreferrer`，用于安全性或 SEO 考虑。	可选

`Author` 接口

Author 接口表示作者信息，包括作者姓名和链接。

字段	类型	描述	是否必填
`name`	`string`	作者或站点拥有者的名称，将展示在页脚中。	可选
`link`	`string`	作者名称的链接地址，一般为个人主页或项目主页。	可选
`icon`	`IconImageType`	版权图标，支持任意 iconify 图标，支持深浅色模式。例如：`icon: 'mdi:copyright'`	可选
`color`	`IconImageType`	图标颜色或样式，支持十六进制或 rgba 颜色值，亦可分别设置深浅色。例如：`color: { light: '#666', dark: '#ccc' }` 或 `color: 'rgba(255, 87, 51, 1)'`	可选
`alt`	`string`	图标的无障碍文本描述，供屏幕阅读器使用，建议提供。	可选
`rel`	`string`	设置链接的 `rel` 属性，常见如 `noopener noreferrer`，用于安全性或 SEO 考虑。	可选

页脚组件 - HomeFooter ​

创建数据 ​

引入组件 ​

数据接口说明 ​

FooterData 接口 ​

Group 接口 ​

Link 接口 ​

Beian 接口 ​

Icp 接口 ​

Police 接口 ​

Author 接口 ​

预览: