使用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 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

在CentOS上用Caddy安装WordPress

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中...

2714
来自专栏Youngxj

[教程]查看浏览器保存的加密密码

2704
来自专栏企鹅号快讯

基于cookie的登陆验证与退出

看到信息里面有这样一条疑问: 是一个关于关于cookie登陆退出的问题。问题原文为:怎么实现退出登陆,页面跳转到登陆页面,前端登陆后,后端返回字段设置cooki...

29910
来自专栏散尽浮华

centos下升级git版本的操作记录

在使用git pull、git push、git clone的时候,或者在使用jenkins发版的时候,可能会报类似如下的错误: error: The req...

2278
来自专栏Timhbw博客

防止WordPress后台被暴力破解

2017-04-0613:34:01 发表评论 955℃热度 WordPress作为使用人数最多的博客系统,一直是大家关注的焦点,不安好心的人找漏洞,钻空子爆...

3856
来自专栏Laoqi's Linux运维专列

FTP服务搭建和配置

3887
来自专栏玄魂工作室

[技巧]看我如何通过Weeman+Ettercap拿下路由器管理权限

本文作者:sn0w 原文链接:https://zhuanlan.zhihu.com/p/20871363 本篇文章主要介绍如何在接入无线网络后如何拿到路由器的...

3338
来自专栏网络

Tomcat服务器+JSP页面+MySQL数据库网站部署

一、关于Tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由A...

3916
来自专栏杨逸轩 ' sBlog

利用CSS 给表单必选项添加星号

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

Chrome浏览器扩展程序的本地备份

由于众所周知的原因,有些朋友可能很难在线下载Chrome扩展程序。一种选择是可以让朋友把他成功安装的Chrome扩展程序导出成本地文件,然后让朋友发送给自己,在...

854

扫码关注云+社区