如何自定义博客园导航栏？

　　今天向博客园申请开通JS功能，很快就得到了批准(速度超赞)。得到权限后，花了点时间研究了一下如何修改博客导航栏的内容。由于博客园后台并没有给我们开通修改导航的功能，所以我们只能另辟蹊径，利用我们学到的JavaScript知识，人工修改下导航内容。

先来看代码：

<script>
//定义分类页的基本路径
var categoryurl = 'http://www.cnblogs.com/iyaya/category/';

//定义分类的id数组，注意第一个为空字符鼓串，因为那个我是准备用来做首页链接的
var navurl = new Array('',913588,914048,913584,913583,913586);

//定义栏目标题数组，注意与navurl数组里面的值一一对应
var navname = new Array('首&nbsp;页','JavaScript','HTML+CSS','PHP','MySQL','Linux');

//开始构造html代码
var str = '<ul>';

/*遍历数组并循环生成html代码，合并到str这个变量中存起来*/
for (var i=0;i<6;i++){
   if(i == 0){ //如果是第一个（首页），我们用来定义首页链接
      str += "<li><a href=\'http://www.cnblogs.com/iyaya/\'>"+navname[i]+"</a></li>";
    }else{
　　   //分类页链接结构拼接
      str += "<li><a href=\'"+categoryurl+navurl[i]+".html\'>"+navname[i]+"</a></li>"
    }
}
str += '</ul>';

/*博客园自带了jQuery插件，所以我们直接使用jQuery语法将生成的html代码写入到页面中，注意navigator这个id对象是我们要插入的位置*/
$(document).ready(function(){
   $("#navigator").html(str);
});
</script>

 

然后，我们把写好的js代码，在管理界面复制粘贴到页首或页脚代码中，如下图：

 

效果还不错吧：

 

转载于:https://www.cnblogs.com/iyaya/p/6099066.html