vitepress-theme-ninc

主题

footer 页脚 ​

配置站点页脚区域，包括社交链接、shields.io 徽标以及站点地图导航分组。

页脚配置文档页

字段说明 ​

字段类型默认值说明
socialFooterSocial[]见下方子表社交链接数组
badgeFooterBadge[]见下方子表shields.io 徽标数组
sitemapFooterSitemapGroup[]见下方子表站点地图分组数组

social 子表（FooterSocial） ​

字段类型默认值说明
iconIconField—图标字段，支持三种写法：字符串(iconfont 名) / 'svg:文件名' / { type, name }，详见 图标使用指南
linkstring—社交链接地址

默认 social 值：

ts
social: [
  { icon: 'email', link: 'mailto:you@example.com' },
  { icon: 'github', link: 'https://github.com/your-name' }
]

badge 子表（FooterBadge） ​

字段类型默认值说明
leftTextstring'CopyRight'徽标左侧文字
rightTextstring'BY-NC-SA 4.0'徽标右侧文字
colorstring'#ae3b37'徽标颜色
tooltipstring?'知识共享 署名-非商业性使用-相同方式共享 4.0 国际许可协议'鼠标悬停提示
linkstring'https://creativecommons.org/licenses/by-nc-sa/4.0/'徽标跳转链接
logostring'creativecommons'shields.io 徽标 logo
stylestring?'for-the-badge'shields.io 徽标样式

默认 badge 值：

ts
badge: [
  {
    leftText: 'CopyRight',
    rightText: 'BY-NC-SA 4.0',
    color: '#ae3b37',
    tooltip: '知识共享 署名-非商业性使用-相同方式共享 4.0 国际许可协议',
    link: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
    logo: 'creativecommons',
    style: 'for-the-badge'
  }
]

sitemap 子表（FooterSitemapGroup 数组） ​

字段类型默认值说明
textstring—分组名称
itemsFooterSitemapItem[]—分组下链接项数组

sitemap items 子表（FooterSitemapItem） ​

字段类型默认值说明
textstring—链接文字
linkstring—链接地址
newTabboolean?—是否在新标签页打开

默认 sitemap 值：

ts
sitemap: [
  {
    text: '博客',
    items: [
      { text: '近期文章', link: '/' },
      { text: '全部分类', link: '/pages/categories' },
      { text: '全部标签', link: '/pages/tags' },
      { text: '文章归档', link: '/pages/archives' }
    ]
  },
  {
    text: '协议',
    items: [
      { text: '隐私政策', link: '/pages/privacy' },
      { text: '版权协议', link: '/pages/cc' },
      { text: 'Cookies', link: '/pages/cookies' }
    ]
  }
]

示例 ​

ts
import { defineThemeConfig } from 'vitepress-theme-ninc/defineThemeConfig'

export const themeConfig = defineThemeConfig({
  footer: {
    social: [
      { icon: 'email', link: 'mailto:you@example.com' },
      { icon: 'github', link: 'https://github.com/your-name' },
      { icon: 'twitter', link: 'https://twitter.com/your-name' },
      { icon: 'rss', link: 'https://example.com/rss.xml' }
    ],
    badge: [
      {
        leftText: 'CopyRight',
        rightText: 'BY-NC-SA 4.0',
        color: '#ae3b37',
        tooltip: '知识共享 署名-非商业性使用-相同方式共享 4.0 国际许可协议',
        link: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
        logo: 'creativecommons',
        style: 'for-the-badge'
      },
      {
        leftText: 'Powered by',
        rightText: 'VitePress',
        color: '#42b883',
        tooltip: '由 VitePress 与 vitepress-theme-ninc 驱动',
        link: 'https://vitepress.dev/',
        logo: 'vitepress',
        style: 'for-the-badge'
      }
    ],
    sitemap: [
      {
        text: '博客',
        items: [
          { text: '近期文章', link: '/' },
          { text: '全部分类', link: '/pages/categories' },
          { text: '全部标签', link: '/pages/tags' },
          { text: '文章归档', link: '/pages/archives' }
        ]
      },
      {
        text: '协议',
        items: [
          { text: '隐私政策', link: '/pages/privacy' },
          { text: '版权协议', link: '/pages/cc' },
          { text: 'Cookies', link: '/pages/cookies' }
        ]
      },
      {
        text: '关于',
        items: [
          { text: '关于本站', link: '/pages/about' },
          { text: '友情链接', link: '/pages/friends', newTab: false },
          { text: 'GitHub 仓库', link: 'https://github.com/your-name/your-repo', newTab: true }
        ]
      }
    ]
  }
})

渲染效果 ​

footer 自下而上（或按主题排版）渲染为三块区域：

  • 社交链接（social）：以 iconfont 图标形式横排展示，悬浮可见链接，建议偶数个保持两列对齐。
  • 徽标区（badge）：调用 shields.io 生成的 SVG 徽标横排展示，鼠标悬浮显示 tooltip，点击跳转 link。
  • 站点地图（sitemap）：以多列分组形式展示导航链接，分组标题在上、链接项在下，适合放置「博客」「协议」「关于」等入口。

常见配置组合

  • 极简页脚：social 配 2 个（邮箱 + GitHub），badge 配 1 个版权徽标，sitemap 配 1 个分组。
  • 完整页脚：social 配 4-6 个常用平台，badge 配版权 + Powered by 两个徽标，sitemap 配 3 个分组（博客/协议/关于）。
  • 外链友好：sitemap 中的外链项设置 newTab: true，站内链接保持默认当前页打开。

徽标加载依赖 shields.io

badge 渲染依赖 shields.io 服务实时生成 SVG，若 shields.io 访问异常，徽标区域可能空白。生产环境可考虑自建 shields 服务或将徽标缓存为本地 SVG。

注意事项 ​

social 的 icon 字段支持三种写法

social 的 icon 字段支持三种写法（详见 图标使用指南）：

  • 字符串：iconfont 图标名（如 'email'、'github'、'rss'），需确保对应图标已在主题内置 iconfont 中
  • 'svg:文件名'：引用 public/svg/ 下的 SVG 文件（如 'svg:bilibili'、'svg:zhihu'）—— 推荐用于品牌 logo
  • 对象：{ type: 'svg' | 'font', name: 'xxx' } —— 显式声明类型与名称

页脚社交图标会自动反白渲染（深色背景上的白色图标），SVG 图标通过 fill: currentColor 适配。

social 建议为偶数个

为保证页脚社交链接区域的视觉对称与布局美观，建议 social 数组配置偶数个链接（如 2、4、6 个），主题会自动按两列排版。

badge 使用 shields.io 徽标

badge 基于 shields.io 生成，logo 字段对应 shields.io 的 logo 名称（可在 simpleicons.org 查询），style 支持 shields.io 提供的样式（如 for-the-badge、flat、flat-square、plastic）。

sitemap 用于页脚导航

sitemap 以分组形式组织页脚导航链接，适合放置「博客」「协议」「关于」等分类入口。items 中的 newTab 默认为站内链接当前页打开，外链可设置为 true 在新标签页打开。

color 使用合法颜色值

badge 的 color 字段需填写合法的 CSS 颜色值（如 #ae3b37、rgb(174, 59, 55)），将作为 shields.io 徽标的背景色传递。

tooltip 增强可访问性

badge 的 tooltip 字段会在鼠标悬停时显示，建议填写徽标的完整说明（如版权协议的全称），既提升可访问性，也避免占用过多视觉空间。

相关配置 ​

基于 MIT 许可发布

Copyright © 2023-2026 呢喃Ninc