博客园美化相关文章目录:博客园博客美化相关文章目录

  这篇文章使用的代码来自于博客园的marvin,非常感谢。在他的文章:如何给你的为知笔记添加一个漂亮的导航目录中,介绍了给文章自动添加目录的过程,我当时就非常兴奋,一直想要个类似的插件,就是不会写。所以当天就咨询了marvin,在他的提示下,我把他博客的CSS和js文件扒下来了,经过一番改进,成为了我博客目前使用的,所以分享出来。有了目录,的确是方便很多,可以快速的跳到指定的段落。当然博客园也有其他网友分享了一些其他的目录样式,个人感觉在底部侧边栏要好一点,根据喜好吧,另外薰衣草的旋律 在21号发表的一篇文章链接:http://www.cnblogs.com/wangqiguo/p/4355032.html,也不错,原理都差不多,大家可以借鉴下。但是是加在页面顶部,如果目录很多,会占用比较大篇幅和空间。大家按需选择。

  本文原文地址:博客美化(6)为你的博文自动添加目录

  marvin也把这个自动目录添加到了他的博客中,效果非常好。 看看他的原始效果:

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

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

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

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

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

看看源码和使用过程:

1.目录样式文件

  样式文件定义了目录的范围和相关格式,例如缩进等。原始文件在这里下载:marvin.nav.my1502.css,大家记得要自己下载,安装需求修改,然后上传到自己博客的文件去,再添加引用,如果直接添加我博客这个文件的引用,以后我要是改动了,你就杯具了。

2.为文章添加固定的信息

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

是通过js来完成的,js文件下载,使用方法还是自己下载然后上传到自己的文件目录中再引用:marvin.cnblogs.js

3.自动生成目录代码

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

//推荐博客j += '<li><span style="font-size: 14pt;">★推荐博客</span></li>';j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4288836.html' + '">' + '1.本博客所有文章分类目录' + '</a><span class="sideCatalog-dot"></span></li>';j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329737.html' + '">' + '2.开源Math.NET基础数学类库使用' + '</a><span class="sideCatalog-dot"></span></li>';j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329742.html' + '">' + '3.微软Infer.NET机器学习组件使用' + '</a><span class="sideCatalog-dot"></span></li>';    j += '<li><span style="font-size: 14pt;">★本文目录</span></li>';o.each(function (t) {var u = $(this),v = u[0];var title=u.text();var text=u.text();u.attr('id', 'autoid-' + l + '-' + m + '-' + n)if (v.localName === 'h1') {l++;m = 0;if(text.length>26) text=text.substr(0,26)+"...";j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';} else if (v.localName === 'h2') {m++;n = 0;if(q){if(text.length>30) text=text.substr(0,30)+"...";j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';}} });

我修改过的文件下载:marvin.nav.my1502.js,原始的文件可以到作者marvin的博客去扒下来。

最后就把要添加的代码说一下吧,直接引用这几个js和css文件就可以了,注意的是,还有一个公共的bootstrap.js文件,地址为:http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.js"></script>

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

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

【分享】博客美化(6)为你的博文自动添加目录相关推荐

  1. 【分享】博客美化(6)为你的博文自动添加目录【转】

    转自:http://www.cnblogs.com/asxinyu/p/4344153.html 阅读目录 1.目录样式文件 2.为文章添加固定的信息 3.自动生成目录代码 博客园美化相关文章目录:博 ...

  2. 博客园博客美化相关文章目录

    本博客所有文章分类的总目录链接:本博客博文总目录-实时更新  1.博客园美化相关文章目录 1.[分享]博客美化(1)基本后台设置与样式设置 2.[分享]博客美化(2)自定义博客样式细节 3.[分享]博 ...

  3. 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    前端小白也能快速学会的博客园博客美化全攻略[附源码] 文章目录 前端小白也能快速学会的博客园博客美化全攻略[附源码] 美化方法论简介 准备工作 js权限申请 如何模仿一个博客园的自定义风格(样式css ...

  4. 【转】博客美化(3)为博客添加一个漂亮的分享按钮

    阅读目录 1.社会化分享 2.选择一个分享按钮 3.添加到博客园博客 博客园美化相关文章目录:博客园博客美化相关文章目录 在前2篇博客"博客美化(1)基本后台设置与样式设置"与&q ...

  5. 【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  6. 【博客美化】08.添加扩大/缩小浏览区域大小 按钮

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  7. 前端小白也能快速学会的博客园博客美化全攻略

    前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介 一般而言,需要选一个默认的 ...

  8. 【转】博客美化(1)基本后台设置与样式设置

    阅读目录 1.博客园后台设置 2.自定义样式的设置 博客园美化相关文章目录:博客园博客美化相关文章目录 一直都拜膜那些博客园的皮肤设计高手,由于本人对前端研究甚少,所以js,css这种东西只能看得懂最 ...

  9. 【全网最全的博客美化系列教程】08.自定义地址栏Logo

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

最新文章

  1. python知道答案_Python程序设计基础知道章节测试答案
  2. unity 角色 动画脚本_Unity Animation --动画剪辑(外部来源的动画)
  3. 黄聪:Wordpress 模版技术手册 - WordPress Theme Technical manuals
  4. 模拟电路技术之基础知识
  5. 无符号数的减法_C++核心准则ES.107:不要使用无符号数下标,使用gsl::index更好
  6. Qt 编译错误 LINK2001:无法解析的外部符号 public: virtual struct QMetaObject const thiscall Widget::metaObject
  7. 【计蒜客信息学模拟赛1月月赛 - D】Wish(dp计数,数位)
  8. oracle rds 运维服务_从运维的角度分析使用阿里云数据库RDS的必要性–你不应该在阿里云上使用自建的MySQL/SQL Server/Oracle/PostgreSQL数据库...
  9. 搭建webUI自动化及问题解决:Message: ‘chromedriver‘ executable needs to be in PATH.解决办法
  10. 【英语学习】【English L06】U06 Banking L5 I'd like to change Chinese *yuan* into pounds
  11. c语言printf打印字符串,puts()vs printf()用于以C语言打印字符串
  12. 燃情动作——《速度与激情:特别行动》影评数据分析可视化
  13. 项目管理课程体系——世纪德本PMCD品牌课程
  14. 【保研】-- 保研夏令营中线上面试注意事项
  15. c语言中如何识别空格键,在C++中如何判断“空格”键输入?
  16. Unity模拟毛笔字效果
  17. 利用blinker,让arduino实现多路继电器状态控制和APP端状态反馈
  18. PPT制作技巧汇总之图形对象与多媒体应用(office 2007)
  19. JAVA餐厅收银系统(JAVA毕业设计)
  20. Swift —— 类与结构体

热门文章

  1. 一行代码,得到最强时序基线!
  2. 为什么「反向传播」一定要在生物学上有对应?
  3. 图解NumPy,这是理解数组最形象的一份教程了
  4. CoRL 2020奖项公布,斯坦福获最佳论文奖,华为等摘得最佳系统论文奖
  5. 求解稀疏优化问题——增广拉格朗日方法+半光滑牛顿法
  6. 坑爹的Python陷阱(避坑指南)
  7. pandas数据清洗(缺失值、异常值和重复值处理)
  8. 网络工程师_要记录下来的一些题_3
  9. 一文讲懂图像处理中的低通、高通、带阻和带通滤波器
  10. 为什么机器学习项目非常难管理?