分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

使用autoc js生成文章目录(侧边)导航栏

发布时间:2023-09-06 01:39责任编辑:熊小新关键词: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.效果

 

 

使用autoc js生成文章目录(侧边)导航栏

原文地址:https://www.cnblogs.com/guigujun/p/8351631.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved