---
title: 品牌
description: "为文档站点配置徽标、网站图标、导航栏链接和页脚内容，支持明暗模式变体、自定义颜色和外部链接图标。"
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

{/*
  锚点稳定性："Favicon"、"Site Name"、"Description" 和 "Logo"
  标题锚点已写入 Firestore 构建记录中的建议链接（
  builder/build-service/lib/config-suggestions.ts
  及其 CLI 对应文件）。重命名这些标题会导致之前存储的所有建议失效链接——
  除非同时更新这两个文件并接受历史构建中的过期链接，否则不要重命名。
*/}

品牌设置控制读者首先看到的视觉元素：徽标、网站图标和导航链接。所有内容都支持明暗模式变体。

## 徽标

将徽标添加到导航栏标题：

```json
{
  "logo": {
    "light": "/images/logo-light.webp",
    "dark": "/images/logo-dark.webp",
    "href": "https://yourcompany.com"
  }
}
```

| 字段 | 说明 |
|-------|-------------|
| `light` | 明亮模式下的徽标（浅色背景上的深色徽标） |
| `dark` | 深色模式下的徽标（深色背景上的浅色徽标） |
| `href` | 点击徽标后跳转的位置 |

<Tip>
使用 SVG 徽标可确保在任何尺寸下都能清晰显示。如果只有一个徽标，请将其同时用于 `light` 和 `dark`。
</Tip>

### 徽标尺寸

徽标显示宽度最大为 120px。为获得最佳效果：
- 宽度：120-240px
- 高度：30-40px
- 格式：优先使用 SVG

## 网站图标

两种模式使用同一张图片：

```json
{
  "favicon": "/images/favicon.svg"
}
```

或为每种模式分别设置变体：

```json
{
  "favicon": {
    "light": "/images/favicon.svg",
    "dark": "/images/favicon-dark.svg"
  }
}
```

`light` 网站图标会在明亮模式下显示；`dark` 网站图标会在深色模式下显示。`dark` 为可选项。省略时，`light` 会在两种模式下使用。Jamdesk 会为主网站图标生成一个 `<link rel="icon">`，并为深色变体生成另一个带有 `media="(prefers-color-scheme: dark)"` 的链接。

支持的格式：SVG、PNG、ICO。

<Note>
如果倾向于使用单个资源，也可以使用在描边和填充中采用 `currentColor` 的 SVG，它同样会自动适配：浏览器会替换为当前的前景色。
</Note>

## 网站名称

`name` 字段会显示在浏览器标签页和搜索结果中：

```json
{
  "name": "Acme Docs",
  "description": "Documentation for the Acme API"
}
```

将其与 [`description`](#描述) 配合使用，让搜索结果和链接预览显示实际内容，而不是通用的备用文本。

## 描述

`description` 字段是网站默认的 SEO 摘要。搜索引擎会将其显示在网站标题下方，社交平台会将其用于链接预览：

```json
{
  "description": "Build, ship, and scale documentation with the Acme platform."
}
```

建议面向正在决定是否点击的读者，撰写 50-160 个字符的描述。单独设置 `description` frontmatter 的页面会优先使用自身描述；网站描述则用于其他所有页面。

## 导航链接

向导航栏添加链接：

```json
{
  "navbar": {
    "links": [
      { "label": "Blog", "href": "https://yourcompany.com/blog" },
      { "label": "Pricing", "href": "https://yourcompany.com/pricing" }
    ],
    "primary": {
      "type": "button",
      "label": "Get Started",
      "href": "https://app.yourcompany.com/signup"
    }
  }
}
```

### 链接选项

| 字段 | 类型 | 说明 |
|-------|------|-------------|
| `label` | string | 显示文本 |
| `href` | string | URL（外部或内部） |

### 主要按钮

`primary` 字段会创建一个醒目的行动号召按钮：

```json
{
  "primary": {
    "type": "button",
    "label": "Dashboard",
    "href": "https://app.yourcompany.com"
  }
}
```

## 页脚

向文档页脚添加社交链接和自定义链接列。

### 社交链接

在每个页面底部显示社交媒体图标：

```json
{
  "footer": {
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany",
      "discord": "https://discord.gg/yourserver",
      "linkedin": "https://linkedin.com/company/yourcompany"
    }
  }
}
```

#### 支持的平台

| 平台 | 键 | 说明 |
|----------|-----|-------------|
| GitHub | `github` | 链接到您的 GitHub 组织或代码仓库 |
| X (Twitter) | `x` or `twitter` | 链接到您的 X/Twitter 个人资料 |
| LinkedIn | `linkedin` | 链接到您公司的 LinkedIn 页面 |
| Discord | `discord` | 链接到您的 Discord 服务器 |
| Slack | `slack` | 链接到您的 Slack 社区 |
| YouTube | `youtube` | 链接到您的 YouTube 频道 |
| Instagram | `instagram` | 链接到您的 Instagram 个人资料 |
| Facebook | `facebook` | 链接到您的 Facebook 页面 |
| Reddit | `reddit` | 链接到您的 subreddit |
| Telegram | `telegram` | 链接到您的 Telegram 频道 |
| Bluesky | `bluesky` | 链接到您的 Bluesky 个人资料 |
| Threads | `threads` | 链接到您的 Threads 个人资料 |
| Medium | `medium` | 链接到您的 Medium 出版物 |
| Hacker News | `hacker-news` | 链接到您的 Hacker News 个人资料 |
| 网站 | `website` | 链接到您的主网站 |

<Tip>
无论您在配置中如何定义图标，图标都会按统一顺序显示。GitHub 和 X/Twitter 会首先显示，随后是其他平台。
</Tip>

### 链接列

在社交图标上方添加有组织的链接组：

```json
{
  "footer": {
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://yourcompany.com/blog" },
          { "label": "Changelog", "href": "/changelog" }
        ]
      },
      {
        "header": "Company",
        "items": [
          { "label": "About", "href": "https://yourcompany.com/about" },
          { "label": "Careers", "href": "https://yourcompany.com/careers" }
        ]
      }
    ],
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany"
    }
  }
}
```

| 字段 | 类型 | 说明 |
|-------|------|-------------|
| `links` | array | 链接列对象数组 |
| `links[].header` | string | 列标题（可选） |
| `links[].items` | array | 列中的链接 |
| `links[].items[].label` | string | 链接的显示文本 |
| `links[].items[].href` | string | URL（内部路径或外部 URL） |

<Note>
以 `http` 开头的外部链接会自动在新标签页中打开。内部链接会在您的文档内导航。
</Note>

### 在特定页面隐藏页脚

使用 frontmatter 在单个页面上隐藏页脚：

```yaml
---
title: Landing Page
hideFooter: true
---
```

这适用于自定义落地页，或页脚会造成干扰的页面。

## Jamdesk 品牌

默认情况下，文档页面的页脚会显示“Powered by Jamdesk”链接。此链接有助于其他团队发现 Jamdesk。如果不需要，也可以将其移除。

### 隐藏品牌标识

要移除 Jamdesk 品牌标识：

1. 在 Jamdesk 仪表板中转到 **Settings**
2. 找到 **Build Settings** 部分
3. 关闭 **Show Jamdesk Branding**
4. 触发新的构建

<Note>
所有计划均可使用品牌标识开关。更改需要重新构建后才能生效。
</Note>

## 完整品牌配置示例

以下是完整的品牌配置：

```json
{
  "name": "Acme Documentation",
  "description": "Build amazing products with Acme",
  "theme": "jam",
  "colors": {
    "primary": "#6366F1",
    "light": "#818CF8",
    "dark": "#4F46E5"
  },
  "favicon": "/images/favicon.svg",
  "logo": {
    "light": "/images/logo-dark.webp",
    "dark": "/images/logo-light.webp",
    "href": "https://acme.com"
  },
  "navbar": {
    "links": [
      { "label": "API", "href": "/api/overview" },
      { "label": "Blog", "href": "https://acme.com/blog" }
    ],
    "primary": {
      "type": "button",
      "label": "Sign Up",
      "href": "https://app.acme.com/signup"
    }
  },
  "footer": {
    "socials": {
      "github": "https://github.com/acme",
      "x": "https://x.com/acme",
      "discord": "https://discord.gg/acme"
    },
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://acme.com/blog" },
          { "label": "Status", "href": "https://status.acme.com" }
        ]
      }
    ]
  }
}
```

## 自定义域名

在 Jamdesk 仪表板中添加您的域名：

1. 转到 **Settings** → **Domains**
2. 添加您的域名（例如 `docs.yourcompany.com`）
3. 按照显示的方式配置 DNS
4. 等待验证

您的文档将通过自定义域名访问，并自动启用 SSL。

## 接下来做什么？

<Columns cols={2}>
  <Card title="主题设置" icon="palette" href="/cn/customization/theming">
    自定义颜色和字体排版
  </Card>
  <Card title="SEO 优化" icon="magnifying-glass-chart" href="/cn/content/seo">
    改进搜索元数据和预览
  </Card>
</Columns>