0. 简介

  进入到cnblog这个大园子以后,和其他的一些博客网站比起来,少了些小功能,比如旁边CSDN上的目录。不过好在大神辈出,博客园可以通过申请JS权限来进行目录的生成。

  由于本人在JS以及CSS上纯小白,不过一些代码还是可以看懂的,刚好园子里有着许多前辈的模板,就直接拿来使用了,在此也谢谢原作者。

1. JS代码

  想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的。

  拿到权限之后,下面就是将编(搜)写(寻)的JS代码放在页脚HTML代码的方框内,然后点击保存就可以了。要注意目录的生成是几级标题,这一点可是很重要的。JS代码如下,基本没有变化,拷贝了原作者的写法,可以生成二级目录,分别为h2和h3,这点需要注意

  综合来说,这个目录有以下几点的特点,这些也都可以在本文中看到(二级目录本博文没有使用)。

1. 可以在博文首部生成两级目录
2. 每个一级目录上方有一个回到顶部的链接

  JS代码如下。

<script language="javascript" type="text/javascript">
// 生成两级目录索引列表
// 参考: http://www.cnblogs.com/zzqcn/p/4657124.html
// 作者: zzq
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');  //如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;

    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);

            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }

            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
}

GenerateContentList();
</script>

2. 一级标题CSS格式

  我在观察zzq同学的一些博文里面的一级标题有一个浅灰色的背景,觉得添加之后看起来很不错。在这里就借用一下该图片作为一级标题的背景,图片和CSS的说明如下。

#cnblogs_post_body h2 {
    background-repeat: no-repeat;
    background-image:  url('http://xxxx');
}

3. 参考

[1] 让博客园博客自动生成章节目录索引,赵子清

4. 其他目录格式

  在网上谷歌百度的同时,也找到了一些别的目录格式,可以给喜欢的博友参考,在此列举一些网址。

[1] JavaScript自动生成博文目录导航,孤傲苍狼

[2] 让博客园博客自动生成章节目录索引,薰衣草的旋律

[3] 博客美化(6)为你的博文自动添加目录,数据之巅

[4] 为博客园添加目录的配置总结,juejiang

[笔记][Web]利用JS生成博文目录及CSS定制博客的更多相关文章

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

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

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

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

  3. 学习笔记:利用GDI+生成简单的验证码图片

    学习笔记:利用GDI+生成简单的验证码图片 /// <summary> /// 单击图片时切换图片 /// </summary> /// <param name=&quo ...

  4. maven项目转成web项目没有生成WebContent目录

    有时候建立maven项目转成web项目没有生成WebContent目录,此时把Dynamic web module 去掉勾选,然后ok,再点开项目的properties,再选中Dynamic web  ...

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

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

  6. 利用爬虫爬取指定用户的CSDN博客文章转为md格式,目的是完成博客迁移博文到Hexo等静态博客

    文章目录 功能 爬取的方式: 设置生成的md文件命名规则: 设置md文件的头部信息 是否显示csdn中的锚点"文章目录"字样,以及下面具体的锚点 默认false(因为csdn中是集 ...

  7. 利用Github和Hexo搭建独立的个人博客--基础篇

    利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...

  8. 利用Octopress在github pages上搭建个人博客

    利用Octopress在github pages上搭建个人博客 SEP 29TH, 2013 在GitHub Pages上用Octopress搭建博客,需要安装ruby环境.git环境等.本人在Fed ...

  9. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

随机推荐

  1. HDU - 4763 Theme Section (KMP的next数组的应用)

    给定一个字符串,求出一个前缀A,使得字符串的构成可以表示成ABABA的形式(B可以为空串). 输出这个前缀的最大长度. KMP算法Next数组的使用. 枚举中间的每个位置,可以根据Next数组求出这个 ...

  2. HDU 5514 Frogs 欧拉函数

    题意: 有\(m(1 \leq m \leq 10^9)\)个石子排成一圈,编号分别为\(0,1,2 \cdots m-1\). 现在在\(0\)号石头上有\(n(1 \leq n \leq 10^4 ...

  3. fortran子程序传入可变数组要在module里实现

    坑死我了,我说怎么子程序传递不了可变数组 在写fortran程序的时候,要对矩阵实现特定的功能,如高斯法解线性方程组,很多时候子程序不知道矩阵的大小,如有限元程序中先要用程序得到总体刚度矩阵再把总刚传 ...

  4. Leetcode28--->字符串的匹配(KMP)

    题目: 题目的本质是给定两个字符串str1,str2,求str1中的str2串开始的地方,即字符串的匹配,KMP算法 思路:时间复杂度为O(m + n),空间复杂度为O(n),原串的长度为m,子串的长 ...

  5. Leetcode7--->Reverse Integer(逆转整数)

    题目: 给定一个整数,求将该整数逆转之后的值: 举例: Example1: x = 123, return 321Example2: x = -123, return -321 解题思路: 在这里只用 ...

  6. 忘记MySQL的root密码的解决方法

    经常会有朋友或者同事问起,MySQL 的 root 密码忘了,不知道改怎么办. 其实解决方法很简单,下面是详细的操作步骤. (1)修改配置文件my.cnf,在配置文件[mysqld]下添加skip-g ...

  7. MySQL 8.* 账号密码管理

    修改密码: ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的新密码' 通过以下命令可以查看修改的账号 ...

  8. 零基础学习 Python 之数字与运算

    写在之前 大家好,这里是零基础学习 Python 系列,在这里我将从最基本的 Python 写起,然后再慢慢涉及到高阶以及具体应用方面.我是完全自学的 Python,所以很是明白自学对于一个人的考验, ...

  9. python 计算日期间隔

    from datetime import date a = date(2011,11,24) b = date(2011,11,17) print(a-b)

  10. [整理]tar压缩下来为什么格式是.tar.gz

    前段时间打包,直接用tar命令压缩,压缩好的文件取名rar.同事用winrar打开发现一直报错. 经过查询发现,tar -cvzf压缩下来的格式其实应该是.tar.gz 但是格式怎么会这么奇怪呢?是压 ...