【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预览工具的展示规则可能不会一致
  • 别人写的博客不一定对
  • 随着工具版本迭代和自己水平的提高,以前自己写的博客也不一定对,所以,工具的版本很重要
目录
相关文章
|
8月前
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
428 28
|
JavaScript 搜索推荐 前端开发
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
597 0
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
901 0
Markdown (CSDN) MD编辑器(一)- 实现页内跳转
Markdown (CSDN) MD编辑器(一)- 实现页内跳转
1090 0
|
Web App开发 测试技术
CSDN-markdown编辑器锚点链接添加方法
CSDN-markdown编辑器锚点链接添加方法 注:经过测试,CSDN-markdown编辑器通过ID属性来支持这一功能! 使用Name属性添加锚点是不受支持的,原因是在显示的时候,锚点名称被过虑掉了,如下图: 如果没有过虑的话,使用Name属性这一功能是可以实现的! 而经过博主“eson_15”测试使用ID属性是可行的。
1228 0
|
9月前
|
前端开发 Docker 容器
写作利器,一款极简的Markdown 编辑器
WeChat Markdown Editor 是一款高度简洁的微信 Markdown 编辑器:支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性。
486 70
写作利器,一款极简的Markdown 编辑器
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
606 1
Linux系统之部署轻量级Markdown文本编辑器
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
657 0
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
395 4
|
前端开发 C++ iOS开发
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
963 1