锚点跳转

在 vuepress 或者 Github 中进行锚点跳转的语法介绍以及使用案例,可以理解为非常简单的双向链接。


锚点语法

  • [要显示的文字](#要跳转的连接)
  • 括号里的 # 只能写一个,不管要跳转到几级标题都只写一个 #
  • 括号里的链接如果有特殊字符需要转码,如果不知道特殊字符如何转码可先在 markdown 源码中输入这些符号,然后在网页端的 vuepress 文档上将鼠标停留在需要跳转到到的标题前面,再复制链接地址即可。

语法规则

  • 大写字母全部转换成小写,如:VUEPress 转为 vuepress
  • 空格用 - 代替,如:"这是 vuepress" 转为 "这是-vuepress"
  • . 以及中文 ?以及中文 , 转为 -,如:" vuepress2.0.0-beta.46" 转为 " vuepress2-0-0-beta-46",但在 Github 中需要去掉 .
  • 标点符号,如:问号和顿号还有句号等可用正常使用。

获取锚点链接

  • 在网页端打开发布的 vuepress 文档,然后鼠标停留在需要跳转到到的标题前面,复制链接地址,此方法也适用于 Github,效果如下图: vuepress anchor

跳转到同一页面内指定位置

使用 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-中的简写)

链接到非标题的内容

FAQ

问:锚点已生效,却无法点击到正确位置

  • 检查特殊符号是否已经进行了 url 转码,如:, 、. 空格 以及大写字母 等是需要进行转码的
  • 查看渲染后的 HTML 语句,然后通过 http://www.jsons.cn/urlencode/ 查看转码后的内容是否和标题内容一致
  • 将鼠标停留在需要跳转到到的标题前面,复制链接地址

参考

上次更新:
贡献者: iEchoxu