使用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>

4.效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

动态图表系列4|列表框(index函数)

今天跟大家分享动态图表系列3——列表框(index函数)! 数据与之前的数据一致,核心技巧只有两点: 使用列表框制作动态数据源; 使用 动态数据源插入动态图表。...

3257
来自专栏知晓程序

开发 | 小程序自定义组件怎么用?看完这篇文章你就知道了

之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时,官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦。

1063
来自专栏GuZhenYin

[EasyUI美化换肤]更换EasyUi图标

前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是...

3508
来自专栏州的先生

在Python爬虫中将PhantomJS伪装成Chrome浏览器

1554
来自专栏Jerry的SAP技术分享

如何从ERP下载Sales BOM到CRM

BOM的抬头维护material 1419,在BOM的component部分维护另外两个material 1421和1422。

3297
来自专栏依乐祝

.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CM...

1193
来自专栏前端杂货铺

IE6下的png透明图片的背景定位

在IE6下PNG透明图片做背景,无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。 另外,由于IE6下的 :ho...

3449
来自专栏张戈的专栏

为WordPress开启Nginx缩略图功能,七牛从此陌路

张戈博客曾分享过不少关于云存储的一些经验技巧,对七牛感兴趣或者遇到相关问题的朋友可以看一看以前的相关文章: 七牛&又拍云 CDN 云存储节省 GET 次数的小...

3795
来自专栏java系列博客

IDEA全局护眼色

1723
来自专栏编程微刊

微信小程序踩坑记

在创建项目->添加项目时选择的项目目录的文件夹下不能有次级文件夹,如果有次级文件夹 即便是空文件,也会报如上的错误,在选择项目时,应该把程序项目中的顶级文件夹作...

1324

扫码关注云+社区