MarginNote 侧边注解功能

本博客新增了侧边注解功能。在宽屏（≥1300px）下，注解出现在文章左侧空白区域；窄屏下点击 # 标记会弹出浮层显示注解内容。

使用方法

在 Markdown 中用 sidenote 短代码包裹注解内容：

这是一段正文{{< sidenote >}}这是侧边注解内容，支持 **Markdown** 格式和 [链接](https://example.com)。{{< /sidenote >}}，标记出现在文字旁。

• 短代码名称：sidenote
• 注解内容支持 Markdown 语法（加粗、链接、行内代码等）
• 注解位置跟随标记出现的地方

基础用法

使用 sidenote 短代码包裹注解内容，标记后的文字旁会出现一个蓝色 # 上标，左侧边距对应位置显示注解。

这是一段正文文字，后面紧跟着一个侧边注解^#这是最基本的侧边注解，用于补充说明。，可以看到标记位置出现了一个蓝色 # 上标。

注解内容支持 Markdown 格式^#Markdown 格式包括 加粗、斜体、行内代码 等。，你可以在注解中使用各种排版元素。

实际应用场景

术语解释

在技术文章中，可以用侧边注解来解释专业术语，避免打断正文阅读流。这样既保持了正文的流畅性，又为需要深入了解的读者提供了便捷的补充信息。

Hugo 使用 Go 语言的模板引擎来渲染页面^#Hugo 的模板引擎支持 Go 语言的全部模板语法，包括条件判断、循环、变量定义等。模板文件位于 layouts/ 目录。，其模板文件位于 layouts/ 目录。模板引擎通过点号 . 来访问当前上下文，. 代表当前作用域下的变量。

引用出处

侧边注解也非常适合标注引用来源，省去脚注跳转的麻烦。

坐而论道，不如起而行之。 ——《周礼·冬官考工记》

正如上文所言，实践是检验真理的唯一标准。计算机科学领域的许多经典著作都强调动手实践的重要性^#例如《计算机程序的构造和解释》（SICP）就强调"学习编程的最好方式就是编程"。。与其阅读大量教程而不动手，不如直接上手写代码。

补充说明

当正文需要补充背景信息，但又不想让主线显得冗长时，侧边注解是很好的选择。

Hugo 是目前最流行的静态网站生成器之一^#Hugo 由 bep 用 Go 语言开发，以构建速度快著称，能在毫秒级内渲染数千页面。，它支持丰富的模板语法、多种内容格式以及强大的自定义能力。本博客使用 Hermit 主题^#Hermit 是一款极简风格的双栏 Hugo 主题，专注于阅读体验，支持明暗模式切换。，本次新增的 MarginNote 功能将侧边注解放置在文章左侧——那里原本是空白的。

多个连续注解

侧边注解可以在一段文字中多次使用，它们会依次排列在左侧边距中，不会互相遮挡。

第一点说明^#这是第一处注解，位于段落开头附近。第二点说明^#这是第二处注解，紧随第一处之后。第三点说明^#这是第三处注解。可以看到多个注解在左侧边距中按顺序依次排列。这就是多个连续注解的效果展示。

短段落中的注解

即使是很短的段落也可以添加注解。^#短段落中的注解同样会出现在左侧边距。

甚至单独一个词也可以。^#单个词的注解。

小结

侧边注解功能通过短代码 + CSS + JS 实现，核心逻辑参考了 Tai’s Blog 的方案，并针对 Hermit 主题适配为左侧边距布局。在 ≥1300px 宽屏下生效，窄屏点击 # 标记弹出浮层。