（轉載）怎樣在博客園中添加本身的導航欄

本來想在博客園中添加本身的導航欄，摸索一番後才發現，博客園沒有提供添加本身導航欄的功能。要是能本身寫js來添加應該也是能夠的，因而申請了js權限，申請了好屢次都不經過，~~o(>_<)o ~~，今天終於審覈經過了，本身嘗試來添加導航。

準備導航欄js

我本身寫了一個簡單的jquery插件來添加或者移除導航，好，很少說了，貼出代碼：

(function(jQuery) {
    
    var arr = [], slice = arr.slice;
    
    var methods = {
        init: function() {
        },
        addNav: function(index, name, url) {
            var $nav = $(this), $items = $nav.children(),
                $item = $('<li><a class="menu" href="' + url + '">' + name + '</a></li>');
            if (index < $items.length) {
                $items.eq(index).before($item);
            } else {
                $nav.append($item);
            }
            return this;
        },
        removeNav: function(index) {
            var $nav = $(this);
            $nav.children(':eq(' + index + ')').remove();
            return this;
        }
    };
    
    $.fn.cnblogsNav = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.cnblogsNav' );
        }
    };
})(jQuery);

樓樓已經將該插件的代碼上傳到博客園了，有須要的同窗能夠直接引用：

<script src="//blog-static.cnblogs.com/files/zhangfengxian/cnblogs-nav.js"></script>

添加移除導航

添加移除導航的代碼比較簡單，以下：

<script>
    $(function() {
        var $navList = $('#navList');
        $navList.cnblogsNav('addNav', 4, '讀書書單', '//www.cnblogs.com/zhangfengxian/p/my-book-list.html');
        $navList.cnblogsNav('addNav', 4, '個人AI之路', '//www.cnblogs.com/zhangfengxian/p/my-ai-trip.html');
        $navList.cnblogsNav('removeNav', 2);    
    });
</script>

addNav方法有三個參數：

• index：添加的導航的索引，從0開始
• name：導航的名稱
• url：導航的url

removeNav只有一個參數index：刪除的導航的索引，從0開始。

怎麼樣？很簡單是吧，趕快在你的博客上用起來吧。

 

---------------------
做者：zhangfengxian
來源：博客園
原文：https://www.cnblogs.com/zhangfengxian/p/cnblogs-add-my-nav.html