不用每次写博客的时候繁琐的人工整理目录,又可以动态浮动在右下角,方便快速跳到感兴趣的位置同时也可以快速的对文章内容有一个大概的了解。
首先根据个人喜好,我习惯了用 h1 来做分类。所以本篇内容也主要是针对 h1 来提取目录。
如何提取出来 h1 呢?
先来看这张图,以猎豹浏览器为例:
首先在博客内容第一行点击鼠标右键,然后选择检查。这时会弹出右边的框,直接定位到我的 h1 标签,就这么简单的找到了它的父级 cnblogs_post_body 。
然后使用 jquery 选择器 来获取到这些 h1,对 jquery 选择器不熟的直接跳这个链接温习一下:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
- $('#cnblogs_post_body h1')
就这么简单的一个括号就完成了对 h1 的提取。
在遍历所有的 h1,取出内容之前,我们需要一个目录的容器。
- $('#cnblogs_post_body').append('<div id="blog_catalog" class="blog_catalog"><ul><li><a id="blog_catalog_close" class="blog_catalog_close">>折叠目录</a></li></ul></div>');
这句简单解释就是在博客内容最末尾插入了一个 div,里面包含 ul 和一个默认的 li 用于折叠目录。
接下来就要提取 h1 的内容了,但在这个过程中我们还要做一件事,就是自动给 h1 增加一个 id,作为一个标准的懒人,我肯定连 h1 的 id 都不想写的,自动生成神马的最好了。
- var id = 1;
- $('#cnblogs_post_body h1').each(function(){
- $(this).attr('id','blog_catalog_id_'+id);
- $('#blog_catalog ul').append('<li><a href="#blog_catalog_id_'+id+'">'+$(this).text()+'</a></li>');
- id++;
- });
有了折叠,当然少不了展开。
- $('#cnblogs_post_body').append('<div id="blog_catalog_open" class="blog_catalog_open">展开目录</div>');
最后一步,让展开目录和折叠目录联动起来
- $('#blog_catalog_open').click(function(){
- $('#blog_catalog').show();
- $('#blog_catalog_open').hide();
- });
- $('#blog_catalog_close').click(function(){
- $('#blog_catalog').hide();
- $('#blog_catalog_open').show();
- });
整个制作过程其实并不复杂,还有一些 css 样式应用上就完工了。
怎么自定义皮肤我就不多说了,一抓一大把。下面直接给你们代码。
css:
View Code
- .blog_catalog {
- display: none;
- width: auto;
- height: auto;
- float: right;
- position: fixed;
- right: 180px;
- bottom: 200px;
- z-index: 9999;
- background-color: #fff;
- font-size: 12px;
- margin: 10px 0 0 0;
- padding: 5px;
- text-align: center;
- border: 3px solid #55895b;
- border-radius: 5px;
- -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- }
- .blog_catalog > li > a {
- background-color: #616975;
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
- background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
- -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
- -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
- box-shadow: inset 0px 1px 0px 0px #878e98;
- width: 100%;
- height: 2.75em;
- line-height: 2.75em;
- text-indent: 2.75em;
- display: block;
- position: relative;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 600;
- color: #fff;
- text-shadow: 0px 1px 0px rgba(0,0,0,.5);
- }
- .blog_catalog ul li a {
- background: #fff;
- border-bottom: 1px solid #efeff0;
- width: 100%;
- height: 2.75em;
- line-height: 2.75em;
- display: block;
- position: relative;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 0.923em;
- font-weight: 400;
- color: #878d95;
- }
- .blog_catalog ul li a:hover {
- cursor: pointer;
- }
- .blog_catalog > li > a:hover, .blog_catalog > li > a.active, .blog_catalog > li:target > a; /*add this*/ {
- background-color: #35afe3;
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
- background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
- background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
- background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
- background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
- background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
- border-bottom: 1px solid #103c56;
- -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
- -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
- box-shadow: inset 0px 1px 0px 0px #6ad2ef;
- }
- .blog_catalog > li > a.active {
- border-bottom: 1px solid #1a638f;
- }
- .blog_catalog > li > a:before {
- content: '';
- background-image: url(../images/sprite.png);
- background-repeat: no-repeat;
- font-size: 36px;
- height: 1em;
- width: 1em;
- position: absolute;
- left: 0;
- top: 50%;
- margin: -.5em 0 0 0;
- }
- .item1 > a:before {
- background-position: 0 0;
- }
- .item2 > a:before {
- background-position: -38px 0;
- }
- .item3 > a:before {
- background-position: 0 -38px;
- }
- .item4 > a:before {
- background-position: -38px -38px;
- }
- .item5 > a:before {
- background-position: -76px 0;
- }
- .blog_catalog > li > a span {
- font-size: 0.857em;
- display: inline-block;
- position: absolute;
- right: 1em;
- top: 50%;
- background: #48515c;
- line-height: 1em;
- height: 1em;
- padding: .4em .6em;
- margin: -.8em 0 0 0;
- color: #fff;
- text-indent: 0;
- text-align: center;
- -webkit-border-radius: .769em;
- -moz-border-radius: .769em;
- border-radius: .769em;
- -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
- -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
- box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
- text-shadow: 0px 1px 0px rgba(0,0,0,.5);
- font-weight: 500;
- }
- .blog_catalog > li > a:hover span,
- .blog_catalog > li a.active span,
- .blog_catalog > li:target > a span /*add this*/ {
- background: #2173a1;
- }
- .blog_catalog > li > ul li a:before {
- font-size: 8px;
- color: #bcbcbf;
- position: absolute;
- width: 1em;
- height: 1em;
- top: 0;
- left: -2.7em;
- }
- .blog_catalog > li > ul li:hover a,
- .blog_catalog > li > ul li:hover a span,
- .blog_catalog > li > ul li:hover a:before {
- color: #32373D;
- }
- .blog_catalog ul > li > a span {
- font-size: 0.857em;
- display: inline-block;
- position: absolute;
- right: 1em;
- top: 50%;
- / background: #fff;
- border: 1px solid #d0d0d3;
- line-height: 1em;
- height: 1em;
- padding: .4em .7em;
- margin: -.9em 0 0 0;
- color: #878d95;
- text-indent: 0;
- text-align: center;
- -webkit-border-radius: .769em;
- -moz-border-radius: 769em;
- border-radius: 769em;
- text-shadow: 0px 0px 0px rgba(255,255,255,.01));
- }
- /*additional*/
- .blog_catalog > li > ul {
- height: 0;
- overflow: hidden;
- opacity: 0;
- filter: alpha(opacity=0); /* IE6-IE8 */
- -webkit-transition: opacity 0.9s ease-in-out;
- -moz-transition: opacity 0.9s ease-in-out;
- -o-transition: opacity 0.9s ease-in-out;
- -ms-transition: opacity 0.9s ease-in-out;
- transition: opacity 0.9s ease-in-out;
- }
- .blog_catalog > li:target > ul {
- height: auto; /*using auto nullifies the height transitions, but it makes things flexible which is more important*/
- border-bottom: 1px solid #51555a;
- opacity: 1;
- filter: alpha(opacity=100); /* IE6-IE8 */
- }
- #cnblogs_post_body ul li {
- list-style-type: none;
- margin-left: -30px;
- }
- .blog_catalog_open {
- width: auto;
- height: auto;
- float: right;
- position: fixed;
- right: 180px;
- bottom: 200px;
- z-index: 9999;
- background-color: #fff;
- font-size: 12px;
- width: 125px;
- margin: 10px 0 0 0;
- padding: 5px;
- text-align: center;
- border: 3px solid #55895b;
- border-radius: 5px;
- -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- cursor: pointer;
- }
js:
View Code
- $('#cnblogs_post_body').append('<div id="blog_catalog_open" class="blog_catalog_open">展开目录</div>');
- $('#cnblogs_post_body').append('<div id="blog_catalog" class="blog_catalog"><ul><li><a id="blog_catalog_close" class="blog_catalog_close">>折叠目录</a></li></ul></div>');
- var id = 1;
- $('#cnblogs_post_body h1').each(function(){
- $(this).attr('id','blog_catalog_id_'+id);
- $('#blog_catalog ul').append('<li><a href="#blog_catalog_id_'+id+'">'+$(this).text()+'</a></li>');
- id++;
- });
- $('#blog_catalog_open').click(function(){
- $('#blog_catalog').show();
- $('#blog_catalog_open').hide();
- });
- $('#blog_catalog_close').click(function(){
- $('#blog_catalog').hide();
- $('#blog_catalog_open').show();
- });
- <h1>
- 你可以随意设置你的标题
- </h1>
没错,就是这么简单,其他什么都不需要。
先声明,我这套皮肤是从别人那扒下来的一个雏形然后自己再改了不少地方。但是从哪里弄来的,忘了。。。很尴尬。
具体设置皮肤的也是一抓一大把就不多说了,上干货。
1. 博客皮肤 选择 Custom
2. 页面定制 css 代码
View Code3. 页角 html 代码
View Code
- var digg = $('#mainContent');//the element I want to monitor
- digg.bind('DOMNodeInserted', function(e) {
- $('.buryit').remove();
- });
- $('#navList').children().each(function(){
- $(this).prepend('<div class="border"></div>');
- });
- $('#cnblogs_post_body').append('<div id="blog_catalog_open" class="blog_catalog_open">展开目录</div>');
- $('#cnblogs_post_body').append('<div id="blog_catalog" class="blog_catalog"><ul><li><a id="blog_catalog_close" class="blog_catalog_close">>折叠目录</a></li></ul></div>');
- var id = 1;
- $('#cnblogs_post_body h1').each(function(){
- $(this).attr('id','blog_catalog_id_'+id);
- $('#blog_catalog ul').append('<li><a href="#blog_catalog_id_'+id+'">'+$(this).text()+'</a></li>');
- id++;
- });
- $('#blog_catalog_open').click(function(){
- $('#blog_catalog').show();
- $('#blog_catalog_open').hide();
- });
- $('#blog_catalog_close').click(function(){
- $('#blog_catalog').hide();
- $('#blog_catalog_open').show();
- });
来源: http://www.cnblogs.com/doddgu/p/lunzikuangmo_blog_catalog.html