siteMeta 站点信息
配置站点的元信息,包括标题、描述、头像、Logo、站点地址、语言以及作者信息等,用于站点展示、SEO 与 RSS 生成。
字段说明
siteMeta 主表
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | 'My Blog' | 站点标题,显示在浏览器标签页与站点头部 |
description | string | 'powered by ninc' | 站点描述,用于 SEO meta 与 RSS |
avatar | string | 见下方 | 站点头像路径,指向 public 目录下的文件或任意可访问的网络图片;侧边栏 Clock 中心头像、关于页头像等共用此字段 |
logo | string | '' | 站点 Logo 路径,指向 public 目录下的文件;留空则不显示 Logo |
site | string | 'https://example.com' | 站点完整地址,用于 RSS 链接生成与 sitemap hostname(SEO 基础设施) |
base | string | '/' | VitePress base 路径;主题会自动将其同步为 VitePress base 与 PWA start_url,通常只需在此设置一处 |
lang | string | 'zh-CN' | 站点语言,影响 <html lang> 属性 |
author | AuthorInfo | 见下方子表 | 作者信息对象 |
avatar 默认值
https://blog.ninc.top/images/cxLogo/avatar2.jpg(作者自己的头像,替换方法见说明列)
author 子表
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | 'Your Name' | 作者名称 |
cover | string? | 同 avatar | 作者头像,侧边栏 Clock 中心头像优先使用此字段,未配置时回退到 siteMeta.avatar;替换方法:把图片放到 public/images/ 下,改为 '/images/your-avatar.jpg' |
email | string? | 'you@example.com' | 作者邮箱,用于联系与 RSS;同时作为侧边栏 hello 卡片邮箱图标的链接 |
link | string? | '' | 作者主页链接(如 GitHub 个人主页),同时作为侧边栏 hello 卡片 GitHub 图标与页脚作者名的链接;未配置时为空链接 |
📌 Clock 中心头像配置
侧边栏 hello 卡片中的 Clock 动画中心头像通过 siteMeta.author.cover 配置,未配置时回退到 siteMeta.avatar。这两个字段都默认使用主题作者自己的头像,让新项目开箱即用。这不是写死的,请按上面表格中的说明替换为自己的头像。
示例
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/依赖浏览器默认请求)。 - 站点头部:
title与logo组成顶部品牌区,avatar用于作者相关卡片。 - 页脚区域:
author.name用于版权信息(搭配since计算年份)。 - 分享卡片(Open Graph / Twitter Card):主题不会自动生成 og/twitter 标签,如需分享卡片请在
inject.header中自行配置(该页提供完整模板)。 - RSS 订阅:
site、author.email、author.name参与生成 RSS channel 与条目元信息。
常见配置组合
- 个人博客:
title与author.name保持一致风格,avatar使用清晰正方形头像,site填写 Pages 部署地址。 - 团队站点:
title填写站点名,author填写主理人,logo使用团队徽标,author.cover单独设置团队封面。
注意事项
资源需自行准备
avatar 默认是主题作者的示例头像 URL(仅作占位演示),logo 默认为空字符串。正式使用时请将图片放到 public/images/ 下,再填入对应路径(不含 public 前缀)。例如文件位于 public/images/avatar.png 时,配置为 /images/avatar.png。logo 留空时对应位置不渲染图片。
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.link 与 author.email 除了用于 RSS 与页脚版权区,还作为文章页侧边栏 hello 卡片的社交图标链接:
author.link填写后,点击 GitHub 图标跳转到配置的链接(通常填 GitHub 个人主页)。author.email填写后,点击邮箱图标调起邮件客户端。- 两者均默认为占位值,未配置时图标仍会展示但为空链接,建议替换为真实地址。
配置示例
author: {
name: '南风',
email: 'demo@example.com',
link: 'https://github.com/your-username'
}:::
author.link 默认值为空
author.link 默认值为空字符串,未配置时页脚作者名与侧边栏 GitHub 图标会渲染为空链接。请在此填入你的 GitHub 主页地址以启用跳转。
相关配置
homeTop首页顶部区域 — 首页标题与推荐站点横幅nav顶部导航栏 — 顶部导航菜单footer页脚 — 页脚社交链接与版权徽标