markdown生成文章目录以及在页面内实现锚链接跳转

谁践踏了优雅 2024-04-18 13:08 65阅读 0赞

### 自定义目录名字： ###

*   *   *   *  1. 生成文章目录
             *  2. 在页面内实现锚链接跳转

#### 1. 生成文章目录 ####

生成文章目录的话非常简单，只需要你输入 \[toc\] 或者 \[@toc\] 即可，

> 注意点：\[toc\] 或 \[@toc\] 要独占一行，后面可以加(自定义目录名字)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]

#### 2. 在页面内实现锚链接跳转 ####

就是和我们写html一样，给个id然后通过找id的方式跳转，当我们在mackdown里面写标题的时候会自动生成一个id，需要你手动打开控制台去看这个id是什么：  
不会控制台调试的小伙伴请点击此处：[https://mp.csdn.net/mdeditor/94882741\#][https_mp.csdn.net_mdeditor_94882741]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]  
而后我们把那个 2\_\_6 复制下来。  
写俩种方式跳转到id “2\_\_6”:

mockdown语法跳转到id “2\_\_6”  
a标签跳转到id “2\_\_6”

// mackdown语法锚链接跳转
    [mockdown语法跳转到id "2__6"](#2__6)
    
    // a标签方式实现锚链接跳转
    <a href=#2__6>a标签跳转到id "2__6"</a>

> 重要的事情说三遍！  
> 遇到任何问题未实现锚链接跳转请审查你的id与你的跳转锚点是否一致！！！  
> 遇到任何问题未实现锚链接跳转请审查你的id与你的跳转锚点是否一致！！！  
> 遇到任何问题未实现锚链接跳转请审查你的id与你的跳转锚点是否一致！！！

还有什么问题请下方评论~  
笔者十二小时之内会回复的！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1762b734f5f14f82a0d65193768db922.png
[https_mp.csdn.net_mdeditor_94882741]: https://mp.csdn.net/mdeditor/94882741#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8de12a849e614344a14a5721dfc5126a.png