---
title: 自定义 CSS/JavaScript 示例
description: 为页眉添加品牌标识和配色，并用 CSS 与 JavaScript 添加悬浮的 Ask AI 按钮，让这些自定义内容在 Jamdesk 更新后继续生效。
---
> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.
本页以名为 Harbor 的演示站点为例。我们将为页眉添加 Harbor 的标识、配色和两个额外链接，并在右下角放置悬浮的 **Ask AI** 按钮。你可以直接复制这些文件，再换成自己的标识和配色。
屏幕截图显示的是英文界面。
## 此页眉有哪些不同之处
默认情况下，Jam 页眉会与页面融为一体。在浅色模式下，页眉是透明的，可以看到后面的柔和渐变；在深色模式下，页眉则与其他内容一样呈近黑色。按钮的边角略微圆润。Harbor 版本做了四处改动：
- 浅色和深色模式下，页眉都呈深蓝色，因此更醒目。
- 页眉底边加了一条细橙线。
- 搜索框、**Ask AI** 和 **Book a demo** 按钮都采用完整的胶囊形圆角。
- 使用 Harbor 的白色标识替换默认标识。
这些改动只涉及 CSS 和一个标识文件，不会修改 Jamdesk 的页眉本身，因此搜索、Ask AI、主题切换和移动端菜单仍会照常工作。
此示例会在项目中使用以下文件：
```bash
harbor-docs/
├── docs.json ← logo, header links and brand colors
├── style.css ← header and button styles
├── script.js ← creates the Ask AI button
└── images/
└── harbor-logo.svg ← white logo for the navy header
```
## 从 docs.json 开始
第一部分不需要编写代码。标识、配色、页眉链接和 **Book a demo** 按钮都设置在 `docs.json` 中：
```json docs.json
{
"logo": {
"light": "/images/harbor-logo.svg",
"dark": "/images/harbor-logo.svg"
},
"colors": {
"primary": "#C2410C",
"light": "#D9480F",
"dark": "#9A3412"
},
"navbar": {
"links": [
{ "label": "Blog", "href": "https://example.com/blog" },
{ "label": "Status", "href": "https://example.com/status" }
],
"primary": {
"type": "button",
"label": "Book a demo",
"href": "https://example.com/demo"
}
}
}
```
标识是白色的。由于浅色和深色模式下的页眉都是深蓝色，同一个文件即可用于两种模式。
Jamdesk 会将你的 `primary` 颜色用于 **Book a demo** 按钮、当前选中的侧边栏项目和链接，因此橙色会贯穿整个站点。深色模式则使用 `light` 颜色。请确保颜色足够深，让按钮上的白色文字仍然清晰易读。所有导航栏选项请参阅[导航链接](https://jamdesk.com/docs/cn/customization/branding#导航链接)。
在将标识放在页眉中的主题（Jam、Nebula、Halo 和 Dusk）里，导航栏链接会在平板和桌面屏幕宽度下显示。Pulsar 会将标识放在侧边栏中，桌面端没有页眉栏，因此下方的页眉样式在 Pulsar 中不会显示。
## 设置页眉样式
页眉的文字、边框、搜索框和圆角都由 CSS 变量控制。只要在页眉内部设置这些变量，就只会改变页眉：
```css style.css
/* header[data-has-tabs] matches the site header only.
A plain `header` selector would also match the title
block at the top of every page. */
header[data-has-tabs] {
--header-top: #0f1d3a;
--header-bottom: #1b2f5b;
--header-stripe: #f97316;
--color-text-primary: #ffffff;
--color-text-secondary: #cbd5e1;
--color-text-tertiary: #cbd5e1;
--color-text-muted: #94a3b8;
--color-bg-primary: #0f1d3a;
--color-bg-secondary: rgba(255, 255, 255, 0.08);
--color-bg-hover: rgba(255, 255, 255, 0.16);
--color-border: rgba(255, 255, 255, 0.16);
/* Rounds the search box, Ask AI and buttons into pills */
--radius-md: 999px;
--radius-lg: 999px;
}
html.dark header[data-has-tabs] {
--header-top: #0a1328;
--header-bottom: #13234a;
--color-bg-primary: #0a1328;
}
/* Some themes keep the header background transparent on
purpose, so paint the color on a layer behind it. */
header[data-has-tabs]::before {
content: "";
position: absolute;
inset: 0 -24px; /* reach past the 16-24px page gutter */
z-index: -1;
background: linear-gradient(
90deg, var(--header-top), var(--header-bottom)
);
border-bottom: 3px solid var(--header-stripe);
}
/* The sparkle icon uses the accent color, which is hard to
see on navy, so give it the stripe color instead */
header[data-has-tabs] .fa-sparkles {
color: #fdba74;
}
```
深蓝色背景放在 `::before` 图层上，是因为 Jam 主题会用 `!important` 将页眉的 `background` 设为 `none`。直接给页眉设置普通的 `background` 规则不会生效。这个图层位于页眉内容后方，可用于所有主题。
将 `--radius-md` 和 `--radius-lg` 设为 `999px`，即可把页眉按钮变成胶囊形。由于改动只作用于 `header[data-has-tabs]`，页面上的卡片和代码块仍会保留原有圆角。
页眉中的 **Ask AI** 图标使用强调色，在深蓝色背景上不够醒目。最后一条规则会将图标改为浅橙色。
Jamdesk 会在深色模式下为 `` 添加 `dark` 类，因此 `html.dark` 代码块会让深色模式下的深蓝色再暗一些：
## 添加悬浮的 Ask AI 按钮
脚本会向页面添加一个普通的 `