天天看点

【分享】博客美化(6)为你的博文自动添加目录【转】1.目录样式文件2.为文章添加固定的信息3.自动生成目录代码

阅读目录

<a href="http://www.cnblogs.com/asxinyu/p/4344153.html#_label0">1.目录样式文件</a>

<a href="http://www.cnblogs.com/asxinyu/p/4344153.html#_label1">2.为文章添加固定的信息</a>

<a href="http://www.cnblogs.com/asxinyu/p/4344153.html#_label2">3.自动生成目录代码</a>

【分享】博客美化(6)为你的博文自动添加目录【转】1.目录样式文件2.为文章添加固定的信息3.自动生成目录代码

效果非常好,而且前面的标号1,2,。。都是自动的。这一点不太符合我写博客的习惯,以为我的标题会把这个标号固定下来,所以就重复了,而且我想在这个目录前面添加点东西,例如推荐博客目录等等,经过我的一番修改,成了这个样子(在某些浏览器中貌似出不来,特别是IE,Chrom内核的浏览器好像都比较好):

【分享】博客美化(6)为你的博文自动添加目录【转】1.目录样式文件2.为文章添加固定的信息3.自动生成目录代码

我修改的地方主要有3个:

1.调整了宽度,然后标题字符数h1提高到了30个字符(其他的不截断显示);字体也变大了点,貌似比原来的要丑陋点,呵呵,没关系,有空再改回来吧。

2.根据自己博客的设置和写作习惯,提取h1,h2作为目录结果,原来作者是使用h2,h3,这个要看博客模版的情况和博客正文标题的样式;

3.在最前面增加了一个推荐博客,其实和文章推荐插件原理差不多,这里只不过是测试了一下,可以固定推荐几篇文章。 

看看源码和使用过程:

  这个功能不属于自动生成目录里面的,只不过我在扒皮的时候,一起拔下来了,就是可以为每篇文章添加一个固定的结尾,或者加一个微信扫描功能,样子就是这样,我进行了一些修改:

【分享】博客美化(6)为你的博文自动添加目录【转】1.目录样式文件2.为文章添加固定的信息3.自动生成目录代码

  自动生成目录的代码是通过js完成的,就是寻找正文的h1,h2,然后把标题按照长度截断处理一下,拼接就可以了,我把我修改的部分代码贴出来看看:

【分享】博客美化(6)为你的博文自动添加目录【转】1.目录样式文件2.为文章添加固定的信息3.自动生成目录代码
【分享】博客美化(6)为你的博文自动添加目录【转】1.目录样式文件2.为文章添加固定的信息3.自动生成目录代码

大家记得把文件路径完成自己修改上传过的。

【分享】博客美化(6)为你的博文自动添加目录【转】1.目录样式文件2.为文章添加固定的信息3.自动生成目录代码

保存之后,刷新应该可以看到效果了。有了这个思路,可以在上面添加你想要展现的信息了,而不拘泥于只是个目录。

E-mail:[email protected]

【新浪微博】 张昺华--sky

【twitter】 @sky2030_

【facebook】 张昺华 zhangbinghua

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

继续阅读