Vuepress 中自定义锚点(anchor)
# Vuepress 中自定义锚点(anchor)
#
- 实现与标题中的锚点一致的格式,但是不显示标题的锚点
基本思路
- 实现的方法是借助现有的锚点的格式,然后借助不常用的
<h6>
标签来实现- 借助
<h6>
标签主要是为了方便利用现在的锚点格式 - 更好的解决方案应该是使用
<div>
,但是目前使用<div>
,没有使用<h6>
的效果- ⌛tag+todo 最好使用
<div>
- ⌛tag+todo 最好使用
- 借助
css 的样式如下
h6.anchor-user-defined
font-size: 1.25em
margin-top (0rem - $navbarHeight) !important
padding-top ($navbarHeight) !important
h6.anchor-user-defined + *
margin-top: 0px !important
1
2
3
4
5
6
7
2
3
4
5
6
7
- 根据导航栏的高度设置锚点的
margin-top
和padding-top
- 主要是为了使得锚点跳转后,导航栏不至于遮挡锚点的内容
- 此
css
将自定义锚点后的一个标签的margin-top
设为0px
- 目的是为了让
#
锚点符号与要显示的块对齐 - 同时由于
margin
的重叠效果,可以减小引入<h6>
标签所导致的块与块之间的间隔
- 目的是为了让
使用示例
<h6 id='自定义' class='anchor-user-defined'>
<a href='#自定义' class='header-anchor'>#</a>
</h6>
* 实现与标题中的锚点一致的格式,但是不显示标题的锚点
1
2
3
4
5
2
3
4
5
- 效果图
提示
如果锚点与其余标题标签相邻,可以在 <h6>
前加上一个换符 <br>
编辑 (opens new window)
上次更新: 2022/01/26, 21:01:00