徽标

主题在每个文档站点的站点头部显示徽标。

可用的徽标资源

主题在 assets/ 目录中附带两个徽标文件：

文件	格式	描述
assets/f5-logo.svg	SVG	F5 徽标，颜色为云红色（#e4002b）
assets/github-avatar.png	PNG	GitHub 组织头像（默认）

默认徽标

默认徽标在 config.ts 的 createF5xcDocsConfig 工厂函数中设置：

const logo = options.logo || { src: '@f5-sales-demo/docs-theme/assets/github-avatar.png' };

如果未提供 logo 选项，则使用 GitHub 头像 PNG 文件。该路径是通过 package.json 中的 exports 映射解析的 npm 包说明符。

替换徽标

选项 1：使用 F5 SVG 徽标

将 logo 选项传递给 createF5xcDocsConfig：

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: '@f5-sales-demo/docs-theme/assets/f5-logo.svg' },
});

选项 2：使用自定义徽标

将徽标文件放置在内容仓库中并引用它：

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: './src/assets/my-logo.svg' },
});

选项 3：分别设置亮色和暗色徽标

Starlight 支持为亮色和暗色模式分别设置徽标：

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: {
    light: './src/assets/logo-light.svg',
    dark: './src/assets/logo-dark.svg',
  },
});

使用规范

• 使用 SVG 格式 — 光栅图像（PNG、JPG）虽然可以使用，但在所有尺寸下无法清晰缩放
• 包含 viewBox 属性 — 确保徽标按比例缩放（例如，viewBox="0 0 100 100"）
• 保持文件体积小 — 徽标会在每个页面加载；目标大小控制在 10 KB 以内
• 在两种主题下测试 — 验证徽标在亮色和暗色模式下均显示正确