705 字
4 分钟
页面浏览--访问次数--
Markdown 内容注释

内容注释比传统脚注更轻:正文里放一个标记,说明文字在宽屏显示为右侧边缘的旁注卡片,窄屏/触屏轻触标记唤出浮层。

基础用法#

效果:Astro 采用孤岛架构 来保持页面的极速加载。

源码(标记是 [+标签],定义是 [+标签]: 换行后缩进 2 个空格)

Astro 采用孤岛架构 [+islands] 来保持页面的极速加载。
[+islands]:
孤岛架构指由静态 HTML 所包裹的独立交互组件区域,只有交互区域才加载 JavaScript。

一段里放多个标记#

效果:本站内容分离成两个仓 ,构建与部署交给托管平台 ,评论则放在另一个公开仓的 Discussions 里 。

源码

本站内容分离成两个仓 [+two-repos],构建与部署交给托管平台 [+deploy]。
[+two-repos]:
代码仓放主题与自研功能,内容仓放文章、动态与个人配置,两者互不污染。
[+deploy]:
内容仓推送后由平台侧自动重建站点,不需要手动跑构建命令。

写法要点#

项规则
行内标记[+标签],1 个加号、方括号紧贴、无空格
定义块[+标签]: 冒号后不写内容、直接换行
定义正文下一行起,缩进 2 个空格
同名定义同一标签可以累积多条定义
生效范围仅当前文章

边界行为(本仓实测)#

  • 未定义的引用会原样保留:正文里写 [+undefined-tag] 只会显示为普通文本,不会生成标记;
  • 定义但没人引用的注释不会输出到正文,定义块本身也不渲染;
  • 标记与链接、代码、强调等行内语法相邻组合都可以;
  • 注释内容是服务端输出的静态 HTML,对爬虫与无障碍访问都友好。

查看方式:宽屏下把页面拉宽能看到右侧旁注,缩窄窗口后改为轻触标记弹出浮层——两种布局都实现过,可以拖动浏览器宽度对比。

第 9 篇,共 23 篇本文属于系列

Markdown 内容注释
https://www.klucen.cn/posts/博客搭建/markdown-annotations/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

最后更新于 ,距今已过 301 天

部分内容可能已过时