使用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.效果
不要让懒惰占据你的大脑,不让要妥协拖跨你的人生。青春就是一张票,能不能赶上时代的快车,你的步伐掌握在你的脚下,good luck
阅读全文