博客园导航栏优化

想自定义一下自己的导航栏嘛，往下看呀，哈哈哈。

 

1.首先查看一下自己的最基本路径！！！！！

不晓得怎么看的童鞋，去自己的博客首页，右键自己的昵称，复制链接地址即可！

 

2.下面进入主题

<script>
//这边就是第一步复制的基本路径 后边加上category 根据自己那边显示的为准
var categoryurl = 'https://www.cnblogs.com/fushengliuyi/category/';

//定义自己显示的分类的id值 ''字符串代表首页
var navurl = new Array('',1640528,1641150,1641297,1641298,1641300);

//定义自己导航栏中的显示文本  与url的对应
var navname = new Array('首&nbsp;页','Python','Django','爬虫','数据分析','机器学习');

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

/*遍历数组并循环生成html代码，合并到str这个变量中存起来*/
for (var i=0;i<6;i++){
   if(i == 0){ //如果是第一个（首页），我们用来定义首页链接
      str += "<li><a href=\'http://www.cnblogs.com/fushengliuyi/\'>"+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(){
   $("#navList").html(str);
});
</script>

 

复制上边的代码，粘贴进页首html中即可

　　不晓得在哪里的童鞋，进入自己博客的后台，设置操作往下滑即可看到！

 

 

来源：https://www.cnblogs.com/fushengliuyi/p/12256456.html