Skip to content

siteMeta 站点信息

配置站点的元信息,包括标题、描述、头像、Logo、站点地址、语言以及作者信息等,用于站点展示、SEO 与 RSS 生成。

字段说明

siteMeta 主表

字段类型默认值说明
titlestring'My Blog'站点标题,显示在浏览器标签页与站点头部
descriptionstring'powered by ninc'站点描述,用于 SEO meta 与 RSS
avatarstring见下方站点头像路径,指向 public 目录下的文件或任意可访问的网络图片;侧边栏 Clock 中心头像、关于页头像等共用此字段
logostring''站点 Logo 路径,指向 public 目录下的文件;留空则不显示 Logo
sitestring'https://example.com'站点完整地址,用于 RSS 链接生成与 sitemap hostname(SEO 基础设施)
basestring'/'VitePress base 路径;主题会自动将其同步为 VitePress base 与 PWA start_url,通常只需在此设置一处
langstring'zh-CN'站点语言,影响 <html lang> 属性
authorAuthorInfo见下方子表作者信息对象

avatar 默认值

https://blog.ninc.top/images/cxLogo/avatar2.jpg(作者自己的头像,替换方法见说明列)

author 子表

字段类型默认值说明
namestring'Your Name'作者名称
coverstring?avatar作者头像,侧边栏 Clock 中心头像优先使用此字段,未配置时回退到 siteMeta.avatar;替换方法:把图片放到 public/images/ 下,改为 '/images/your-avatar.jpg'
emailstring?'you@example.com'作者邮箱,用于联系与 RSS;同时作为侧边栏 hello 卡片邮箱图标的链接
linkstring?''作者主页链接(如 GitHub 个人主页),同时作为侧边栏 hello 卡片 GitHub 图标与页脚作者名的链接;未配置时为空链接

📌 Clock 中心头像配置

侧边栏 hello 卡片中的 Clock 动画中心头像通过 siteMeta.author.cover 配置,未配置时回退到 siteMeta.avatar。这两个字段都默认使用主题作者自己的头像,让新项目开箱即用。这不是写死的,请按上面表格中的说明替换为自己的头像。

示例

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

export const themeConfig = defineThemeConfig({
  siteMeta: {
    title: '南风志',
    description: '记录前端开发与生活随笔的个人博客',
    avatar: '/images/avatar.png',   // 自行提供,需放在 public/images/avatar.png
    logo: '/images/logo.png',       // 自行提供,需放在 public/images/logo.png
    site: 'https://example.com',
    base: '/',
    lang: 'zh-CN',
    author: {
      name: '南风',
      cover: '/images/avatar.png',
      email: 'demo@example.com',
      link: 'https://example.com/about'
    }
  }
})

渲染效果


siteMeta 中的字段会在站点多处同步渲染,理解其作用范围有助于一次性配置到位:

  • 浏览器标签页title 作为页面标题;favicon 需通过 inject.header 自行配置(主题默认不注入任何 head 标签,或将 favicon.ico 放入 public/ 依赖浏览器默认请求)。
  • 站点头部titlelogo 组成顶部品牌区,avatar 用于作者相关卡片。
  • 页脚区域author.name 用于版权信息(搭配 since 计算年份)。
  • 分享卡片(Open Graph / Twitter Card):主题不会自动生成 og/twitter 标签,如需分享卡片请在 inject.header 中自行配置(该页提供完整模板)。
  • RSS 订阅siteauthor.emailauthor.name 参与生成 RSS channel 与条目元信息。

常见配置组合

  • 个人博客titleauthor.name 保持一致风格,avatar 使用清晰正方形头像,site 填写 Pages 部署地址。
  • 团队站点title 填写站点名,author 填写主理人,logo 使用团队徽标,author.cover 单独设置团队封面。

注意事项

资源需自行准备

avatar 默认是主题作者的示例头像 URL(仅作占位演示),logo 默认为空字符串。正式使用时请将图片放到 public/images/ 下,再填入对应路径(不含 public 前缀)。例如文件位于 public/images/avatar.png 时,配置为 /images/avatar.pnglogo 留空时对应位置不渲染图片。

base 通常只需在 siteMeta 设置一处

主题会自动把 siteMeta.base 同步为 VitePress base(路由与资源路径)与 PWA start_url,因此在绝大多数场景下只改这里即可。如果你选择在 defineConfig 第一参数中直接设置 base(会覆盖 siteMeta.base 的同步值),请同时把 siteMeta.base 改为相同值——否则 PWA start_url 仍取 siteMeta.base,与站点实际路径不一致。

site 用于 RSS 与 sitemap

site 字段必须填写完整地址(包含协议 https:// 且不要带末尾斜杠),它会被用于生成 RSS 订阅链接与 sitemap 的 hostname。注意:RSS 文章链接由 site + 文章路径 直接拼接,不包含 base 前缀——子路径部署(如 GitHub Pages 项目站)时请在 site 中带上子路径(如 https://example.com/blog),或在部署后自行校验 RSS 链接可达。

author.link 与 author.email 用于侧边栏 hello 卡片社交入口

author.linkauthor.email 除了用于 RSS 与页脚版权区,还作为文章页侧边栏 hello 卡片的社交图标链接:

  • author.link 填写后,点击 GitHub 图标跳转到配置的链接(通常填 GitHub 个人主页)。
  • author.email 填写后,点击邮箱图标调起邮件客户端。
  • 两者均默认为占位值,未配置时图标仍会展示但为空链接,建议替换为真实地址。
配置示例
ts
author: {
  name: '南风',
  email: 'demo@example.com',
  link: 'https://github.com/your-username'
}

:::

author.link 默认值为空

author.link 默认值为空字符串,未配置时页脚作者名与侧边栏 GitHub 图标会渲染为空链接。请在此填入你的 GitHub 主页地址以启用跳转。

相关配置

基于 MIT 许可发布