JavaScript自动生成博文目录导航

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

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：自动生成博文目录导航

感谢孤傲苍狼分享了自动生成博文目录的方法,本文仅作存档使用. 图 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…

[笔记][Web]利用JS生成博文目录及CSS定制博客

0. 简介进入到cnblog这个大园子以后,和其他的一些博客网站比起来,少了些小功能,比如旁边CSDN上的目录.不过好在大神辈出,博客园可以通过申请JS权限来进行目录的生成. 由于本人在JS以及CSS上纯小白,不过一些代码还是可以看懂的,刚好园子里有着许多前辈的模板,就直接拿来使用了,在此也谢谢原作者. 1. JS代码想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的. 拿到权限之后,下面就是将编(搜)写(寻)的JS…

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

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

Jquery实现自动生成二级目录

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

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…

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

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

用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…

利用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项目根目录下复制该文件…

JavaScript 自动生成年月范围选择

近日做项目涉及到日期选择,为了用户界面友好,于是加入了一年内的年月段的查询功能,先看效果会自动判断当前年份以下为html代码其中用到了 Jquery 和 struts 标签但是这两个都不是重要的主要书用于赋值和取值方便还用到了 WdatePicker 插件进行具体日期选择 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <…

使用word设置标题级别，自动生成和大纲对应的多级列表，自动生成索引目录

作为程序员,只会开发是不够的, 在日常工作中还需要掌握一些办公软件的的操作方法,word excel ppt精通不敢, 暂且入个门吧, 在前后台开发配合过程中,能写的一手好文档将会达到事半功倍的效果, 提升开发幸福感. 今天折腾下word中设置标题级别和自动多级列表, 最后生成索引的方法. 目标: 如下图开始吧: 1. 首先输入将要作为标题的文本:一级标题,二级标题,三级标题,四级标题 2. 选中 “一级标题”, 并设置为标题1, 二级标题上设置为标题2, 一直设置到标题4,完成 3. 选择开…

Demo_塔防（自动生成怪物，导航，炮塔攻击，怪物掉血死忙）

using UnityEngine; using System.Collections; public struct WaveMsg { //该波次生成的怪物 public GameObject monster; //时间间隔 public float waveInterval; //生成个数 public float count; //生成间隔 public float interval; //怪物血量 public float hp; /// <summary> /// 构造函数 ///…

GitToc-为你的Github仓库的Readme自动生成一个目录

维护自己的Github仓库的时候发现Github的Readme不支持Toc目录,所以就自己写了一个小工具. 工具地址:https://github.com/Holy-Shine/GitToc 简介如下是转换效果: 转换后的目录支持页内跳转使用教程假设你的目标文件名为 targetFile.md. 在你的命令行下键入下面命令即可: > python gitToc.py targetFile.md 你会在你的当前目录下获得一个名为 targetFile_with_toc.md 的文件…

docfx 简单使用方法、自动生成目录的工具

[摘要] 这是我编写的一个 Docfx 文档自动生成工具,只要写好 Markdown 文档,使用此工具可为目录.文件快速生成配置,然后直接使用 docfx 运行即可. https://github.com/whuanle/CZGL.DocfxBuild.Yml/releases/tag/1.0 一,安装Docfx 下载地址 https://github.com/dotnet/docfx/releases 下载后解压压缩包,记录好目录路径. Win 搜索 “环境变量”,会出现 “编辑系统环境变量”…

thinkphp的自动生成

第一,在index.php里定义 define('BIND_MODULE','Admin'); //自动生成Admin目录下的结构(默认生成IndexController) define('BUILD_CONTROLLER_LIST','Index,User,Menu'); //指定生成IndexController,UserController,MenuController define('BUILD_MODEL_LIST','User,Menu'); //指定生成UserModel,Menu…

express-generator 自动生成服务器基本文件

(1) 安装 express-generator 构建工具 npm install -g express-generator 在命令行中用 npm 在全局安装 express-generator 脚手架工具 (2) 生成服务器基本文件 express FCXY 用 express 初始化我们的 FCXY 项目,并自动生成基本文件生成的 FCXY 的项目文件一般在我们的主目录下(D:\AAA\nodejs--MySQL) (3) 初始化后的项目文件的目录结构如下: ├── app.js # 应用…

doc文档生成带目录的pdf文件方法

准备软件: 福昕PDF阅读器下载地址:http://rj.baidu.com/soft/detail/12882.html?ald 安装福昕PDF阅读器,会自动安装pdf打印机. 准备好设置好各级标题的doc文档. 然后在doc文档上鼠标右键--在福昕阅读器中转换成PDF. 等一会儿就自动生成带目录的pdf文档,并在福昕阅读器中打开了. 点保存按钮保存pdf文档即可…

springboot成神之——swagger文档自动生成工具

本文讲解如何在spring-boot中使用swagger文档自动生成工具目录结构说明依赖 SwaggerConfig 开启api界面 JSR 303注释信息 Swagger核心注释 User TestController 本文讲解如何在spring-boot中使用swagger文档自动生成工具目录结构说明 swagger的使用本身是非常简单的,因为所有的一切swagger都帮你做好了,你所要做的就是专注写你的api信息 swagger自动生成html文档并且打包到jar包中本文不仅用…

Jenkins持续部署-自动生成版本号

目录 Jenkins持续部署-自动生成版本号目录前言目的详细流程获取SVN Reversion 获取需求号设置编译前读取版本号总结参考文献 Jenkins持续部署-自动生成版本号目录 Jenkins持续集成学习-Windows环境进行.Net开发1 Jenkins持续集成学习-Windows环境进行.Net开发2 Jenkins持续集成学习-Windows环境进行.Net开发3 Jenkins持续集成学习-Windows环境进行.Net开发4 Jenkins持续集成学习-搭建j…

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

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