分享個人部落格皮膚【相容移動端】

標籤：

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

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

一、相容移動端（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;            }*/}

View Code

：

         

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

：

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就可以了。

 

還有一些自訂的東西這裡就不一一分析了，只要自己想要的效果多試試自然可以慢慢搞定的。如：頁首推薦文章三篇、自動載入閱讀目錄、彈出框和執行代碼地區框。

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

 

注意：

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

2.請不要試圖引用新的jqeruy進去，否則你的部落格會有你想不到的問題。（因為部落格園裡面有基於Jquery的外掛程式）。

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

 

分享個人部落格皮膚【相容移動端】