一步步開發本身的博客 .NET版劇終篇（六、響應式佈局和自定義樣式）

時間 2019-12-01

標籤步步開發本身博客劇終響應佈局自定義樣式简体版

原文原文鏈接

前言

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

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

《一步步開發本身的博客》這個系列到這裏算是完結了。前面的註冊、登陸、評論、發佈、搜索每一個星期一篇博文，同時每一個星期（也就週末兩天）一個版本。這個博客系統使用是的mvc4 ef6.0，對於mvc以前沒是沒有使用過。在這個系統裏面使用我也是邊學邊用。確定有用的不足和不全的地方，那我也只能後期再修修改改了。我想說的是，前奏給足了，咱們如今是否是該來點高潮的呢？html5

咱們今天要分析的是響應式佈局和自定義樣式。興奮吧、激動吧，我本身都淡定不下來了。哈哈。前面咱們作了那麼多鋪墊，就是爲了今天的響應式佈局和自定義樣式。在這個多終端的時代，你不能在移動端正常顯示？ out了吧。那麼咱們怎麼實現響應式佈局呢？有人立刻會說Bootstrap，好吧我確實知道這麼個東西。可是實話我也沒怎麼用過，不熟悉不瞭解。可是我知道確定是根據屏幕分辨率大小給不一樣的樣式。既然這樣咱們何不本身寫呢。畢竟別人的東西，若是不夠了解的話，總會出現未知的狀況。git

好了，說了這麼多。來講說今天要分析的重點內容吧。程序員

首頁的響應式佈局

爲何說是首頁的響應式佈局呢？由於我只打算作首頁的響應式佈局。博客內容的顯示頁面由用戶自定義。別急這個等下後面會講到。web

1.什麼是響應式佈局？

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

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用「大勢所趨」來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。--來源百度百科

2.怎樣實現響應式佈局

如今響應式佈局用得比較大衆的應該是Bootstrap，可是我並不打算使用。緣由很簡單，我對Bootstrap不熟悉不瞭解。而後我簡單的看了下Bootstrap是怎麼實現的響應式佈局。原理很簡單，就是使用到了CSS3中的media。media何方神聖？能夠用來吃嗎？它能夠針對不一樣的媒體類型定義不一樣的樣式，也能夠針對不一樣的屏幕尺寸設置不一樣的樣式。且當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。既然如此，響應式何愁。數據庫

3.media的簡單使用

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

@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文件裏。而後咱們在請求博客內容頁面的時候，判斷你是否禁用的默認樣式，若是是咱們就不加載了。

在其餘博友頁面啓用自定義主題樣式

這但是咱們的重頭戲了。什麼是「在其餘博友頁面啓用自定義主題樣式」，那個誰還說我是在玩強姦，我想說你誤會了。「在其餘博友頁面啓用自定義主題樣式」是有條件的。第1、你必須在你的設置頁面勾選了「在其餘博友頁面啓用自定義主題樣式」。第2、你必須是登陸狀態。（那麼也就是說其實只有你本身看獲得而已，其餘用戶或沒有登陸的遊客看到的仍是博客對應的原始用戶定義的主題樣式）,爲何要這麼作呢？沒有爲何，我就是嫌棄定義的主題樣式太醜了，我不想看，可是你的文章內容又頗有養分，想看。糾結了吧。那就顯示我本身的主題樣式來閱讀你的文章內容，這樣你能夠定義有利於在移動端的樣式而後閱讀任何人的文章。爽吧。

說是這麼說，怎麼實現呢。其實咱們都已經講了，咱們在數據庫裏面存一個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