#自定义引用块

ModernDuang 提供了 4 种特殊的自定义引用块（blockquote），每种都有独特的图标、颜色和语义含义。通过在 Markdown 文章中使用 Hexo 标签语法即可插入。

#四种类型概览

#使用方法

在 Markdown 文章中直接使用对应的 Hexo 标签语法包裹内容即可：

{% note %}
这是一条友好的提示信息，用于补充说明某个知识点。
{% endnote %}

{% warning %}
请注意：修改配置文件前务必备份原始文件。
{% endwarning %}

{% declare %}
本文中的所有观点仅代表作者个人立场，不代表任何组织。
{% enddeclare %}

{% danger %}
危险：此操作不可逆，执行前请再三确认！
{% enddanger %}

#嵌套内容

引用块内部支持标准 Markdown 语法，包括加粗、列表、代码等：

{% warning %}
升级前请注意以下事项：

1. **备份数据库** — 升级可能导致数据不兼容
2. **检查插件兼容性** — 部分旧插件可能不再支持
3. **阅读更新日志** — 了解 breaking changes
{% endwarning %}

#自定义标题

默认情况下，每种引用块会显示一个预设的标题（提示、警告、声明、危险）。你可以通过在标签中传入自定义文本来覆盖默认标题：

{% note 小贴士 %}
这是一条自定义标题的提示信息。
{% endnote %}

{% warning 注意 %}
请谨慎操作，此操作不可撤销。
{% endwarning %}

{% declare 免责声明 %}
本文内容仅供参考，不构成任何建议。
{% enddeclare %}

{% danger 禁止 %}
切勿在生产环境中执行此命令！
{% enddanger %}

自定义标题支持任何文字，不限长度。如果不需要标题，可以传入空字符串，但标签语法要求至少有一个空格分隔符，建议使用简短且语义明确的标题。

#视觉效果

#颜色方案

每种类型的引用块使用独特的柔和粉彩色调，以下是四种类型的视觉对比：

所有颜色在亮色和暗色模式下均自动适配，确保足够的对比度。

#鼠标追踪光效

自定义引用块具有独特的鼠标追踪光效（Mouse Tracking Glow Effect）：

• 当鼠标悬浮在引用块上方时，光标周围会出现一个柔和的光晕，随鼠标移动而动态跟随。
• 光晕颜色与引用块的主题色一致（绿色/橙色/紫色/红色）。
• 使用了 CSS radial-gradient 和 JavaScript 鼠标位置追踪实现。
• 在移动端（触摸屏）上该效果自动禁用，不影响浏览性能。

#图标

每种引用块左侧都有一个 SVG 图标，图标颜色与引用块主题色一致，大小固定为 20x20px。

#与标准引用块的对比

标准的 Markdown 引用块（>）仍然可用并保持原有样式。自定义引用块是增强版的语义化引用，提供了更丰富的视觉层次和信息传达能力。

> 这是标准的 Markdown 引用块，样式简洁朴素。

{% note %}
这是 ModernDuang 的自定义提示块，带图标和颜色区分。
{% endnote %}

#完整示例

以下是一篇使用全部 4 种引用块的文章示例：

---
title: 我的第一篇博客
date: 2024-01-15
---

## 欢迎

欢迎来到我的技术博客！

{% note %}
本博客使用 Hexo + ModernDuang 主题搭建，支持丰富的自定义引用块。
{% endnote %}

## 环境配置

{% warning %}
请确保 Node.js 版本 >= 14，否则部分插件可能无法正常工作。
{% endwarning %}

## 免责声明

{% declare %}
本博客所有文章均为原创，转载请注明出处。
{% enddeclare %}

## 注意事项

{% danger %}
切勿将生产环境配置文件直接提交到公开仓库！
{% enddanger %}

#文章信息展示

ModernDuang 在每篇文章页面中自动展示多项实用信息，帮助读者快速了解文章概况并提升浏览体验。

#字数统计与阅读时间

每篇文章页面会自动计算并显示字数统计和预计阅读时间：

• 字数统计：剥离 HTML 标签后统计纯文本字符数。中文字符每个计 1 字，英文单词按空格分隔计数。
• 阅读时间：基于每分钟阅读 400 字的平均速度估算，结果向上取整。例如一篇 2000 字的文章，预计阅读时间约为 5 分钟。

计算逻辑在 layout/post.ejs 中自动执行，无需任何配置。阅读时间显示在文章标题下方，与发布日期、分类等信息并列。

#版权声明

每篇文章底部会自动显示版权声明，采用 CC BY-NC-SA 4.0 协议：

• 署名：显示文章作者（取自 Hexo 主配置中的 author 或文章 author 字段）
• 来源：显示文章原始链接
• 协议：知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

版权声明自动包含以下要素：

• 作者名称（可点击跳转到 /about 页面）
• 文章标题和原始链接
• 协议图标和链接
• 禁止商业使用的提示

如果你使用的是其他版权协议，可以通过修改 layout/post.ejs 中的版权区块来自定义。

#目录导航（TOC）

ModernDuang 在文章页面左侧固定区域提供动态生成的目录导航（Table of Contents）：

• 自动生成：从文章的 h1 至 h4 标题中提取，无需手动编写
• 层级展示：h1 为顶级目录项，h2 缩进一级，h3/h4 再缩进
• 智能折叠：默认只展开当前 h1 章节下的子标题，保持目录简洁
• 滚动高亮（Scroll Spy）：随着页面滚动，当前阅读位置对应的目录项自动高亮
• 平滑滚动：点击目录项后平滑滚动到对应标题位置
• 固定定位：目录面板随页面滚动保持可见，不会遮挡文章内容

目录导航通过 source/js/main.js 中的 JavaScript 动态生成和交互，在移动设备上自动隐藏以节省屏幕空间。

#回到顶部按钮

当页面滚动超过 400px 后，右下角会自动出现一个回到顶部按钮：

• 按钮为圆形图标，带粘土风格的凸起阴影
• 点击后页面平滑滚动回顶部
• 回到顶部后按钮自动隐藏
• 与主题配色自动适配，支持亮色和暗色模式

该功能由 source/js/main.js 中的滚动监听逻辑实现，无需额外配置。

#相关页面

• 配置参考 — 查看所有配置选项
• Mermaid 图表 — 在文章中嵌入流程图和图表