首页页脚 - 效果图

创建数据

在.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/
      style: 'color: rgba(255, 87, 51, 1)',
      links: [
        { name: '示例1', href: 'https://' },
        { name: '示例2', href: 'https://' }
      ]
    },
    {
      title: '内部链接',
      internal: true, // `internal`默认为 false , 为 true 时不显示外部链接图标
      icon: 'fas fa-link',
      style: 'color: rgba(255, 87, 51, 1)',
      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_Data: {
    /**
     * 分组数据，每个分组包含以下属性。
     */
    group: Array<{
      /**
       * 图标（可选）。
       */
      icon?: string

      /**
       * 图标样式（可选）。
       */
      style?: string

      /**
       * 分组标题。
       */
      title: string

      /**
       * 该组是否为内部链接，默认为 `false`（可选）。
       */
      internal?: boolean

      /**
       * 该分组下的链接列表。
       */
      links: Array<{
        /**
         * 链接图标（可选）。
         */
        icon?: string

        /**
         * 链接样式（可选）。
         */
        style?: string

        /**
         * 链接名称。
         */
        name: string

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

        /**
         * 是否为内部链接，默认为 `false`（可选）。
         */
        internal?: boolean
      }>
    }>

    /**
     * 备案信息（可选）。
     */
    beian?: {
      /**
       * ICP 备案号（可选）。
       */
      icp?: string

      /**
       * 公安备案号（可选）。
       */
      police?: string
    }

    /**
     * 作者信息（可选）。
     */
    author?: {
      /**
       * 作者姓名（可选）。
       */
      name?: string

      /**
       * 发布时间，年份格式，如 2019（可选）。
       */
      time?: number

      /**
       * 作者链接（可选）。
       */
      link?: string
    }
  }