ZblogPHP纯代码实现文章索引目录锚点功能

前几天写了一篇《ZblogPHP目录索引插件不生效》一文，当时是直接在Zblog应用中心安装的正文目录索引 1.1.1插件，实现了文章目录索引，虽然是实现了文章索引锚点样式，但是这款插件会给用户带来不好的体验感，所以就想着能不能使用纯代码实现。

不利于用户体验的插件

首先很感谢这位开发者提供了这样一个免费插件，插件也很受欢迎，下载量也快破1000，但是用户体验确实不太好，弹出文章索引目录时，会遮挡住正文部分，而且在手机端用户体验会更差。

PC端使用正文目录索引 1.1.1后的截图，虽说可以对这个索引目录位置进行调整，但是确实不太喜欢安装太多插件。

文章索引目录实现原理

文章索引目录实现原理其实很简单，就是查找文章正文部分中是否包含有H1-H5之间的标签，然后把这些H1-H5之间的标签拿出来，使用a标签的锚点属性，重新生成一个索引目录，这样就显示了文章索引目录，简单的使用Js代码就能实现文章索引目录。

jQuery代码实现文章目录索引

jQuery代码实现文章索引目录，有以下几个地方需要注意：

1、需要在Zblog主题中找到文章主题部分中包含文章正文部分的Css选择器。例如：

                <div class="wz_content">
                    {$article.Content}
                </div>

那么这个文章正文的选择器就是.wz_content。

2、需要先加载jQuery库文件，然后再写入文章目录索引的jQuery代码。

实现文章索引目录的jQuery代码：

<script>
var padding=[10,20,30,40,50];//不同的标题等级缩进大小
$('.wz_content').find('h1,h2,h3,h4,h5').each(function(index,item){
    var that=$(this);
    $('<a name="title'+index+'"></a>').insertBefore(that);//插入锚点地址
    var tagName=that[0].tagName.toLowerCase();
    var tagIndex=parseInt(tagName.charAt(1))-1;//根据标题等级分类，并设置不同的缩进。
    $('#wz-mulu').append($('<a href="#title'+index+'" style="padding-left:'+padding[tagIndex]+'px;display:block;">'+that.text()+'</a>'));
});
</script>

代码解析：

1、.wz_content为文章正文部分的css选择器，上面列举的调用ZblogPHP正文部分标签的上一层Class选择器。

2、#wz-mulu是创建文章索引目录后，放置H标签的Id选择器，这个Id选择器可以根据自己主题的情况随意设置。

3、上面的代码块需要先引入jquery.min.js文件，需将上面的代码放在jquery.min.js之后。

上图中圈出的部分就是实现ZblogPHP纯代码实现文章目录样式效果截图，可以再根据自己的主题情况对Css进行设置和做好自适应，基本上看上去也就完美了。

上面分享的代码是基于jQuery实现的文章索引目录，所以只要是找对了包含文章正文部分的Css选择器，所有的Cms和建站系统基本上都能实现文章索引目录的功能。