.Net轉前端開發-啟航篇，如何定制博客園主題

本文轉載自查看原文 2016-04-08 02:54 1683 前端技術

開始制作皮膚

真心覺得博客園的主題是有點過時，想了想要不自己寫一個，於是跑到個人管理里邊查找資料看怎樣寫博客皮膚，找到默認皮膚的下載地址：http://skintemplate.cnblogs.com/。下載下來的東西包括blogskin和blogSkinDOC，blogskin里邊包含了個人博客的所有界面CSS的文件style.css，blogSkinDOC包含一個叫做“博客皮膚開發文檔.xls”的文檔，里邊列出了所有頁面的樣式class和id。我們所需做的就是通過修改這些選擇器的樣式來定制自己的皮膚。文檔截圖如下：

CSS靜態效果

自己也是才轉做前端，最近看了下CSS和HTML，為了能學以致用就試試寫個自己的皮膚，正好換換自己的博客皮膚。下面截幾張圖修改后的皮膚。

1. 首頁面

2.文章頁面

3.文章列表

4.留言頁面

通過JS添加交互效果

修改CSS樣式，僅僅只是改變了博客的外觀樣式，這樣的界面也是死氣層層。所以，還得通過添加JS代碼實現一些動態的交互效果。想了想，覺得在導航上添加效果比較合適，於是在header的右邊部分添加三個菜單：

這三個菜單分別用於導航、聯系博主、查詢，通過點擊菜單可以交替的顯示、隱藏菜單內容。例如頁面初始化效果的header如下：

點擊導航菜單把導航顯示出來：

再點擊一次又可隱藏導航菜單。再結合Jquery的動畫效果，我們就可以實現菜單的動態交互效果。下面是實現動態菜單的JS代碼：

<script type="text/javascript">
    var timeOut;
    /**
    /* 設置選擇器集合中指定選擇器的可見性
    */
    function switchSelectionVisible(allSelections, element){
        if($(element).css("display") == "none"){
            //先然所有的不可見，然后再設置當前選擇器可見
                var anyVisile = false;
                $.each(allSelections, function(i, value){
                    if($(value).css("display") != "none"){
                        anyVisile = true;
                        $(value).slideUp({speed: "fast"});
                    }
                });    
                if(timeOut){
                    clearTimeout(timeOut);
                }
                //如果都不可見快速的顯示當前選擇器
                if(!anyVisile){
                    $(element).slideDown({speed: "fast"});
                //如果有可見的，前面有隱藏的操作，所以需要延遲執行。
                }else{
                    timeOut = setTimeout(function(){
                        $(element).slideDown({speed: "fast"});
                    }, 500);
                }
        }else{
            $(element).slideUp({speed: "fast"});
        }
    }

    $(function(){
        var selections = ["#navigator", ".navigator-search", ".navigator-link"];
        //添加菜單HTML
        var menuHtml = '<div class="navToggleList">' + 
                '<div class="togglenbtclass" title="menu"></div>' + 
                //'<div class="togglenbtclass" title="setting"></div>' + 
                '<div class="togglenbtclass" title="link"></div>' + 
                '<div class="togglenbtclass" title="search"></div>' + 
                '</div>';
        $("#blogTitle").append(menuHtml);

        //添加聯系HTML
        var linkHtml = '<div class="navigator-link">' +
                            '<div class="side_link">' +
                                '<a href="http://images.cnblogs.com/cnblogs_com/w-wanglei/808168/o_wx.jpg" target="_blank"><img ' + 'src="http://images.cnblogs.com/cnblogs_com/w-wanglei/808168/o_Wechat.png"></a>' +
                                '<a href="javascript:void"><img src="http://images.cnblogs.com/cnblogs_com/w-wanglei/808168/o_tencent.png"></a>' +
                                '<a href="javascript:void"><img src="http://images.cnblogs.com/cnblogs_com/w-wanglei/808168/o_email.png"></a>' +
                            '</div>' +
                        '</div>';
        $("#header").append(linkHtml);

        //添加查詢HTML
        var searchHtml = '<div class="navigator-search">' + 
                            '<div class="side_search">' + 
                                '<input type="text" id="zzk_q" class="search_input" onkeydown="return zzk_go_enter(event);" tabindex="3">' + 
                                '<input onclick="zzk_go()" type="button" class="search_btn" value="找找看">' + 
                            '</div>' + 
                        '</div>';
        $("#header").append(searchHtml);

        //navi、search、link都設置不可見
        $.each(selections, function(i, value){
            $(value).css("display", "none");
        });
        
        $(".navToggleList").find("div[title='menu']").bind("click", function(event){
            switchSelectionVisible(selections, "#navigator");
        });

        $(".navToggleList").find("div[title='search']").bind("click", function(event){
            switchSelectionVisible(selections, ".navigator-search");
        });

        $(".navToggleList").find("div[title='link']").bind("click", function(event){
            switchSelectionVisible(selections, ".navigator-link");
        });
    });
</script>

代碼里邊有一個數組： ["#navigator", ".navigator-search", ".navigator-link"]，數組的三個值分別對應了三個菜單的選擇器。同時也定義了三段HTML字符串：menuHtml、linkHtml、searchHtml。menuHtml實現三個圖標菜單的HTML代碼，linkHtml、searchHtml分別對應了聯系菜單和查找菜單內容。另外這里我們沒看到導航的具體Html代碼，那是因為頁面本身就提供了導航欄，不需要我們動態添加。最后分別給這三個菜單添加了“click”事件，交替顯示、隱藏菜單欄。

怎樣提交自定義皮膚到博客園

1.移出標准CSS，添加自己的CSS

在介紹提交方法之前，我們先看看我們在博客園自己首頁的header源代碼：

<head>
    <link href="http://www.microsofttranslator.com/static/226010/css/WidgetV3.css?v=226010" rel="stylesheet"><script src="http://www.microsofttranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&amp;ctf=False&amp;ui=true&amp;settings=Manual&amp;from=zh-CHS" type="text/javascript" charset="UTF-8"></script>
    <meta charset="utf-8">
    <title>XXX</title>
    <link href="/bundles/blog-common.css?v=8F6jO9aWZhOryqKsIFGUkSbXpyPVKDwgWwvpie3eJis1" rel="stylesheet" type="text/css">
    <link id="MainCss" href="/skins/Minyx2_Lite/bundle-Minyx2_Lite.css?v=box8Dmmj5G0VFMZyypCbLIqNJsuu5lz6TpJ4OOK0WkE1" rel="stylesheet" type="text/css">
    <link href="/blog/customcss/132866.css?v=pgkMx6GO%2bAy%2frl0wbaBALXpYqTQ%3d" rel="stylesheet" type="text/css">
    <!-- 省略JS引用 -->

</head>

我們在title節點下面看到三個CSS文件的引用，blog-common.css不涉及到界面可以不管，第二個文件是包含id="MainCss"的CSS文件，它正是我們界面的標准樣式，包含了界面所有選擇器。由於我們寫的CSS中也包含了標准CSS選擇器的樣式設置，所有得想辦法把標准CSS文件移出，於是就有了下邊的一段代碼JS代碼：

function guid() {
      function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1);
      }
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
        s4() + '-' + s4() + s4() + s4();
    }
    
    var css = '<link id="MainCss" type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/XXX/style.css?v=' + guid()  + '" />';
    $("head").append(css);
    $("#MainCss").remove();