锚点跳转
在 vuepress 或者 Github 中进行锚点跳转的语法介绍以及使用案例,可以理解为非常简单的双向链接。
锚点语法
[要显示的文字](#要跳转的连接)
- 括号里的
#
只能写一个,不管要跳转到几级标题都只写一个#
- 括号里的链接如果有特殊字符需要转码,如果不知道特殊字符如何转码可先在 markdown 源码中输入这些符号,然后在网页端的 vuepress 文档上将鼠标停留在需要跳转到到的标题前面,再复制链接地址即可。
语法规则
- 大写字母全部转换成小写,如:VUEPress 转为 vuepress
- 空格用 - 代替,如:"这是 vuepress" 转为 "这是-vuepress"
. 以及中文 ?以及中文 ,
转为 -,如:" vuepress2.0.0-beta.46" 转为 " vuepress2-0-0-beta-46",但在 Github 中需要去掉 .- 标点符号,如:问号和顿号还有句号等可用正常使用。
获取锚点链接
- 在网页端打开发布的 vuepress 文档,然后鼠标停留在需要跳转到到的标题前面,复制链接地址,此方法也适用于 Github,效果如下图:
跳转到同一页面内指定位置
使用 Markdown 语法提供的锚点链接
- 锚点语法:
[点我查看](#适用于-vuepress2-0-0-beta-46-的-config-js)
- 标题内容:
## 适用于 vuepress2.0.0-beta.46 的 config.js
使用 HTML 形式的锚点链接(但不适用于 Github)
- 锚点语法:
[点我查看](#plugin)
或者<a href="#plugin">点我查看</a>
- 标题内容:
## <a name="plugin">适用于 vuepress2.0.0-beta.46 的 plugin.js</a>
- 注意:上面的标题内容也可写成:
<span id="plugin">适用于 vuepress2.0.0-beta.46 的 plugin.js</span>
,这时候必须使用 id 而不能用 name
使用锚点跳转到不同的页面
- 如我想从本文跳转到 这里,其语法为
[这里](./tab栏使用案例.md#vuepress2-0-0-beta-46-中的简写)
链接到非标题的内容
- 先在本文或者其它页面非标题位置添加
<span id="postion" class="anchor">这里是你要跳转到的文字内容</span>
,此处的class="anchor"
目的是为了修复锚点跳转位置偏移错误 - 然后使用
<a href="#postion" >点我查看</a>
可跳转到同页面的非标题内容区,效果:我要跳转到同页面的非标题内容区 - 用
[我要跳转到其它页面非标题内容区](./vueprss.md#test)
跳转到其它页面的指定位置,效果:我要跳转到其它页面非标题内容区 - 但此处跳转的位置还是和正确的位置有偏差,可查看 https://github.com/vuejs/vuepress/issues/2771
- 参考:刷新页面不能跳转到锚点位置
FAQ
问:锚点已生效,却无法点击到正确位置
- 检查特殊符号是否已经进行了 url 转码,如:
, 、. 空格 以及大写字母
等是需要进行转码的 - 查看渲染后的 HTML 语句,然后通过 http://www.jsons.cn/urlencode/ 查看转码后的内容是否和标题内容一致
- 将鼠标停留在需要跳转到到的标题前面,复制链接地址