VitePress-03-标题锚点的使用与文档内部链接跳转

说明

本文介绍如下内容:
1、vitepress 中 md 文件中的标题锚点
2、锚点的使用 : 文档内部的快速跳转

锚点

什么是锚点

锚点 : 通俗的理解就是一个位置标记,通过这个标记可以快速的进行定位。
【vitepress 中,md 文档的标题就默认的一个锚点。】

定义锚点的两种方式

默认方式

md 文件中的标题自带锚点属性, 默认会以 标题名称作为锚点的名称

自定义锚点名称

语法格式 : # 标题名称 {#锚点名称}
【注意】 标题不局限于 一级标题,任意级的标题都可以。
例如 :
# 一级标题 {#header1}
## 二级标题 {#header2}
### 三级标题 {#header3}

使用锚点的语法格式

当前文档内跳转 :[展示的文案](#锚点的名称)
跨文档的跳转:[展示的文案](目标文档的相对路径#锚点的名称)

使用锚点跳转案例

锚点的作用就是进行快速的定位,
就像是一个链接,点击一下就跳到了我们想要的位置。

项目说明

项目的目录结构如下:(仅展示主要用到的文件)

projectName
	| -- helloworld.md  # 演示锚点跳转的主要文件
	| -- srca
		| -- index.md   # 锚点的目标文件
		| -- a.md       # 锚点的目标文件
helloworld.md 文件内容(重点)
# 体会【标题锚点】的基本使用
> hello world for router in vitepress

# 这是一级标题
这是根目录的 helloworld.md 文件 
> 这是 一级标题 的锚点

## 这是二级标题
> 这是 二级标题 的锚点

## 自定义标题锚点 {#myheader}
> 这是自定义标题的锚点小结

## 文档内部跳转-标题锚点的使用
[跳转到一级标题 - (这是一级标题)](#这是一级标题) <br>
[跳转到二级标题 - (这是二级标题)](#这是二级标题)<br>
[跳转到自定义锚点的标题](#myheader)<br>


## 链接其他文档中的锚点
[跳转到srca/a.md文件的标题](./srca/a#aheader)
[跳转到srca/index.md文件的标题](./srca/#srcaheader)<br>

srca/index.md 文件内容
# 这是 srca/index.md 文件 {#srcaheader}
恭喜你,成功的完成了锚点的跳转
这是 srca/index.md 文件
srca/a.md 文件内容
# 这是 a.md 文件 {#aheader}
恭喜你,成功的完成了锚点的跳转
这是 srca/a.md 文件

同一个文档内部的跳转

语法格式 : [展示的文案](#锚点的名称)
例如 : 上面 helloworld.md 文档中的 【文档内部跳转-标题锚点的使用】小结
效果如下图 :

在这里插入图片描述

在这里插入图片描述

不同文档的跳转

语法格式 :[展示的文案](文件的相对路径#锚点的名称)
例如 :上面 helloworld.md 文档中的 【链接其他文档中的锚点】小结
情境一明确指出到哪个文件的哪个锚点
情景二相对路径只到目录,后面跟了锚点,则会跳转到该目录下的 [index.md]文件的对应锚点上。
运行效果如下:

在这里插入图片描述

指定具体文件的具体锚点不指定具体文件但有锚点
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

至此,文档锚点的使用就完成了。

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML中实现锚点定位并具有滚动效果的方法有多种。一种常见的方法是使用CSS的scroll-behavior属性和a标签的href属性。首先,在CSS中设置scroll-behavior属性为smooth,这将使得滚动条在滚动时具有平滑的效果。然后,在a标签中的href属性中设置目标位置的id值,例如#section。当点击该链接时,页面将会平滑滚动到相应的目标位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [HTML锚点定位+平滑滚动](https://blog.csdn.net/m0_64520392/article/details/128941349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [微信小程序-scroll-view滚动到指定位置(类似锚点)](https://download.csdn.net/download/weixin_38601878/16213063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例](https://download.csdn.net/download/weixin_38665822/13982520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值