一步步開發自己的博客 .NET版 劇終篇（6、響應式布局 和 自定義樣式）

前言 

    這次開發的博客主要功能或特點：
    第一：可以兼容各終端，特別是手機端。
    第二：到時會用到大量html5，炫啊。
    第三：導入博客園的精華文章，並做分類。（不要封我）
    第四：做個插件，任何網站上的技術文章都可以轉發收藏 到本博客。

所以打算寫個系類：《一步步搭建自己的博客》

• 一步步開發自己的博客  .NET版（1、頁面布局、blog遷移、數據加載）
• 一步步開發自己的博客  .NET版（2、評論功能）
• 一步步開發自己的博客  .NET版（3、注冊登錄功能）
• 一步步開發自己的博客  .NET版（4、文章發布功能）
• 一步步開發自己的博客  .NET版（5、搜索功能）
• 一步步開發自己的博客  .NET版（6、手機端的兼容）

 

演示地址：http://haojima.net/      群內共享源碼：469075305 

 

《一步步開發自己的博客》這個系列到這里算是完結了。前面的注冊、登錄、評論、發布、搜索每個星期一篇博文，同時每個星期（也就周末兩天）一個版本。這個博客系統使用是的mvc4 ef6.0，對於mvc之前沒是沒有使用過。在這個系統里面使用 我也是邊學邊用。肯定有用的不足和不全的地方，那我也只能后期再修修改改了。我想說的是，前奏給足了，我們現在是不是 該來點高潮的呢？

我們今天要分析的是 響應式布局 和 自定義樣式。興奮吧、激動吧，我自己都淡定不下來了。哈哈。 前面我們做了那么多鋪墊，就是為了今天的 響應式布局 和 自定義樣式。在這個多終端的時代，你不能在移動端正常顯示？ out了吧。那么  我們怎么實現 響應式布局呢？有人馬上會說Bootstrap，好吧我確實知道這么個東西。但是 實話 我也沒怎么用過 ，不熟悉 不了解。但是我知道肯定是 根據屏幕分辨率大小  給不同的樣式。既然 這樣 我們何 不自己寫呢。畢竟 別人的 東西，如果不夠了解的話， 總會出現未知的情況。

好了，說了這么多。來說說今天要分析的重點內容吧。

首頁的響應式布局

為什么說是首頁的響應式布局呢？因為 我只打算做首頁 的 響應式布局。博客內容的 顯示頁面 由用戶自定義。別急 這個等下后面會講到。

1.什么是響應式布局？

    響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨着目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨着越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。--來源百度百科

2.怎樣實現響應式布局

現在響應式布局用得比較大眾的應該是Bootstrap，但是我並不打算使用。原因很簡單，我對Bootstrap不熟悉不了解。然后 我簡單的看了下Bootstrap是怎么實現的響應式布局。原理很簡單，就是使用到了CSS3中的media。media何方神聖？可以用來吃嗎？它可以針對不同的媒體類型定義不同的樣式，也可以針對不同的屏幕尺寸設置不同的樣式。且當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。既然如此，響應式何愁。

3.media的簡單使用

Max Width：在可視區域的寬度小於 600px 的時候被應用。

@media screen and (max-width: 600px) {
  .class {
    background: #0094ff;
  }
}

Min Width：在可視區域的寬度大於600px 的時候被應用。

@media screen and (min-width: 600px) {
  .class {
    background: red;
  }
} 

簡單？對，就是如此簡單。您還可以 在600到900直接的啟用。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #0094ff;
  }
}

當然，您還可以，放入單獨文件。爽歪歪了吧。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="max600.css" />

好了，你已經知道得太多了。實現一個首頁的響應式 基本上已經夠用了。

默認樣式 顯示 移動端：

.blog_body_e.col-xs-12 .a_blog_user {
    display: inline-block;
}

.blog_body_e, .blog_body_b {
    padding-left: 10px;
    padding-right: 10px;
}

如果是PC端：（默認 大於992px就算是PC端 當然，你也可以自定義）

@media (min-width: 992px) {
    .blog_body_e.col-md-3 .a_blog_user {
        display: block;
    }

    .blog_body .blog_body_b {
        width: 80%;
        float: left;
    }

    .blog_body .blog_body_e {
        width: 20%;
        float: left;
        box-sizing: border-box;
        padding-right: 25px;
    }

    .blog_body_e, .blog_body_b {
        padding-left: 20px;
        padding-right: 20px;
    }
}

我們看分布看看效果圖

PC端：

手機端：

        

還可以吧，。

ASP.NET MVC移動端識別 

上面我們已經說了 響應式布局，但那是客戶端的，針對於同一個視圖頁面的。不過 同一個視圖頁面 通過響應式布局 也是有缺點的 會導致頁面 樣式十分龐大 頁面加載效率降低，而且只能 做局部的調整，如果 要做

大的調整 會比較復雜 或根本就不可能實現。

那我們有沒有別的辦法。答案是有的。如果我們 可以在后台 識別 請求過來的是  PC端 還是移動端，然后 加載不同的視圖。這樣  我們就可以有多 份視圖。還好 我們偉大的ASP.NET MVC里面是很好實現的。你只要在你的請求的視圖 在復制一個 改名為.Mobile.cshtml如：_Layout.cshtml和_Layout.Mobile.cshtml。沒了？對 的 ，沒了。如果是 移動端的請求 那么會自動請求_Layout.Mobile.cshtml如果是PC端 那么會自動請求_Layout.cshtml 。

這樣 我們就可以針對兩大類 再做響應式布局。

有人會說，我們在本地開發 都是PC端請求。那么我們怎么測試移動端的效果呢？一定要發布到線上 然后用手機測試？那多麻煩啊，每改一個樣式都要 發布一次。好吧，我再告訴你一個 訣竅。在PC端 偽裝成移動端直接在PC端看移動端的效果。看下面的代碼，復制到Global.asax文件的MvcApplication方法里面。打開注釋 就是 默認顯示 移動端效果。發布的時候記得注釋掉。

////打開注釋 默認 是 移動端 顯示效果
//DisplayModeProvider.Instance.Modes.RemoveAt(0);
//DisplayModeProvider.Instance.Modes.Insert(0,
//    new DefaultDisplayMode("Mobile")
//    {
//        ContextCondition = Context => true
//    }
//    );

 

關於自定義樣式

自定義樣式

我們都是向往自由的，一個博客怎么可以沒有自定義樣式的功能呢？好吧，那我就加一個。

那么自定義樣式有哪些功能呢？CSS樣式、JS腳本權限、頁首html、側邊欄html、頁尾html 都給加上吧。既然你要自由，就給你絕對的自由。

當時，我還在考慮 自定義樣式 存數據庫 還是 存文本呢？存文本吧，一般也不會存在同時訪問一個文件的情況。因為每個用戶 都給了一個文件夾來保存。頁面加載請求的時候也不用讀數據庫，直接請求文件 也會要快很多。

說到想到、想到做到，我們每個登錄用戶在 跳轉到 自定義 樣式頁面的時候 我們 會檢測 是否存在，如果存在 則加載之前 的內容，不存在 創建一個空的文件。當請求博客內容頁面的時候 如果有 自定義樣式 直接加載 過來 ok。簡單。

禁用默認主題樣式

我們上面 修改了樣式 ，但是 我們的默認 主題的樣式 還是存在的，除非 你全部覆蓋掉。有的前端 的高手 ，可能就要說了，我想直接禁用默認主題樣式啊，一個個的去覆蓋你的多麻煩。好吧，我們做程序員的就是這么苦逼，你想要，我就給。。這里，正好 我們把之前 頁面內的css樣式 和 行內css全部分離處理，放到單獨的 css文件里。然后 我們 在請求博客內容頁面的時候，判斷 你是否禁用的  默認樣式 ，如果是 我們就不加載了。

在其他博友頁面啟用自定義主題樣式

這可是我們的重頭戲了。什么是 “在其他博友頁面啟用自定義主題樣式”，那個誰 還說我是在玩強奸，我想說  你誤會了。“在其他博友頁面啟用自定義主題樣式” 是有條件的。第一、你必須在你的設置頁面 勾選了“在其他博友頁面啟用自定義主題樣式”。第二、你必須是登錄狀態。（那么也就是說 其實 只有你自己看得到而已，其他用戶 或 沒有登錄的游客  看到的 還是 博客對應的原始用戶 定義的主題樣式）,為什么要這么做呢？沒有為什么，我就是嫌棄定義的主題樣式太丑了，我不想看，但是 你的文章內容又很有營養，想看。糾結了吧。 那就顯示我自己的主題樣式來閱讀你的文章內容，這樣 你可以定義 有利於在移動端的樣式 然后閱讀任何人的文章。爽吧。

說是這么說，怎么實現呢。其實 我們都已經講了，我們在數據庫里面存一個bool值 是否 啟用顯示 。然后 我們瀏覽博客內容的時候 檢測 是否 是登錄狀態，如果否，這 顯示 博客用戶的 主題樣式。如果是登錄狀態，然后在在判斷 你是否啟用了， 如果沒有啟用 還是 顯示 博客用戶的樣式，最好 如果你登錄了 然后 啟用了 最后 才在其他博友 的博客內容頁面 顯示你自己 定義的樣式。

手機端自定義樣式和PC端自定義樣式

前面我們已經說過了，可以在MVC后台識別請求的是移動端還是PC端，那我們就 做兩份視圖，你可以分別自定義 移動端樣式 和 PC端樣式。 

效果圖：（截圖好像好多小蝌蚪）

總結

這里主要講了 響應式布局 然后 在響應式布局不能滿足的情況下 我們可以 建立 針對不同的終端 建立 對應的 響應式 這樣 可以縮小 范圍 有利於 頁面的加載 和 頁面跟好的顯示。然后  我們還說了 自定義樣式、和禁用樣式 在 其他博友頁面啟用 自定義主題樣式。其實 用代碼實現起來 都不難。只要 理清了 邏輯 和自己想要的效果。

關於這系列博客 到這里 也該告一段落了，真心話 一個星期一個版本 就周末兩天 真心的累。綳緊的神經 感覺好久都沒有放松過了。在這里  我要感謝 一路園友們的支持，不然 我還真堅持不下來。

現在  我終於 可以放松放松 ，然后陪陪老婆了。這陣子 老是抱怨我  電腦才是 我的老婆，都不和她說話了。

有人說，那你的這個博客系統都不用維護的嗎？要維護，還會加 沒有想到的 一些功能 和效果。 不過 不用這么 急迫了。趁着這段時間 我可以慢慢的 重構下 代碼。

后期 我在這個 博客系統  中覺得有用的 或 新加的功能 會再單獨 寫博文來分析。

這才是第一版哦，還會有第二版 第三版，當然 要是有人關注的話。

（我們的終極目標是：PC移動兼容、能在各大博客網收藏保存文章到我們的博客系統、能在手機客戶端離線下載閱讀博客文章）

對了，如果 誰有興趣開發 iPhone、iPad或安卓客戶端的 可以聯系我。(我們的目的很簡單 只是一起學習而已)

暫時提供API:http://blog.haojima.net/UserBlog/webapi 而且已經有朋友 做出了 安卓版的 雛形。（當然 這位朋友 到時候也會寫安卓版 系列文章 和大家一起探討學習 【請移步到此】）

    

 

演示地址：http://blog.haojima.net/Admin/ConfigurePC 

如果您對本篇文章感興趣，那就麻煩您點個贊，您的鼓勵將是我的動力。      

當然您還可以加入QQ群:討論。

如果您有更好的處理方式，希望不要吝嗇賜教。

一步步開發自己的博客 .NET版系列：http://www.cnblogs.com/zhaopei/tag/Hi-Blogs/

本文鏈接：http://www.cnblogs.com/zhaopei/p/4823359.html

開源地址：http://git.oschina.net/zhaopeiym/Hi-Blogs