> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 页眉区块

> Aftersell Cart 的页眉区块：固定在抽屉顶部的标题、商品数量、logo 和关闭控件。

> **Header** 区块是购物车抽屉固定的顶部区域，为抽屉提供清晰的标题和明显的关闭方式。你可以通过将 **Title**、**Logo** 和 **Close button** 分配到左侧和右侧区块来控制其布局。由于 Header 固定在顶部，购物车其余部分滚动时它保持可见。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="抽屉顶部带有购物车标题、商品数量和关闭控件的页眉区块" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

<div id="behavior">
  ## 行为
</div>

* Header 固定在抽屉顶部，不随购物车主体滚动。
* 关闭控件始终可用，可关闭抽屉。

<div id="settings">
  ## 设置
</div>

| 设置        | 控制内容                                                                                   | 默认值                          |
| --------- | -------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**  | 哪些元素渲染在左侧区块（`Title`、`Logo`、`Close button`）以及以何种顺序渲染。                                   | `Title`                      |
| **Right** | 哪些元素渲染在右侧区块（`Title`、`Logo`、`Close button`）以及以何种顺序渲染。                                   | `Close button`               |
| **Title** | 购物车的富文本标题。支持 `{{cart_item_count}}` 和 `{{total_price}}` 令牌。                             | `Cart • {{cart_item_count}}` |
| **Image** | 以 `props.logoUrl` 形式提供给自定义模板的图片。此字段仅在自定义模板启用时出现，内置页眉从不渲染它。支持的格式：WebP、JPEG、PNG、GIF、SVG。 | 无                            |

标题可翻译。如果你的标题解析为空（例如未设置的翻译），购物车会回退显示 **Cart**，这样页眉永远不会空白。

元素按你选择的顺序从左到右显示，每个元素同一时间只能被分配到一个区块。

<div id="placement-and-limits">
  ## 位置和限制
</div>

* \*\*区域：\*\*仅限顶部。
* \*\*数量上限：\*\*每个购物车状态 1 个。
* \*\*状态：\*\*已装满和空购物车（每个状态都有自己的 Header 实例）。
* 两种状态下都默认添加到新购物车。未锁定，所以你可以删除它或用眼睛开关隐藏它。

<div id="custom-template">
  ## 自定义模板
</div>

支持从其 Code 标签页使用[自定义模板](/zh/aftersell/cart/custom-templates)，用你的 JSX 替换此区块的内置标记。以下是它接收的 props。

<Note>
  `logoUrl` 是唯一没有内置等效项的 prop：Header 上传的图片**只会由自定义模板渲染**。如果商家设置了 logo 却没有显示，原因就在这里。
</Note>

| Prop           | 类型                                        | 用途                                                                 |
| -------------- | ----------------------------------------- | ------------------------------------------------------------------ |
| `title`        | `string`                                  | 页眉标题，为已消毒的 HTML，其中 `{{cart_item_count}}` 和 `{{total_price}}` 已被解析。 |
| `logoUrl`      | `string \| null`                          | 上传的页眉图片。商家未设置时为 `null`。                                            |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | 为左侧区块选择的元素，按渲染顺序排列。                                                |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | 为右侧区块选择的元素，按渲染顺序排列。                                                |
| `itemCount`    | `number`                                  | 购物车中的商品数量，与购物者看到的一致。                                               |
| `onClose`      | `() => void`                              | 关闭抽屉。将它接到你的关闭控件上。                                                  |
| `isLoading`    | `boolean`                                 | 在这里始终为 `false`：区块在加载期间渲染其内置骨架屏，只在购物车就绪后才调用你的模板。                    |

<Warning>
  如果你不把 `onClose` 接到任何东西上，购物者仍然可以通过点击遮罩层或按 Escape 关闭抽屉，但你的页眉将没有关闭按钮。请务必包含一个。
</Warning>

<div id="design">
  ## 设计
</div>

使用设置面板中的 **Design** 部分为此区块设置样式。这些是按区块的覆盖，叠加在你的全局设计之上，留空时回退到全局设计。

<div id="text">
  ### Text（文字）
</div>

Design 中的 **Text**（文字）部分让你控制购物车标题的排版。加粗和文字颜色在上方的富文本编辑器（Settings 标签页）中设置，而不是在这里。

| 设置                 | 控制内容    | 默认值    |
| ------------------ | ------- | ------ |
| **Font**           | 标题的字体族。 | 继承自主题  |
| **Size**           | 字体大小。   | `18px` |
| **Line height**    | 行高倍数。   | `1.3`  |
| **Letter spacing** | 字符间距。   | Normal |

什么是设计设置？在这里了解更多：[设计设置](/zh/aftersell/cart/design-settings)。