专栏首页程序员同行者使用autoc js生成文章目录(侧边)导航栏

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

相关文章

  • 07-部署Flanneld网络

    程序员同行者
  • python3模块: sys

    程序员同行者
  • cobbler koan自动重装系统

    程序员同行者
  • 实践篇 | 推荐系统之矩阵分解模型

    ? 导语:本系列文章一共有三篇,分别是 《科普篇 | 推荐系统之矩阵分解模型》 《原理篇 | 推荐系统之矩阵分解模型》 《实践篇 | 推荐系统之矩阵分解模型》...

    腾讯技术工程官方号
  • HBase生产环境优化不完全指南

    HBase集群一旦部署使用,再想对其作出调整需要付出惨痛代价,所以如何部署HBase集群是使用的第一个关键步骤。

    王知无
  • 框架篇-Django博客应用-权限控制

    然后让 BlogPublishView 和 BlogEditView 类继承 AdminRequiredMixin即可。

    小团子
  • [转自blueidea]像table一样布局div Ⅰ

    翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

    菩提树下的杨过
  • 使用Apache的ab进行压力测试

    概述 ab是apache自带的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab然后进行apache 负载压力测试。 后台测试开发中,常用的压...

    xiangzhihong
  • 深度召回模型在QQ看点推荐中的应用实践

    导语:最近几年来,深度学习在推荐系统领域中取得了不少成果,相比传统的推荐方法,深度学习有着自己独到的优势。我们团队在QQ看点的图文推荐中也尝试了一些深度学习方法...

    腾讯技术工程官方号
  • 深度召回模型在QQ看点推荐中的应用实践

    ? 导语:最近几年来,深度学习在推荐系统领域中取得了不少成果,相比传统的推荐方法,深度学习有着自己独到的优势。我们团队在QQ看点的图文推荐中也尝试了一些深度学...

    腾讯技术工程官方号

扫码关注云+社区

领取腾讯云代金券