开发者社区> 小雨雨hi> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【Markdown】使用锚点在页面之间跳转

简介: 前言 最近项目的文档都托管到GitLab上的wiki上,包括接口文档。 于是就需要在上一级页面直接通过链接指向下一级详细页面的某个具体API的说明。 所以,需要用到锚点定位。
+关注继续查看

前言

最近项目的文档都托管到GitLab上的wiki上,包括接口文档。

于是就需要在上一级页面直接通过链接指向下一级详细页面的某个具体API的说明。

所以,需要用到锚点定位。

别人的做法

之前查过别人的博客,大家的做法是

采用div中的id属性,运用HTML中的锚点做法,来做markdown中的锚点

但是经过我的实践,这种做法是不能在GitLab上实现的。

自己动手

环境

线上 -> GitLab中的wiki

本地 ->GitLab托管项目中的wiki项目,本地已经部署了gollum

如何部署gollum本文不做展开,其他人的博客还是靠谱的。

GitLab

举例

第一级页面文件为 menu.md
第二级页面文件为api_list.md
api_list.md中大体布局为如下所示


#h1


##h2/1

text

##h2/2

text

在一级页面直接二级页面某个节点的格式为

[API名字](api_list#h21)

已经明确的规则如下

  • #后面直接接对应的标题内容
  • 不推荐使用中文
  • 如果有/,直接忽略掉
  • 链接不要加.md,如果加上的话,会直接跳转到展示源文件

gollum

经过这次实践,明白了gollum的作用

  • 本地构建wiki页面,方便预览
  • 直接修改文件无效,只渲染git上的最新的提交记录
  • 页面上可以直接修改文件,查看修改效果,但是不会作用在本地文件
  • 页面修改确认无误后,再通过修改页面粘贴到本地文件,防止了为了测试效果反复提交版本

链接跳转规则

[API名字](api_list#h1_h2-1)

和GitLab不同的是

  • 必须从最高一级标题开始,通过_进行连接
  • /-替换

这样就完成了不同页面内跳转的需求。

方法

在预览界面,鼠标停留在需要跳转到到的标题前面,复制链接地址

总结

  • 每个markdown预览工具的展示规则可能不会一致
  • 别人写的博客不一定对
  • 随着工具版本迭代和自己水平的提高,以前自己写的博客也不一定对,所以,工具的版本很重要

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
页面中iframe中嵌入一个跨域的页面,让这个页面按照嵌入的页面宽高大小显示的方式;iframe嵌套的页面不可以编辑的问题解决方案
<html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow: hidden; } </style> </head&
1223 0
让页面中的元素在网页最底部的代码片段
代码片段内容: &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;欢迎页面&lt;/title&gt; &lt;meta http-equiv="Co
1036 0
网页页面下各种标签的含义
1、charset: 2、X-UA-Compatible: 3、canonical : 4、dns-prefetch: 5、keywords 6、viewport 7、description
0 0
【转】网页底部“回到顶部”功能代码
在网页的body最后加上代码: 回到顶部 然后用CSS控制,CSS代码:#control_pannel{background:#FFF none repeat scroll 0 0;border:2px solid #EFEFEF;bottom:2px;padding:1px;positi...
642 0
使用vue-router却导致页面空白无法呈现-报错?
使用vue-router却导致页面空白无法呈现-报错?
0 0
使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
0 0
a标签不跳转的几种实现方式
a标签不跳转一共收集了3种方法 1、onclick事件中返回false 不能跳转的写法及demo &lt;a href="http://www.baidu.com" onclick="return false" &gt;不能跳到百度&lt;/a&gt; 2、 用href=”javascript:void(0)”这种伪协议;(这种伪协议,少写的好)
1694 0
+关注
小雨雨hi
CSDN学院讲师、博客专家,专注服务端开发,服务端架构演变,区块链技术研究,项目管理,热衷学习前沿技术,以及日常的技术分享,曾经历过创业技术合伙人角色。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载