jquery自动生成文章目录索引

2024-08-19

用jquery实现文章自动生成二级目录（续）

前文:用jquery实现文章自动生成二级目录. 使用方法的补充我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们. 发现的一些问题在我把我的js放到自己的博客园上运行之后发现了几个问题: 博客园博客的子标题用的是h2,自动生成目录的js把博客的子标题也加入到了目录中. 写了一篇比较长的博客,发现用目录跳到某处后没有链接返回目录处,有些不方便. 每次写完文章还得在文章的HTML中加目录的div. 解决问题参考:薰衣草的旋律的一篇文章. 博客园子标题的问题,只要把一级标

CSDN中根据文章自动生成文章目录

概述 CSDN中有根据文件内容中H标签在文章中自动生成文章目录,看起来比较专业,就想把它搬到自己的博客园中.类似下图提取JS脚本通过浏览器开发者工具(IE/Chrome)找到产生文章目录javascript脚本(我直接用IE开发工具中搜索相关字符串”系统根据文章中H1到H6标签自动生成文章目录”搜索到的), 并把其中文章内容ID修改成博客园的ID(#cnblogs_post_body) 产生脚本如下脚本如下: $(document).ready(function() { buildCTabl

用React实现一个自动生成文章目录的组件

原文地址:小寒的博客功能介绍这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点正则 dom操作利用锚点跳转实现原理首先我们拿到的是一个html字符串,并不是html哦,然后分析这个html字符串,获取所有的h1 h2 h3 h4 h5 h6的生成一个锚点信息的列表然后给所有的这些标题标记一个id,用来进行锚点的跳转渲染目录正则正则是基础中最难学和应用的一部分,但作为处理字

用jquery实现文章自动生成二级目录

前段时间有个同学问有没有办法在博客园上发一篇文章然后自动生成文章的目录.之前不知道该怎么做这几天看了些jquery之后觉得还是容易的. 一级目录一级目录的思路很简单,找出作为一级标题的元素,在某个地方将text列出,再加上链接就好. target = $("#contents"); $(document).ready(function() { GenerateContents(); }); function GenerateContents() { var num = 0; var

Jquery实现自动生成二级目录

在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着自己修改一下代码,实现二级目录甚至三级目录.先附上初始的代码,并且在这感谢那位博友. 1.一级目录代码 <script language="javascript" type="text/javascript"> //生成目录索引列表 function Gen

使用autoc js生成文章目录（侧边）导航栏

介绍: autocjs 是一个专门用来生成文章目录(Table of Contents)导航的工具.autocjs 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的目录导航(独立的侧边栏菜单,或者在文章的开始处生成文章目录). 支持 AMD 和 CMD 规范: 可以作为独立模块使用,也可以作为 jQuery 插件使用: 支持中文和英文(标题文字): 界面简洁大方: 拥有 AnchorJS 的基础功能: 即支持生成独立文章目录导航菜单,又可以直接在文章中生成目录

JavaScript自动生成博文目录导航/TOP按钮

博客园页面添加返回顶部TOP按钮进入网页管理->设置在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式此处可以将背景色background-color改为: background:url(http://images.cnblogs.com/cnblogs_com/gitwow/1393973/o_o_o_toTop.png) no-repeat -70px top; 在"页脚Html代码"中添加如下代码,可以将文字改为图片此处&

JavaScript笔记 #08# 用Regex辅助生成文章目录 V2.0

索引简介测试用例代码简介 * 用Regex辅助生成文章目录 2.0 * 1.提高了功能的通用性(假定的文章格式更加普遍,即按照h2h3h4分级) * 2.改善了代码的可读性(稍微牺牲了一点点性能,不过也无关紧要..) * 3.略微..提高了扩展性(只需要重写generateDirectory方法就可以 * 生成自定义目录) * 缺点:没有处理比较脏的情况,需要人工确保html干净测试用例输入: <h2>你好</h2> <p>dasjdalsjdlsasjdl

TP自动生成模块目录

TP自动生成模块目录例如我想在项目中增加一个AdminI模块只需要在入口文件index.php中添加: define('BIND_MODULE','Admin'); 再访问127.0.0.1项目就可以自动添加一个模块. 如果需要生成更多的控制器类,可以定义BUILD_CONTROLLER_LIST常量,例如: define('BUILD_CONTROLLER_LIST','Index,User,Menu'); 访问后会自动生成三个指定的控制器类: Admin\Controller\Inde

HelloDjango 第 11 篇：自动生成文章摘要

作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库博客文章的模型有一个 excerpt 字段,这个字段用于存储文章的摘要.目前为止,还只能在 django admin 后台手动为文章输入摘要.每次手动输入摘要比较麻烦,对有些文章来说,只要摘取正文的前 N 个字符作为摘要,以便提供文章预览就可以了.因此我们来实现如果文章没有输入摘要,则自动摘取正文的前 N 个字符作为摘要,这有两种实现方法. 覆写 save 方法第一种方法是通过覆写

JavaScript自动生成博文目录导航

转载于:JavaScript自动生成博文目录导航我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了

WPS生成文章目录

WPS生成文章目录 1.引用–>插入目录...即可!

JavaScript：自动生成博文目录导航

感谢孤傲苍狼分享了自动生成博文目录的方法,本文仅作存档使用. 图 1:效果预览 CSS 样式 #TOCbar{ font-size:12px; text-align:left; position:fixed; width: auto; height: auto; top:50px; right:0px; /*离页面顶部与右侧的距离*/ } #TOCbarTab{ float:left; width:30px; border:1px solid #e5e5e5; border-right:n

JavaScript笔记 #05# 用Regex辅助生成文章目录

PS. 用来生成个人笔记的目录 1.输入:html文本 <h2>Notes</h2> <p>1.小标题1.正文正文正文</p> <div class="cnblogs_code"> <pre><span style="color: #000000;">ddjlasjdlas </span><span style="color: #0000ff;"

利用html实现类似于word自动生成的目录的效果

在word中的自动生成目录当中,我们会看到是这样的目录结构: 嗯,自动生成固然是简单,但是在html当中,却没有一个合适的标签来去做.今天后台导出PDF的时候告诉我,他需要用html做一个这样的结构,然后想了想,实现了第一种方法: 一.js&css结合法话不多说,直接上代码,代码解决 <head> <meta charset="UTF-8"> <title>Title</title> <style> * { mark

Thinkphp3.2.X自动生成应用目录

从3.2.2版本开始,可以支持自动生成默认模块之外的模块目录以及批量生成控制器和模型类. 例如,如果我们需要生成一个Admin模块用于后台应用,在应用入口文件中定义如下: // 绑定Admin模块到当前入口文件 define('BIND_MODULE','Admin'); define('APP_PATH','./Application/'); require './ThinkPHP/ThinkPHP.php'; 然后访问URL地址 http://serverName/index.php 就会生

thinkphp 自动生成模块目录结构

要达到的目的在application目录下创建自定义模块如admin,用命令行方式自动创建该目录及目录下默认结构要运行的命令 > php think build --module admin 坑环境变量:开始时运行命令行提示php非内置命令巴拉巴拉,打开环境变量设置,将php程序路径(非thinkphp)添加到环境变量,重启命令行窗口: build.php文件:运行还是不成功,千/10度了一下发现application目录下并没有build.php,从thinkphp项目根目录下复制该文件

老猿Python博客文章目录索引

本目录提供老猿Python所有相关博文的一级目录汇总,带星号的为收费专栏: 一.专栏列表本部分为老猿所有专栏的列表,每个专栏都有该专栏置顶的博文目录: 专栏:Python基础教程目录专栏:* 使用PyQt开发图形界面Python应用专栏:小白学爬虫专栏:PyQt入门学习专栏:PyQt+moviepy音视频剪辑实战专栏:*moviepy音视频开发专栏 5G基础知识学习零基础学区块链二.各专栏博文目录本部分即为上面说的各专栏文档目录列表: Python基础教程博文目录 * 使用Py

.NET Core 微服务学习与实践系列文章目录索引（2019版）

参考网址: https://archy.blog.csdn.net/article/details/103659692 2018年,我开始学习和实践.NET Core,并开始了微服务的学习,以及通过各种开源组件搭建服务治理技术方案,并在学习过程中总结了一个.NET Core微服务学习与实践系列文章,涵盖了服务发现.API网关.配置中心.验证授权.分布式日志.性能监控.事件总线等开源项目的使用,还介绍了基于Steeltoe这个开源项目让.NET Core可以在Spring Cloud框架下共享Sp

jquery自动生成二维码

把下面的jquery代码放到想要在当前页面上面生成二维码: 代码如下: <script type="text/javascript">var _qrContent='',_qrLogo='http://hflol.net',_qrWidth=100,_qrHeight=100,_qrType = 'auto';if(!_qrContent) var _qrContent =escape(document.location.href);document.write(unesc

jquery自动生成文章目录索引

热门专题