品牌 | Nimbus 中文文档

五项改动让 Nimbus 站点看起来像你的产品。每一项都是你拥有的文件或选项。

名称

在 astro.config.ts 的 Nimbus 配置中设置 title 和 description。标题会出现在每个页面的 <title>、分享卡片和 llms.txt 中；描述是站点的默认 meta description。

Logo 只在一处绘制：src/components/logo.ts 中的盒子与 SVG 路径。页头、手机菜单（Logo.astro）和所有分享卡片都读取它。把路径替换为你的标志即可统一换品牌。请保持单色标志，因为各处会用自己的文本颜色填充它。

如需多色 Logo 或图片，修改 Logo.astro 来渲染它：

src/components/Logo.astroastro

---
interface Props { class?: string }
const { class: cls = "h-5 w-auto" } = Astro.props;
---
<img src="/logo.svg" alt="" class={cls} />

分享卡片仍会绘制 logo.ts，因此也要替换它，或按自定义 OG 卡片所述修改卡片。

页头将站点标题作为链接的可访问名称，因此 Logo 本身无需文字。若要在标志旁显示名称，请在 Logo.astro 内添加。

将 favicon.svg、favicon.ico 或 favicon.png 放入 public/。Nimbus 会按此顺序链接找到的第一个。

强调色是 src/styles/globals.css 中的两个令牌，一个用于浅色模式，一个用于深色：

src/styles/globals.csscss

:root {
  --nb-brand: oklch(0.55 0.2 265);
}

[data-mode="dark"] {
  --nb-brand: oklch(0.8 0.12 265);
}

--nb-brand 用于侧边栏当前页面和卡片中的图标着色。请检查两种模式下品牌色文本与背景的对比度仍达到 4.5:1。主题与令牌列出了所有令牌，包括中性色、圆角和字体。

Nimbus 在构建时为每个页面绘制分享卡片：Logo、页面所属分区和标题。其颜色、字体和布局位于 src/pages/og/_card.ts；参见自定义 OG 卡片。页面的 socialImage frontmatter 会用你自己的图片替换其卡片。参见元数据与 SEO。