一次博客園美化經歷

前言

• 作為一個前端僅僅是入門的程序員，通過面向baidu編程美化博客園真是痛不欲生。借用運維的話：

對着破電腦，一調一下午。

• 在使用博客園的時候，默認使用的custom模板雖然簡單直觀，但是不足以方便閱讀和使用，比如沒有目錄，因此我進行了為期一天（總體是三天）的博客園界面美化，這里介紹一下具體內容和遇到的問題。

• 通過參考博客園等平台的相關文章，我添加了顯示目錄功能、新增一列導航欄菜單、GitHub地址、回到頂部按鈕。參考的博文未記錄地址，因此這里我僅介紹一下自己參與修改的（絕大多數）前兩項內容，其他的功能請自己去搜一搜。

浮動顯示目錄功能

1. 總體效果
   • 在頁面固定位置顯示目錄控制按鈕，當鼠標移入時顯示目錄，鼠標移出時隱藏目錄，鼠標移入目錄列表可以選擇點擊目錄。
   • 效果圖如下：
     
2. 具體實現思路
   • 目錄控制按鈕和目錄顯示部分都是創建的一塊div區域，遍歷目錄並動態添加超鏈接，將每條目錄依次添加進目錄容器indexs_container內，然后將目錄容器添加進div區域中。
   • 最后添加鼠標移入移出事件。
3. 需要自定義的地方
   • 我使用的目錄為三級標題，修改的話修改var hs = $('#cnblogs_post_body h3');這里。
   • 其他的顏色、位置可以自己修改。
4. 實現js

<!-- 目錄js -->
<div class="indexsController" style="position: fixed;left: 1px;top: 110px;display: none"></div>
<div class="fixedIndexs" style="position: fixed;left: 32px;top: 110px;display: none"></div>

<script language="javascript" type="text/javascript">
    var indexsController=$('.indexsController');
    var fixedIndexs=$('.fixedIndexs');
    var hs = $('#cnblogs_post_body h3');

    function createIndexs(){
        var indexs_controller=$('<div id="catelog" style="border:solid 2px #ccc; background:#8B2323;width:9px;padding:4px 10px;"></div>');
        var indexs_container=$('<div id="container" style="border:solid 3px #ccc; background:#FFFFFF;width:220px;padding:4px 10px;"></div>');
        var controller=$('<p style="cursor: pointer"><font color="white">目 錄</font></p>');
        var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');

        indexs_controller.append(controller);
        indexs_container.append(indexs);

        $.each(hs,function(i,h){
            $(h).before('<a name="index_'+i+'"></a>');
            indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'">'+$(h).text()+'</a></li>');
        });

        if(hs.length!=0){
            indexsController.append(indexs_controller);
            fixedIndexs.append(indexs_container);
            //get home div right offset
            fixedIndexs.css('right',$("#home").offset().left+32+'px');
        }
    }

    createIndexs();
    indexsController.show();

    $("#catelog").mouseover(
        function(){
            fixedIndexs.show();

            //$(fixedIndexs).animate({width:'toggle'},80);
        }
    );
    $("#catelog").mouseout(
        function(){
            fixedIndexs.hide();
        }
    );
    $("#container").mouseover(
        function(){
            fixedIndexs.show();
        }
    );
    $("#container").mouseout(
        function(){
            fixedIndexs.hide();
        }
    );
</script>

添加導航欄菜單

1. 總體效果
   • 我新增了一個菜單項--隨筆分類，鼠標移入時會下拉顯示所有的分類，選擇分類進入對應頁面。
   • 效果圖如下：
     
2. 具體實現思路
   • 首先添加菜單項，我是將【隨筆分類】添加到【聯系】之前，因此先獲取【聯系】的DOM節點，然后創建一個同級節點【隨筆分類】，使用insertBefore方法插入新節點。
   • 然后是創建下拉列表，先定義一個div區域，獲取隨筆分類的個數，然后一個循環動態地添加分類項到分類容器category_container中，然后將分類容器添加到div區域中。
   • 其中div區域的位置是動態添加的，即獲取【隨筆分類】的位置，然后通過 fixedCategories.css({"left": newCategory.getBoundingClientRect().left, "top": newCategory.getBoundingClientRect().bottom});動態添加css樣式。
3. 遇到的問題
   • 由於新添加的菜單項的分類列表是寫死的，我們只能通過給定的id調用，通過document.getElementById("sidebar_postcategory").getElementsByTagName("ul")[0];來獲取分類列表的集合，我至今沒調試出來這句話獲得了什么，只是簡單的用它獲得了分類的個數len。
   • 本來想接着添加一個【標簽】的菜單項，結果給定的標簽控制器沒有id，DOM技術學的不夠多，不知道如何獲取什么都沒有的元素，因此就不折騰了。
   • 由於博客園側邊欄腳本總是最后加載，因此document.getElementById("sidebar_postcategory")有時會獲取空值導致不顯示列表項，雖然此腳本添加了onload延遲加載，但是edge瀏覽器有時還是有問題，谷歌瀏覽器就很少出現問題，刷新頁面直到顯示便是。
   • 兩個腳本都是添加在頁尾html代碼中，需要申請js權限。
   • 手機瀏覽頁面的話，點擊目錄或者【隨筆分類】顯示內容，點擊空白隱藏內容。
4. 實現js

<div class="fixedCategories" style="position: absolute;display: none"></div>

<!-- 添加新導航 分類js -->
<script type="text/javascript">
$(function() {
    var curNode = document.getElementById("blog_nav_contact");
    var newCategory = document.createElement("li");
    newCategory.innerHTML="<li><a class=\"menu\" id=\"blog_nav_category\" href=\"#\" click=\"showCategories()\">隨筆分類</a></li>";
    curNode.parentNode.insertBefore(newCategory, curNode);
    fixedCategories.css({"left": newCategory.getBoundingClientRect().left, "top": newCategory.getBoundingClientRect().bottom});
});
</script>


<!-- 分類生成下拉列表 -->
<script type="text/javascript">
    var fixedCategories=$('.fixedCategories');
    function showCategories(){

        fixedCategories.show();
        //$(fixedCategories).slideToggle("fast");
    };
    $(window).load(function() {

        var cgs = document.getElementById("sidebar_postcategory").getElementsByTagName("ul")[0];
        var len = cgs.children.length;

        function createCategories(){
            var category_container=$('<div id="cgcontainer" style="border:solid 3px #CAFF70; background:#FFFFFF;width:200px;padding:4px 10px;"></div>');

            var categories=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');


            category_container.append(categories);
            fixedCategories.append(category_container);

            for(var i = 0; i < len; i++){
                var cgid = "CatList_LinkList_0_Link_" + i;
                categories.append('<li style="list-style:decimal"><a href="' + document.getElementById(cgid).href + '">' + document.getElementById(cgid).innerHTML + '</a> </li>');
            }
    };

    createCategories();

    $("#blog_nav_category").mouseover(
        function(){
            fixedCategories.show();
        }
    );
    $("#blog_nav_category").mouseout(
        function(){
            fixedCategories.hide();
        }
    );
    $("#cgcontainer").mouseover(
        function(){
            fixedCategories.show();
        }
    );
    $("#cgcontainer").mouseout(
        function(){
            fixedCategories.hide();
        }
    );



});
</script>