博客园主题设置

1、页面定制CSS\
2、页首

1、页面定制CSS\

 1 生成博客目录的CSS
 2 #uprightsideBar{
 3     font-size:12px;
 4     font-family:Arial, Helvetica, sans-serif;
 5     text-align:left;
 6     position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
 7     top:50px;
 8     right:0px;
 9     width: auto;
10     height: auto; 
11 }
12 #sideBarTab{
13     float:left;
14     width:30px; 
15     border:1px solid #e5e5e5;
16     border-right:none;
17     text-align:center;
18     background:#ffffff;
19 }
20 
21 #sideBarContents{
22     float:left;
23     overflow:auto; 
24     overflow-x:hidden;!important;
25     width:200px;
26     min-height:108px;
27     max-height:460px;
28     border:1px solid #e5e5e5;
29     border-right:none; 
30     background:#ffffff;
31 }
32 #sideBarContents dl{
33     margin:0;
34     padding:0;
35 }
36 
37 #sideBarContents dt{
38     margin-top:5px;
39     margin-left:5px;
40 }
41 
42 #sideBarContents dd, dt {
43     cursor: pointer;
44 }
45 
46 #sideBarContents dd:hover, dt:hover {
47     color:#A7995A;
48 }
49 #sideBarContents dd{
50     margin-left:20px;
51 }

回到顶部

2、页首

  1 <script type="text/javascript">
  2 /*
  3     功能：生成博客目录的JS工具
  4     测试：IE8，火狐，google测试通过
  5     孤傲苍狼
  6     2014-5-11
  7 */
  8 
  9 var BlogDirectory = {
 10     /*
 11         获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
 12     */
 13     getElementPosition:function (ele) {        
 14         var topPosition = 0;
 15         var leftPosition = 0;
 16         while (ele){              
 17             topPosition += ele.offsetTop;
 18             leftPosition += ele.offsetLeft;        
 19             ele = ele.offsetParent;     
 20         }  
 21         return {top:topPosition, left:leftPosition}; 
 22     },
 23 
 24     /*
 25     获取滚动条当前位置
 26     */
 27     getScrollBarPosition:function () {
 28         var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
 29         return  scrollBarPosition;
 30     },
 31     
 32     /*
 33     移动滚动条，finalPos 为目的位置，internal 为移动速度
 34     */
 35     moveScrollBar:function(finalpos, interval) {
 36 
 37         //若不支持此方法，则退出
 38         if(!window.scrollTo) {
 39             return false;
 40         }
 41 
 42         //窗体滚动时，禁用鼠标滚轮
 43         window.onmousewheel = function(){
 44             return false;
 45         };
 46           
 47         //清除计时
 48         if (document.body.movement) { 
 49             clearTimeout(document.body.movement); 
 50         } 
 51 
 52         var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
 53 
 54         var dist = 0; 
 55         if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出
 56             window.onmousewheel = function(){
 57                 return true;
 58             }
 59             return true; 
 60         } 
 61         if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离
 62             dist = Math.ceil((finalpos - currentpos)/10); 
 63             currentpos += dist; 
 64         } 
 65         if (currentpos > finalpos) { 
 66             dist = Math.ceil((currentpos - finalpos)/10); 
 67             currentpos -= dist; 
 68         }
 69         
 70         var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
 71         window.scrollTo(0, currentpos);//移动窗口
 72         if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
 73         {
 74             window.onmousewheel = function(){
 75                 return true;
 76             }
 77             return true;
 78         }
 79         
 80         //进行下一步移动
 81         var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
 82         document.body.movement = setTimeout(repeat, interval); 
 83     },
 84     
 85     htmlDecode:function (text){
 86         var temp = document.createElement("div");
 87         temp.innerHTML = text;
 88         var output = temp.innerText || temp.textContent;
 89         temp = null;
 90         return output;
 91     },
 92 
 93     /*
 94     创建博客目录，
 95     id表示包含博文正文的 div 容器的 id，
 96     mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
 97     interval 表示移动的速度
 98     */
 99     createBlogDirectory:function (id, mt, st, interval){
100          //获取博文正文div容器
101         var elem = document.getElementById(id);
102         if(!elem) return false;
103         //获取div中所有元素结点
104         var nodes = elem.getElementsByTagName("*");
105         //创建博客目录的div容器
106         var divSideBar = document.createElement('DIV');
107         divSideBar.className = 'uprightsideBar';
108         divSideBar.setAttribute('id', 'uprightsideBar');
109         var divSideBarTab = document.createElement('DIV');
110         divSideBarTab.setAttribute('id', 'sideBarTab');
111         divSideBar.appendChild(divSideBarTab);
112         var h2 = document.createElement('H2');
113         divSideBarTab.appendChild(h2);
114         var txt = document.createTextNode('目录导航');
115         h2.appendChild(txt);
116         var divSideBarContents = document.createElement('DIV');
117         divSideBarContents.style.display = 'none';
118         divSideBarContents.setAttribute('id', 'sideBarContents');
119         divSideBar.appendChild(divSideBarContents);
120         //创建自定义列表
121         var dlist = document.createElement("dl");
122         divSideBarContents.appendChild(dlist);
123         var num = 0;//统计找到的mt和st
124         mt = mt.toUpperCase();//转化成大写
125         st = st.toUpperCase();//转化成大写
126         //遍历所有元素结点
127         for(var i=0; i<nodes.length; i++)
128         {
129             if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
130             {
131                 //获取标题文本
132                 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
133                 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 
134                 nodetext = BlogDirectory.htmlDecode(nodetext);
135                 //插入锚        
136                 nodes[i].setAttribute("id", "blogTitle" + num);
137                 var item;
138                 switch(nodes[i].nodeName)
139                 {
140                     case mt:    //若为主标题 
141                         item = document.createElement("dt");
142                         break;
143                     case st:    //若为子标题
144                         item = document.createElement("dd");
145                         break;
146                 }
147                 
148                 //创建锚链接
149                 var itemtext = document.createTextNode(nodetext);
150                 item.appendChild(itemtext);
151                 item.setAttribute("name", num);
152                 item.onclick = function(){        //添加鼠标点击触发函数
153                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
154                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
155                 };            
156                 
157                 //将自定义表项加入自定义列表中
158                 dlist.appendChild(item);
159                 num++;
160             }
161         }
162         
163         if(num == 0) return false; 
164         /*鼠标进入时的事件处理*/
165         divSideBarTab.onmouseenter = function(){
166             divSideBarContents.style.display = 'block';
167         }
168         /*鼠标离开时的事件处理*/
169         divSideBar.onmouseleave = function() {
170             divSideBarContents.style.display = 'none';
171         }
172 
173         document.body.appendChild(divSideBar);
174     }
175     
176 };
177 
178 window.onload=function(){
179     /*页面加载完成之后生成博客目录*/
180     BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
181 }
182 </script>
183 <script src="http://latex.codecogs.com/latex.js" type="text/javascript"></script>

3、页脚

 1 <script language="javascript" type="text/javascript">
 2 // 生成目录索引列表
 3 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
 4 // modified by: zzq
 5 function GenerateContentList()
 6 {
 7     var mainContent = $('#cnblogs_post_body');
 8     var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
 9 
10     if(mainContent.length < 1)
11         return;
12  
13     if(h2_list.length>0)
14     {
15         var content = '<a name="_labelTop"></a>';
16         content += '<div id="navCategory" style="color:#152e97;">';
17         content += '<p style="font-size:18px;"><b>目录</b></p>';
18         content += '<ul>';
19         for(var i=0; i<h2_list.length; i++)
20         {
21             var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';
22             $(h2_list[i]).before(go_to_top);
23             
24             var h3_list = $(h2_list[i]).nextAll("h3");
25             var li3_content = '';
26             for(var j=0; j<h3_list.length; j++)
27             {
28                 var tmp = $(h3_list[j]).prevAll('h2').first();
29                 if(!tmp.is(h2_list[i]))
30                     break;
31                 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
32                 $(h3_list[j]).before(li3_anchor);
33                 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
34             }
35             
36             var li2_content = '';
37             if(li3_content.length > 0)
38                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
39             else
40                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
41             content += li2_content;
42         }
43         content += '</ul>';
44         content += '</div><p>&nbsp;</p>';
45         content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
46         if($('#cnblogs_post_body').length != 0 )
47         {
48             $($('#cnblogs_post_body')[0]).prepend(content);
49         }
50     }   
51 }
52 
53 GenerateContentList();
54 </script>