> ## 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.
# 公告模块
> 了解如何自定义 Upcart 抽屉中的公告栏，包括高度、位置、倒计时器、文本格式和颜色。
# 高度
高度设置控制公告栏的粗细程度。它提供三个选项：**Slim**（纤细）、**Normal**（正常）和 **Thick**（加厚）。Slim 让抽屉更紧凑，为购物车内容腾出空间——在较小的屏幕上尤其有用。Normal 介于两者之间。Thick 提供更强的视觉强调，帮助你的信息更引人注目。
# 位置
使用位置设置来选择公告栏在 cart drawer 中显示在**商品之前**还是**商品之后**。
* **Before products**（商品之前）将公告栏置于购物车主体顶部，紧邻页眉下方。
* **After products**（商品之后）将其置于购物车主体底部，紧邻页脚上方——如果备注和 upsell 模块也放在那里，则位于它们下方。
## 计时器时长
如果你希望公告在设定时间后过期，请在 **Timer duration** 字段中设置倒计时。格式为 `MM:SS`——`05:00` 表示五分钟，`00:30` 表示三十秒。秒数必须在 `00`–`59` 之间；超出该范围的值会被拒绝。
倒计时只有在公告文本中包含计时器变量时才会运行。倒计时结束后，整个公告栏会自动从购物车中移除。
内置倒计时器基于会话，从设定的分钟数开始倒数。它不支持在特定时间重置的循环或每日倒计时（例如，每天倒计时到下午 2:00）。此功能目前在 Upcart 中不可用。
## 公告文本
此部分让你输入并设置公告横幅中显示的信息格式。你可以使用输入框上方的格式工具栏为文本的特定部分设置样式，包括粗体、斜体、下划线和颜色等选项。
公告文本字段不支持超链接——格式工具栏中没有链接或 URL 按钮，粘贴的 `` 标签或 Markdown 链接会在保存时被去除。如需让公告可点击或包含链接，请改用 **Custom HTML** 模块（见下文）。
### 向公告添加链接或 URL
由于内置的公告文本字段无法渲染超链接，你可以通过 Custom HTML 注入链接，以替代或补充公告栏：
1. 前往 **Upcart > Cart Editor > Settings > Custom HTML**。
2. 将 **HTML Location** 设置为 **Above announcements/rewards**（显示在公告栏上方）或 **Below header/announcements/rewards**（直接显示在其下方）。
3. 粘贴包含链接的代码片段，例如：
```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
4. 点击 **Save**，然后在线上购物车中测试。
有关 Custom HTML 位置和样式的更多信息，请参阅[自定义 HTML](/zh/upcart/custom_html) 和[自定义 CSS](/zh/upcart/custom_css)。Upcart 支持团队不编写或调试自定义代码——如需帮助构建代码，请联系 Shopify Expert。
如果你使用倒计时功能，请将计时器变量直接插入到你的信息中。V2 购物车使用 `{{timer}}`，V1 购物车使用 `{TIMER}`。
## 重要提示
请务必手动输入计时器变量（V2 为 `{{timer}}`，V1 为 `{TIMER}`），而不要复制粘贴。这样可以避免隐藏的格式问题，防止计时器在线上购物车中无法正确显示。
# 字体大小
你可以使用滑块控制公告文本的大小，可选范围为 10px 到 24px。这有助于确保在移动端和桌面端都具有良好的可读性。
# 颜色
Background Color（背景颜色）用于定义公告栏的整体填充颜色。Border Color（边框颜色）用于调整横幅上下方的水平线，营造带样式的容器效果。
# 高级计时器配置
如需更多功能，可以使用 JavaScript 自定义倒计时器。请将脚本添加到 **"Scripts (Before Load)"** 部分，而不是 Custom HTML 模块。这是加载时机的要求，而非安全限制——Custom HTML 确实会执行脚本，但执行时间太晚，无法可靠地挂接到购物车的加载事件。"Scripts (Before Load)" 部分会在购物车加载前运行你的代码，因此 `upcartSubscribeCartLoaded` 等回调可以正确触发。示例代码：
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
旧版说明：window\.upcartOnCartLoaded 仍然可用，但已弃用并会在控制台记录警告。所有新脚本请使用 upcartSubscribeCartLoaded。
请务必仔细测试代码的放置位置和语法。某些平台限制可能仍会影响脚本的处理方式。