今日写文时想到这个问题,于是去网络上搜索了解决办法,顺便用本文档记录一下。
内部跳转
关于内部跳转,参考了这篇文章 其实就是两步,一个是定义锚点(即要跳转到的点),另一个就是定义起始点(即点击哪里可以跳转)。
代码也很简单。
锚点
<span id = "锚点编号">锚点的文字</span>
起始点
[起始点文字](#锚点编号)
目录
接下来就是目录了,主要是参考这篇文章。(那种直接[toc]
生成的试了下不行,可能是IDE不同)
由于markdown内的标题都已经用#
,##
等定义好了,所以目录其实就是模仿超链接的做法,直接括号内用#对应标题文字
表示即可。
比如,本文是有创建三个二级标题,这里加个三级标题:
三点一
那么目录只需用如下代码即可(-
表示显示区域里的空格;标题排布则用有序列表或者无序列表实现):
当然,这里只是为了了解原理(列表+内部链接),实际上并不需要一个一个手动添加,(以vs code为例)只需先去安装markdown all in one
插件,然后用F1
或者ctrl+shift+P
调出命令面板,找到插件里自动生成目录的功能即可;如果想给标题添加类似于1.2.1
的序号,也可以在其中找到该功能。最重要的是,**此方法可以随时更新!**比如,下面就是此方法实现的一个目录:
直接ctrl+S
保存后即可看到更新后的目录,非常方便;之后可以ctrl+shift+V
来开启预览。
标题返回目录
结合前述的内部链接跳转功能,还需要实现点击标题回到目录,这样长文编辑、阅读起来才会更方便。好吧其实是为了编辑,因为阅读一般有侧边栏帮助实现内部标题跳转的功能了。
由于只需要点击回到目录,所以只要给目录出加上一个锚点即可。假设下面就是添加的锚点,也就是说,任何附上锚点编号的起始点,点击后都会跳到这里:
看这里
需要注意的是,锚点编号最好不要和标题内容重叠,否则会锚到对应标题,而不是该代码块处。
之后每个标题都附带上内部链接即可。我只做了内部链接这个标题(这里即是一个内部跳转)。
添加小图标
当然,也有不满的地方,就是目录默认用的无序列表图标比较丑,如果想换成个性化的图标怎么办?
这个有些麻烦,首先,由于上文所使用的插件相当于是把生成目录的过程打包了,如果他不提供更换图标的功能,除非fork源码自己改一下,否则没办法用他的目录生成功能换上自己的图标。而如果不用他的功能,手动生成还要即时更新又太麻烦;fork源码自己改这个现阶段我又确实不会。所以这个想法暂时放弃了,丑就丑吧,能用就行。
anyway还是搜到了一个小图标方面的,为了方便之后文章里添加记录一下。
首先从Emoji Unicode Table查询自己想用的小图标,比如🌈,其unicode编码为U+1F308
,去掉U=
前缀,将其插入&#x插入这里;
中,即可将图标显示在markdown文档中。
文件结构
顺便看到了一个讲输出文件结构的,顺手记录下,方便以后用到。
首先需要安装一个mddir包:npm install mddir --save
执行node mddir "../../../"
即可,如果没有指定路径,mddir将默认为mddir/src
文件夹之上的三个文件夹(假设mddir安装在:project/node_modules/mddir/src
中)。
mddir会生成对应的markdown文件结构directoryList.md
评论区