使用autoc js生成文章目录（侧边）导航栏

Posted 2020-10-22 程序员同行者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用autoc js生成文章目录（侧边）导航栏相关的知识，希望对你有一定的参考价值。

介绍：

　　autocjs 是一个专门用来生成文章目录（Table of Contents）导航的工具。autocjs 会查找文章指定区域中的所有 h1~h6 的标签，并自动分析文章的层次结构，生成文章的目录导航（独立的侧边栏菜单，或者在文章的开始处生成文章目录）。

支持 AMD 和 CMD 规范；
可以作为独立模块使用，也可以作为 jQuery 插件使用；
支持中文和英文（标题文字）；
界面简洁大方；
拥有 AnchorJS 的基础功能；
即支持生成独立文章目录导航菜单，又可以直接在文章中生成目录导航；
可直接在段落标题上显示段落层级索引值；
配置灵活，丰富，让你随心所欲掌控 AutocJS；

1.在前端引入

<link rel="stylesheet" href="https://unpkg.com/autocjs@1.3.0/dist/autoc.min.css">
<script type="text/javascript" src="https://unpkg.com/autocjs@1.3.0/dist/autoc.min.js"></script>

2.文章正文详情页如下

<div class="entry-content clearfix ">
        <div class=\'jupe\' id=\'needtoc\'>#id选择器名称随意
            {{ post_detail.body|safe }}
            <div class="widget-tag-cloud">
                <ul>
                    标签：
                    {% for tag1 in post_detail.tags.all %}
                        <li><a href="{% url \'blog:tag\' tag1.pk %}"># {{ tag1.name }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
</div>

3.在底部加入JavaScript

详细配置请看https://github.com/yaohaixiao/autocjs

<script src="{% static \'blog/js/script.js\' %}"></script>
    <script type="text/javascript">
        new AutocJS({
            article: \'#needtoc\',#文章的ID选择器名称
            isOnlyAnchors: true,
            //selector: \'h1\',
            // 不配置 selector 属性，即使用默认选择器
            title: \'文章目录\',
        });

    </script>