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

使用方法的补充

我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们。

发现的一些问题

在我把我的js放到自己的博客园上运行之后发现了几个问题:

  1. 博客园博客的子标题用的是h2,自动生成目录的js把博客的子标题也加入到了目录中。
  2. 写了一篇比较长的博客,发现用目录跳到某处后没有链接返回目录处,有些不方便。
  3. 每次写完文章还得在文章的HTML中加目录的div。

解决问题

参考:薰衣草的旋律的一篇文章。

  1. 博客园子标题的问题,只要把一级标题的选择器改一下就好。
  2. 在每个标题前面加上回到顶部的标签。
  3. 在js中自己加div并放到文章所在层的开头。
  4. 另外增加了一些css和js动画,让目录显示在页面右侧并且靠边。

最后的代码

js:

var flag = 0;
$(document).ready(function() {
GenerateContents2();
contents_show();
}); function GenerateContents() {
var num = 0;
var content = "<ul>";
$("#cnblogs_post_body h3").each(function(){
//原来是$("h2")
content += "<li>" + GenerateA(num,$(this).text()) + "</li>";
$(this).before(GenerateLabel(num));
num++;
});
content += "</ul>"
content = packeageContent(content);
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
} function GenerateContents2() {
var num = 0;
var content = "<ul>";
$("#cnblogs_post_body h3").each(function(){
content += "<li>"+GenerateA(num,$(this).text());
$(this).before(GenerateLabel(num));
num++; var second = $(this).nextUntil("#cnblogs_post_body h3","#cnblogs_post_body h4");
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>";
content = packeageContent(content);
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
} //这两个函数本来想的是以后改着方便
function GenerateLabel(num) {
var a = "<div><a name = 'label" + num + "'></a>";
a += "<a href='#top' style='float:right'>回到顶部</a>"
a += "</div>"
return a;
} function GenerateA(num ,text) {
var ss = "<a href='" + "#label"
+ num +"'>" + text
+ "</a>";
return ss;
} function packeageContent(content) {
var tmp = "<a name='top'></a>" ;
tmp += "<div id='contents'>";
tmp += "<div id='button'><b style='font-size:18px'>阅读目录</b></div>";
tmp += "<div id='contents_main'>";
tmp += content;
tmp += "</div>";
tmp += "</div>";
return tmp;
} function contents_show(){
var button = $("#cnblogs_post_body #contents #button");
$(button).click(
function(){
if (flag == 0) {
$("#contents_main").show("slow");
flag = 1;
} else {
$("#contents_main").hide("slow");
flag = 0;
}
}
);
}

css代码:

#cnblogs_post_body #contents {
position: fixed;
right: 0px;
top: 454px;
background-color: #FFF6DC;
border: 2px solid #FEC447;
} #contents_main a {
height: 1.4em;
display: block;
} #cnblogs_post_body #contents #button {
width: 2em;
float: left;
text-align: right;
} #cnblogs_post_body #contents #button:hover {
background-color: #fff;
} #cnblogs_post_body #contents #contents_main {
display: none;
float: right;
}
#cnblogs_post_body a {
text-decoration: none;
color: #2769C0;
padding: 1px 2px;
}
#cnblogs_post_body a:hover{
color: #fff;
background-color: #78AFD3;
padding: 1px 2px;
}
#cnblogs_post_body ul li {
list-style: inherit!important;
margin-bottom: 0.1em;
}

虽然样式有点丑。。

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

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

    前段时间有个同学问有没有办法在博客园上发一篇文章然后自动生成文章的目录.之前不知道该怎么做这几天看了些jquery之后觉得还是容易的. 一级目录 一级目录的思路很简单,找出作为一级标题的元素,在某个地 ...

  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. 快速排序Quick sort

    快速排序Quick sort 原理,通过一趟扫描将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归 ...

  2. 【20151105noip膜你赛】bzoj3652 bzoj3653

    题目仿佛在讽刺我... 第一题: 题解: 考虑枚举区间右端点,维护所以左到当前的 and 和 or .注意 and 每次变化至少有一个二进制位从1变 0,or 每次至少有一个位从0变 1,所以最多有l ...

  3. 【hdu1828/poj1177】线段树求矩形周长并

    题意如图 题解:这题非常类似与矩形面积并,也是维护一个被覆盖了一次以上的线段总长. 但是周长要算新出现的,所以每次都要和上一次做差求绝对值. x轴做一遍,y轴做一遍. 但是有个问题:矩形边界重合的时候 ...

  4. [HDU5214]Movie解题报告|小水题大智慧

    Movie Cloud and Miceren like watching movies. Today, they want to choose some wonderful scenes from ...

  5. Achain 钱包部署

    官网 GIT: [ Achain_linux ] 基础环境 OS: CentOS, Ubuntu Achain: 官网 [ release 最新版本 ] 安装 Achain 钱包 下载 CentOS ...

  6. Spring boot集成RabbitMQ(山东数漫江湖)

    RabbitMQ简介 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出 ...

  7. 14、char和varchar的区别?

    就长度来说: ♣ char的长度是不可变的; ♣ 而varchar的长度是可变的,也就是说,定义一个char[10]和varchar[10],如果存进去的是‘csdn’,那么char所占的长度依然为1 ...

  8. word 宏,脚本编程

    '脚本方式新建word 再新建文档,文档中输入字符串"你好" Dim wdapp As Word.Application Dim wddoc As Word.Document Se ...

  9. 中断中处理延时及一些函数的调用规则(中断调i2c驱动有感)--中断中的延迟delay与printk函数的冲突【转】

    转自:http://blog.csdn.net/psvoldemort/article/details/8222371 1,中断处理程序中不能使用有睡眠功能的函数,如ioremap,kmalloc,m ...

  10. nginx配置文件的详细讲解

    user nginx nginx; #定义Nginx运行的用户和用户组worker_processes 1; #nginx进程数,建议设置为等于CPU总核心数worker_rlimit_nofile ...