内容组件
提示框

提示框

本站支持 GitHub 与 Obsidian 风格的 Markdown 提示框（callout），兼容性与可移植性都很好。

提示框适合用来突出重要的、相关的信息，例如说明、提示或警告。

用法

基础类型

支持 Obsidian 的 15+ 种提示框类型：

信息与备注：

> [!NOTE]
> 这是一条备注，用于提示用户应知的重要信息。
Note

这是一条备注，用于提示用户应知的重要信息。

> [!INFO]
> 另一种信息提示框——样式与 NOTE 相同。
Info

另一种信息提示框——样式与 NOTE 相同。

> [!ABSTRACT]
> 用于摘要、总结或 TL;DR 内容。
Abstract

用于摘要、总结或 TL;DR 内容。

行动与任务：

> [!TODO]
> 这是待办事项。
Todo

这是待办事项。

> [!TIP]
> 一条能提升效率的小技巧！
Tip

一条能提升效率的小技巧！

> [!SUCCESS]
> 操作已成功完成。
Success

操作已成功完成。

提问与示例：

> [!QUESTION]
> 你怎么看这个方案？欢迎留言。
Question

你怎么看这个方案？欢迎留言。

> [!EXAMPLE]
> 这里给出该功能的一个实际示例。
Example

这里给出该功能的一个实际示例。

> [!QUOTE]
> “预测未来最好的方式就是创造未来。”——Alan Kay
Quote

“预测未来最好的方式就是创造未来。”——Alan Kay

警告与错误：

> [!WARNING]
> 注意！此操作可能带来意外后果。
Warning

注意！此操作可能带来意外后果。

> [!CAUTION]
> 危险！此操作不可逆，可能导致数据丢失。
Caution

危险！此操作不可逆，可能导致数据丢失。

> [!IMPORTANT]
> 这是用户必须了解才能继续的关键信息。
Important

这是用户必须了解才能继续的关键信息。

> [!DANGER]
> 极其危险——请务必小心！
Danger

极其危险——请务必小心！

> [!FAILURE]
> 操作失败。请检查配置后重试。
Failure

操作失败。请检查配置后重试。

> [!BUG]
> 已知问题：该功能在 Safari < 14 中不起作用。
Bug

已知问题：该功能在 Safari < 14 中不起作用。

自定义标题

可以为任意提示框自定义标题：

> [!WARNING]+ 自定义警告标题
> 这条警告使用了自定义标题，而不是默认的“Warning”。
自定义警告标题

这条警告使用了自定义标题，而不是默认的“Warning”。

旧语法（已弃用）

旧的 shortcode 语法仍可用，但会显示弃用警告：

{{< callout note >}}
仍然可用，但已弃用。请使用上面的 Markdown 语法！
{{< /callout >}}

CSS 自定义

提示框带有语义化 CSS 类与 data 属性，便于自定义。每个提示框包含：

  • 基础类：.callout
  • 类型属性：data-callout="note"
  • 组件类：.callout-icon、.callout-title、.callout-content、.callout-body

自定义 CSS 示例（添加到 assets/css/custom.css）：

/* 自定义 NOTE 提示框 */
.callout[data-callout="note"] {
  border-left-width: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* 让 SUCCESS 提示框脉冲 */
.callout[data-callout="success"] {
  animation: pulse 2s infinite;
}

/* 自定义图标样式 */
.callout-icon svg {
  transition: transform 0.2s;
}

.callout:hover .callout-icon svg {
  transform: scale(1.1);
}

/* 深色模式覆盖 */
@media (prefers-color-scheme: dark) {
  .callout[data-callout="warning"] {
    background-color: rgb(92 25 2);
    border-color: rgb(245 158 11);
  }
}

新语法的优点

  • 可移植：兼容 GitHub、Obsidian 等 Markdown 编辑器
  • 标准：使用广泛采用的 Markdown 提示框语法
  • 简洁：无需 Hugo 专有 shortcode
  • 面向未来：受最新 Hugo 版本支持（0.132.0+）
  • 可定制：语义化 CSS 类与 data 属性，便于设置样式
  • 完整：支持全部 15+ 种 Obsidian 提示框类型
  • 多语言：提示框标题会根据站点语言自动翻译（也可在语言包中自定义）
docs