自动生成博客目录：Markdown转HTML中的智能导航-CSDN博客

本文链接：https://blog.csdn.net/AHcola233/article/details/119604174

博客自动生成目录

本篇文章讲述为博客文章添加自动生成目录的功能。

大家可以点击我博客网站的每一篇文章，查看自动生成的目录的效果。
showdown主页图片

讲述功能之前，我先说下我的博客文章从编写到发布展现给读者的大致过程。我的文章都是在本地用markdown语法编写的，待文章写完后，就直接从网站管理后台上传至服务器，这时读者就可以在我的网站看到我刚发布的文章了。当读者点击某一篇文章时，浏览器会发送一个请求，请求这篇文章获得文章的信息（包括markdown内容），请求成功后，markdown会被转换成html格式（这个转换我用的是Showdown.js库完成的），有了html代码，就可以直接在页面上展示了。

自动生成目录的功能，就是分析博客文章转换后的html代码，得到各个部分的标题，用标题组成目录。

代码实现

功能代码实现如下。

interface CatalogNode {
   
   
    title: string; // 目录名称
    tag: string; // 标题元素的tag，"h1", "h2", "h3", "h4", "h5", "h6"，表示该标题是几级标题
    childs: CatalogNode[]; // 该目录下的子目录
    id: string; // 标题元素的id属性值，用于跳转到文章指定标题位置
};

/**
 * 生成目录
 * @param htmlText html内容文本
 */
const generateCatalog = (htmlText: string) => {
   
   
    const tags = ["h1", "h2", "h3", "h4", "h5", "h6"