介紹：

　　autocjs 是一個專門用來生成文章目錄（Table of Contents）導航的工具。autocjs 會查找文章指定區域中的所有 h1~h6 的標簽，並自動分析文章的層次結構，生成文章的目錄導航（獨立的側邊欄菜單，或者在文章的開始處生成文章目錄）。

• 支持 AMD 和 CMD 規範；

• 可以作為獨立模塊使用，也可以作為 jQuery 插件使用；

• 支持中文和英文（標題文字）；

• 界面簡潔大方；

• 擁有 AnchorJS 的基礎功能；

• 即支持生成獨立文章目錄導航菜單，又可以直接在文章中生成目錄導航；

• 可直接在段落標題上顯示段落層級索引值；

• 配置靈活，豐富，讓你隨心所欲掌控 AutocJS；

1.在前端引入

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/autoc.min.css">
<script type="text/javascript" src="https://unpkg.com/[email protected]/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>

4.效果

使用autoc js生成文章目錄（側邊）導航欄