最近写文章时,发现有一个需求:想要实现一种点击跳转到文档中任意位置的功能,这就是锚点机制,就像游戏中的传送锚点,于是写成文章记录一下使用方式。
本文将详细介绍如何使用Markdown创建文档内部跳转(即锚点)。
什么是锚点?
锚点是一种HTML特性,允许你在页面中指定位置,使得用户可以通过点击链接直接跳转至该位置。虽然Markdown本身并不直接支持锚点,但通过结合HTML标签,我们可以在Markdown文档中实现这一功能。
在Markdown中创建锚点
锚点一:跳转到任意标记点
这种锚点我自称为 任意锚点
最直接的方式是使用HTML的<span>
标签来创建一个具有唯一ID的锚点:
<span id="my-section">这是一个跳转点</span>
然后,在文档的任意位置添加指向该锚点的链接:
[这里随便填](#my-section)
内容随便填,这种跳转链接的核心是标签里面的 ID值 id="my-section"
,会根据该标签ID值跳转到其他带有该ID的位置:(#my-section)
锚点二:跳转到任意标题(适用于某些解析器)
这种锚点我自称为 标题锚点
这种方式和上面这种一样,只不过标签ID值可以自己填成本文的标题
一些Markdown解析器(如GitHub Flavored Markdown)会自动为每个标题生成一个唯一的ID。这意味着你可以直接通过标题文字来创建跳转链接,而无需手动添加ID。例如,如果有一个标题## 线程的实现
,你可以这样创建跳转:
[这里随便填](#线程的实现)
注意,标题一定要填完整,不要填某标题的某几个字,必须完整!
如果这种不行,建议看一下这个优化版本:点击跳转
注意事项
- 确保所使用的 ID 在同一文档内是唯一的,以避免冲突:前面说过,这种锚点机制的跳转是根据识别 ID 值跳转的,你需要确保本文中这样的 ID 的唯一,否则会冲突!
- 如果你的Markdown文档最终会被转换为其他格式(如PDF),请注意这些格式是否支持内部跳转功能。
优化版
经过我的试验,发现锚点二的 标题锚点 在CSDN上写文章会有不小的限制,CSDN上标题传输只限于同级标题,不能传输到其他高级标题下,因此只能使用锚点一 任意锚点
// 起点
[点击跳转](#mypoint)
// 终点
<span id="mypoint"></span>
注意我这个终点是没有设置内容的!因此相当于隐形了!