分享個人博客皮膚【兼容移動端】

我真正開始寫博客也有一年了，記得最開始寫博客之前做的第一件事就是自定義皮膚樣式，還為此寫過一篇博文《博客園頁面設置》。當然從現在的我看那個時候的我是那么的菜，也許一年之后看現在的我也會同樣的想法（其實這樣也挺好的，證明自己進步了）。為什么要自定義皮膚樣式？當然是為了編寫出來的博文讓人更有閱讀欲，自己看着也舒服。很多時候沒有一個好的皮膚樣式也會成為我們不寫博文的一個借口《我們為什么應該堅持寫博客》。

其實，很多時候我是很懶的。不是實在看不下去了一般我也不會去動原來的樣式。早就有寫這篇博文的沖動，因為懶一直拖到現在。現在大冷天的周末躺在被子里面實在不想起床，拿着手機逛着博客園。可惜的是閱讀體驗非常的不好（我並沒有裝客戶端）,有的甚至無法閱讀。實在是受不了，今天決定編寫此文，大家有空都讓自己的博客兼容移動端吧。其實，我想很多園友並不是不會，也只是因為懶才沒有兼容（分分鍾的事，為了你的讀者。）。本文最主要的目的就是想發動大家都來使用自定義樣式來兼容移動端，順便把自己一些其他自定義也分享了。

一、兼容移動端（img自動滾動條）

兼容移動端，其實非常簡單，要做的事情也不多。在《一步步開發自己的博客 .NET版 劇終篇（6、響應式布局 和 自定義樣式）》文中我已經分析過了，今天再次分析下吧。

• 在head中增加一個meta

使用過bootstrap的同學都知道，必須在head標簽內加上 <meta name="viewport" content="width=device-width, initial-scale=1"> （參數1：設置屏幕寬度為設備寬度，參數2：縮放值為1。這樣做是為了防止根據不同屏幕的像素密度對你的頁面進行縮放），然我們博客園並沒有默認加上這個meta。所以，我們只能通過javascript動態加上去了。

$("head").prepend("<meta name='viewport' content='width=device-width, initial-scale=1'>");

• 在css中加一個移動端的media

/*在屏幕寬度小於992px的時候（假設是移動端）*/
@media (max-width: 992px) {
     /*
           這里定義的樣式只有在屏幕下於992px的時候才會起作用
           可以在這里定義，在移動端應該要設置的樣式。
     */
}

• 樣式中設置大圖或固定寬度容器可以左右滾動

在移動端顯示最大的問題應該就是屏幕太小，導致有些內容不能完全顯示吧。我們可以讓其左右滾動。

* {
    overflow: auto;/*溢出內容自動滾動*/
    word-wrap: hyphenate;
}

直接暴力決絕，任何元素只要溢出都讓自動滾動。

如此簡單的兩步就實現了移動端的兼容，容易吧。所以，同志們都來兼容移動端吧。我們開始吧：

1.首先在我的后台頁面http://i.cnblogs.com/Configure.aspx

 

2.javascript部分的代碼

 $("head").prepend("<meta name='viewport' content='width=device-width, initial-scale=1'>"); 

3.css部分的代碼

/*移動端*/
@media (max-width: 992px) {
    .footer {
        margin-right: 5px;
    }

    .divyoulian, #footer {
        margin-right: 5px;
        padding-bottom: 5px;
    }

    #mymainContent {
        margin: 8px;
    }

    #mainContent {
        margin-right: 5px;
        margin-left: 5px;
    }

    .forFlow {
        margin: 0px;
    }

    /*#sideBar, #header {
        display: none;
    }*/
    #sideBar, #div_digg {
        position: initial;
    }

    * {
        overflow: auto;
        word-wrap: hyphenate;
    }

    #sideBar li {
        text-indent: initial;
    }

    /*#cnblogs_post_body p, #cnblogs_post_body li {
        font-size: 33px;
    }*/
    .myadd_left {
        display: none;
    }

    .myadd_right {
        float: none;
        width: 100%;
    }

        .myadd_right div {
            line-height: 50px;
        }

    .myadd {
        margin: 0px;
    }

    /*.myadd_right div a {
                font-size: 10px;
            }*/
}

效果圖：

         

二、歷史評論記錄移動效果

效果圖：

1.http://i.cnblogs.com/Preferences.aspx 中

 盡量選多點顯示的評論量。

2.固定最新評論的區域大小，並讓其溢出內容隱藏。

#RecentCommentsBlock {
    max-height: 400px;
    overflow: hidden;
}

 3.用javascript動態改變滾動條位置。

//移動一個單位 評論
function nextRecTop() {
    var rec = $("#RecentCommentsBlock");
    if (rec.length) {
        var top = rec.scrollTop();
        top++;
        rec.scrollTop(top);
        if (top != rec.scrollTop())
            rec.scrollTop(0);
    }
}
//移動評論
function MobileComment() {
    var RecCommentTime = 30;//間隔時間
    var RecintervalId = setInterval(function () {
        nextRecTop();
    }, RecCommentTime);

    //鼠標移動時
    $("#RecentCommentsBlock").hover(function () {//移進
        clearInterval(RecintervalId);
    }, function () {//移出
        RecintervalId = setInterval(function () {
            nextRecTop();
        }, RecCommentTime);
    });
}

三、評論區域

1.顯示頭像

很多人問我頭像怎么出來的，其實你知道仔細觀察過就會發現默認已經加載了圖像，只是沒顯示出來而已。以dudu的博文評論為例：

然后我們在利用javascript動態組裝就可以了。

2.評論區“溫馨提示”

其實這只是一張圖片而已，在textarea取的焦點時隱藏背景圖片。

1.設置類樣式（背景圖）

.tbCommentBody_bg {
    background: url('http://images2015.cnblogs.com/blog/208266/201510/208266-20151018182003319-279061587.png') no-repeat;
}

2.javascript添加類

function focusoutCommentBody_bg() {
    $("#tbCommentBody").focusout(function () { addtbCommentBody_bg(); });
}

//添加評論區 背景
function addtbCommentBody_bg() {
    var tbcomment = $("#tbCommentBody");
    if (!tbcomment.hasClass("tbCommentBody_bg")) {
        tbcomment.addClass("tbCommentBody_bg");
        tbcomment.focus(function () {
            removetbCommentBody_bg();
        });
    }
}

//移除評論區 背景
function removetbCommentBody_bg() {
    !$(".tbCommentBody_bg").removeClass("tbCommentBody_bg");
    $("#tbCommentBody").unbind("focus");
}

四、標簽搜索

日積月累，如果我們寫的博文過多不方便查找時，可以搜索標簽。

1.通過讀取頁面http://www.cnblogs.com/zhaopei/tag的所有標簽存在隱藏域。

//讀取 標簽
function gettag() {
    $.ajax({
        type: "get",
        dataType: 'html',
        url: "http://www.cnblogs.com/zhaopei/tag",
        data: {},
        beforeSend: function (XMLHttpRequest) {//當一個Ajax請求開始時觸發。
        },
        complete: function (jqXHR, status, responseText) {//請求完成時觸發這個事件
        },
        success: function (data) {
            //設置寬度一致
            $(".select_list_tag").css("width", $(".text_select_tag").css("width"));
            $(".hidden_tag").val("");
            var a = $(data).find("#MyTag1_dtTagList td a");
            var span = $(data).find("#MyTag1_dtTagList td span.small");
            for (var i = 0; i < a.length; i++) {               
                $(".hidden_tag").append(a[i].innerHTML + "&");
            }
            //yuntagF();
            get_list_tag();
        },
        error: function (msg) {
        }
    });
}

2.添加到Html5中的自動補全控件

用法（例）：

<input list="pasta">

<datalist id="pasta">
<option>Bavette</option>
<option>Cannelloni</option>
.......
</datalist>

我們還可以使用必應站內搜索：http://cn.bing.com/search?q=js+site:cnblogs.com/zhaopei 把最后的zhaopei修改成你自己的博客id就可以了。

五、彈出框 

我們在開通js權限的時候，我想大家應該都嘗試過alert函數。發現沒有效果，還以為是沒有開通或是哪里出問題了。其實只是屏蔽了alert而已。

早在IE瀏覽器如果來個死循環alert，估計就只能殺死頁面進程了，不然沒完沒了。我想就是因為這個原因，博客園才禁用alert的吧。看了其實只是把alert用console.log的方式實現了。代碼應該是(猜的)：

window.alert = function (data) {
    console.log(data);
}

這樣你 alert("123"); 就會以日志的形式輸出了。不信你試試。

可以有時候我們就想有彈出框的效果怎辦，比如之前寫javascript的學習記錄，就需要大量的彈出框效果。如：

我是怎么實現的呢？其實就和當時他們屏蔽alert的形式就可以了。

window.alert = function (data) {    
    //...這里自定義一個彈出框
}

再次覆蓋alert的定義就可以了。

//***********因為博客園屏蔽了alert函數，這里自己實現一個消息框******************
   //添加一個消息框div
        $("body").append("<div class='alertMsg'></div>");

        function MyAlert() {
            this.textList = [];
            this.index = 0;
        }
        //定義alert函數
        MyAlert.prototype = {
            tempAlert: function (value) {
                //給消息框賦值，並彈出
                var mythis = this;
                $(".alertMsg").text(String(value)).dialog({
                    buttons: {
                        "確定": function () {
                            $(this).dialog('close');
                            mythis.Hidden();
                        },
                        "關閉": function () {
                            $(this).dialog('close');
                            mythis.textList = [];
                            mythis.index = 0;
                        }
                    }
                });
            },
            Show: function (text) {
                this.index++;
                this.textList.push(text);
                if (this.textList.length == 1) {
                    this.Operater();
                }
            },
            Operater: function (text) {
                if (this.textList.length > 0) {
                    this.tempAlert(this.textList[0]);
                }
            },
            Hidden: function () {
                this.textList.shift();
                if (this.textList.length > 0) {
                    this.Operater();
                }
            }
        }
        var myAlert = new MyAlert();
        alert = function (msg) {
            myAlert.Show(msg);
        }
//***********因為博客園屏蔽了alert函數，這里自己實現一個消息框******************

注意這里的dialog就是jqeruy ui中的彈出框。（有現成的，自己也就懶得去實現了）,所以還需要引入jqeruy ui的js和css

<link href="http://files.cnblogs.com/files/zhaopei/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="http://files.cnblogs.com/files/zhaopei/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="http://files.cnblogs.com/files/zhaopei/jquery-ui-1.8.24.min.js"></script>

有了彈出框，我們就可以添加執行代碼區域框了。

<textarea class="test_code" style="width: 80%;height:80px; max-height: 200px;">

<!--這里寫測試的javascript代碼,然后alert想要彈出的結果-->

</textarea>
<input type="button" class="test_code_but" onclick="eval($(this).prev().val());" value="運行" />

搞定，這就實現了上面的效果圖了。測試：

for (var i = 0; i < 10; i++) { alert(i); }

 

 

還有一些自定義的東西這里就不一一分析了，只要自己想要的效果多試試自然可以慢慢搞定的。如：頁首推薦文章三篇、自動加載閱讀目錄。

這里給出我的樣式代碼下載。 

 

注意：

1.我是在下面皮膚基礎上修改的。你如果要使用我的樣式，先選擇這個默認皮膚。

2.請不要試圖引用新的jqeruy進去，否則你的博客會有你想不到的問題。（因為博客園里面有基於Jquery的插件）。

 （當然，你也可以在評論區分享你的自定義樣式。）