前段时间有个同学问有没有办法在博客园上发一篇文章然后自动生成文章的目录。之前不知道该怎么做这几天看了些jquery之后觉得还是容易的。

一级目录

一级目录的思路很简单,找出作为一级标题的元素,在某个地方将text列出,再加上链接就好。

target = $("#contents");
$(document).ready(function() {
GenerateContents();
}); function GenerateContents() {
var num = 0;
var target = $("#contents");
var content = "目录";
content += "<ul>";
$("h2").each(function(){
content += "<li>" + GenerateA(num,$(this).text()) + "</li>";
$(this).before(GenerateLabel(num));
num++;
});
target.append(content);
} //这两个函数本来想的是以后改着方便
function GenerateLabel(num){
var a = "<a name = 'label" + num + "'></a>";
return a;
} function GenerateA(num ,text){
var ss = "<a href='" + "#label"
+ num +"'>" + text
+ "</a>";
return ss;
}

二级目录

二级目录就是再找出两个h2之间的h3就好,我这里用h2,h3作为一、二级标题。

target = $("#contents");
$(document).ready(function() {
GenerateContents2();
}); function GenerateContents2() {
var num = 0;
var target = $("#contents");
var content = "目录";
content += "<ul>";
$("h2").each(function(){
content += "<li>"+GenerateA(num,$(this).text());
$(this).before(GenerateLabel(num));
num++; var second = $(this).nextUntil("h2","h3");
if (second) {
content += "<ul>";
second.each(function(){
content += "<li>"+GenerateA
(num,$(this).text())+"</li>";
$(this).before(GenerateLabel(num));
num++;
}
);
content += "</ul>";
};
content += "</li>";
});
content += "</ul>";
target.append(content);
} //这两个函数本来想的是以后改着方便
function GenerateLabel(num){
var a = "<a name = 'label" + num + "'></a>";
return a;
} function GenerateA(num ,text){
var ss = "<a href='" + "#label"
+ num +"'>" + text
+ "</a>";
return ss;
}

使用方法

写完提交的时候突然发现在随笔里加js要申请js权限,想申请下来之后再加上。。不过想想我这么懒说不定哪天就忘记了,还是加上好了。

首先,没有js权限的申请js权限。

在写好的文章的想要插入目录的位置的HTML代码里加上:

<div id="contents" display="block" style="padding:10px 0;background:#BBB">
</div>

<script type="text/javascript"></script>

之间加上代码

<script type="text/css"></script>

加上想要的目录样式

用jquery实现文章自动生成二级目录的更多相关文章

  1. 用jquery实现文章自动生成二级目录(续)

    前文:用jquery实现文章自动生成二级目录. 使用方法的补充 我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们. 发现的一些问题 在我把我的js放到自己的博客园上运行之后发 ...

  2. Jquery实现自动生成二级目录

    在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...

  3. 第 10 篇:小细节 Markdown 文章自动生成目录,提升阅读体验

    目录 在文中插入目录 在页面的任何地方插入目录 处理空目录 美化标题的锚点 URL 作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 上 ...

  4. JavaScript自动生成博文目录导航

    转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...

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

    博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色background-co ...

  6. TP自动生成模块目录

    TP自动生成模块目录 例如我想在项目中增加一个AdminI模块 只需要在入口文件index.php中添加: define('BIND_MODULE','Admin'); 再访问127.0.0.1项目就 ...

  7. JavaScript:自动生成博文目录导航

    感谢 孤傲苍狼 分享了 自动生成博文目录的方法,本文仅作存档使用. 图 1:效果预览 CSS 样式 #TOCbar{ font-size:12px; text-align:left; position ...

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

    概述 CSDN中有根据文件内容中H标签在文章中自动生成文章目录,看起来比较专业,就想把它搬到自己的博客园中.类似下图 提取JS脚本 通过浏览器开发者工具(IE/Chrome)找到产生文章目录javas ...

  9. Nginx根据目录自动生成二级域名

    前言:     每次创建二级域名如果都修改一次配置文件的话,项目多了会带来很多不必要的工作量,如果能够在一个web目录下创建一个文件夹并且自动生成文件目录的话,那真是极好的,本文就基于Nginx贴出这 ...

随机推荐

  1. 【poj2104-求区间第k大数(不修改)】主席树/可持续化线段树

    第一道主席树~然而是道比较水的...因为它不用修改... 转载一个让我看懂的主席树的讲解吧:http://blog.csdn.net/regina8023/article/details/419106 ...

  2. MYSQL查找总结

      a.条件判断where select * from 表 where id > 1 and name != 'alex' and num = 12; select * from 表 where ...

  3. Farey Sequence (欧拉函数+前缀和)

    题目链接:http://poj.org/problem?id=2478 Description The Farey Sequence Fn for any integer n with n >= ...

  4. Spring Boot提供的特性

    一.导览 本文主要按以下模块介绍spring Boot(1.3.6.RELEASE)提供的特性. SpringApplication类 外部化配置 Profiles 日志 开发WEB应用 Securi ...

  5. java===编译引用第三方文件的类(原创)

    http://blog.csdn.net/m53931422/article/details/42174609 http://blog.csdn.net/u012450329/article/deta ...

  6. python基础===获取知乎标题时候,文件编码失败的总结

    总结一下,关于获取到的信息编码失败. 刚才在执行代码的时候,发现一个问题: 然后修改代码如下: '''爬取知乎界面的标题''' import requests import re import sys ...

  7. abp 调试

    概要 研究Abp(ASP.NET Boilerplate)框架有几个月了,从一遍遍的看官方文档,到现在看源码,一路走来学习了很多知识. 很多新手都很关心源码如何调试,我也是如此,在反复看Debuggi ...

  8. swift中闭包的循环引用

    首先我们先创造一个循环引用 var nameB:(()->())? override func viewDidLoad() { super.viewDidLoad() let bu = UIBu ...

  9. java数组面试题

    一维数组可以写成:int[ ]x 或者int x[ ]: 二维数组可以写成:int[ ] y [ ] 或者int y[ ][ ] 或者int [ ][ ]y 面试题如下:       声明数组int[ ...

  10. Aspxgridview 根据条件来自定义计算Totalsummery

    protected void ASPxGridView1_CustomSummaryCalculate(object sender, DevExpress.Data.CustomSummaryEven ...