首页页脚 - 效果图

创建数据

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

// .vitepress/data/footerData.ts

export const Footer_Data = {
  beian: { icp: '备案号', police: '公网安备号' },
  author: { name: 'Theo', link: 'https://', time: '2019' },
  group: [
    {
      title: '外部链接',
      icon: 'fas fa-link', // Font Awesome 图标类名 具体查看:https://fontawesome.com/
      links: [
        { name: '示例1', href: 'https://' },
        { name: '示例2', href: 'https://' }
      ]
    },
    {
      title: '内部链接',
      internal: true, // `internal`默认为 false , 为 true 时不显示外部链接图标
      icon: 'fas fa-link',
      links: [
        { name: '示例1', icon: 'fas fa-book', href: '/docs' },
        { name: '示例2', href: '/page' }
      ]
    }
  ]
}

引入组件

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

数据接口说明

/**
 * Footer 的数据对象。
 */
interface FooterData {
  /**
   * 各个 section 的数据。
   */
  group: Array<{
    /**
     * Section 的标题。
     */
    title: string

    /**
     * 图标的类名（Font Awesome 图标类名）。
     */
    icon?: string

    /**
     * 该 section 下的链接。
     */
    links: Array<{
      /**
       * 链接文本。
       */
      name: string

      /**
       * 链接的图标类名（Font Awesome 图标类名）。
       */
      icon?: string

      /**
       * 链接地址。
       */
      href: string

      /**
       * 链接是否为内部链接。
       */
      internal: boolean
    }>
  }>

  /**
   * 备案信息。
   */
  beian?: {
    /**
     * ICP 备案号。
     */
    icp?: string

    /**
     * 公安备案号。
     */
    police?: string
  }

  /**
   * 作者信息。
   */
  author?: {
    /**
     * 作者名称。
     */
    name?: string

    /**
     * 版权年份。
     */
    time?: string

    /**
     * 作者的链接。
     */
    link?: string
  }
}