twobin博客樣式—“藍白之風”

自暑假以來，囫圇吞棗一般蒙頭栽入前端自學中，且不說是否窺探其道，卻不自覺中提高了對網頁版面設計的要求，乃至挑剔。一個設計清爽美觀的網頁能讓讀者心曠神怡，甚至沒有了閱讀疲勞；而一個設計粗劣嘈雜的網頁實在讓讀者為之揪心難受，何談長時間閱讀，不僅苦了眼睛，倦了身體，更是傷了精神。

於博客園中開博撰文后，不時為眾多設計精彩的博客主題而流連忘返，且不說博文質量如何，單看那設計用心，清新自然的博客，便對博主的審美感觀頻添幾分贊許，自然要駐留些時候細細拜讀博主的隨文，因此風格樣式對於博客就好似於地段門面對於酒樓一般，重要非凡，雖說酒香不怕巷子深，博文甚佳者自然可不必拘泥於小節，本文借以告誡劣酒藏深巷者：既已開博，請用心相待！

本人未曾研習半點設計知識，一大遺憾，卻仍然對本博客用心相待，幾分實力便呈現幾分設計，同時也希望能夠提高讀者的閱讀感受，便為博客自定義一套風格樣式，自己毫無設計功底，故不敢大肆宣談用戶體驗，有班門弄斧之嫌。每每有博友望借鑒幾分這“藍白樣式”，如今便呈了這份心意，樣式開源並撰文記之。

初始化模板

選擇官方模板“LessIsMore”作為本博客樣式的初始化模板，由於LessIsMore模板框架簡潔自然，可以更為靈活的對其進行自定義重載。該模版框架大致為簡單的兩欄布局，頂部為博客名稱與個性簽名，簽名下方是博客導航欄，主面板分為左右兩欄，左邊欄為導航索引欄，右邊欄為博文標題、摘要的內容區域，底部為博客頁腳。

通過CSS定制頁面風格

通過自定義CSS代碼便可定制專屬的頁面風格，在博客中“管理”-“設置”-“通過CSS定制頁面風格”的輸入框中，輸入自定義的CSS代碼，同時勾選下方“禁用模板默認CSS”選項，則博客即會啟用定制的頁面風格。

顧名思義，下方的三個輸入框：“博客側邊欄公告”、“頁首HTML代碼”、“頁腳HTML代碼”，即將相應的HTML代碼輸入各自框中，博客便可通過代碼對特定部分進行框架改造。

如果單薄的HTML/CSS設計代碼無法令你盡興，那么建議：書寫郵件一封向博客園管理員申請添加JavaScript代碼權限，便可酣暢淋漓的為自己的博客增添交互行為了。

本博客整體風格為藍白相間式，白色為底，藍色浮之上，顯得簡潔自然，交互時由藍色轉為橙色，醒目專注卻不突兀，在於提醒用戶的操作。本人也是甚喜簡單之風，故無奢華之范，簡約而不簡單。

 

博客頭部

將博客頭部定制為：凸顯博客名稱，弱化博客簽名。簽名可時刻改動，而博客名稱卻如品牌一般不輕易大刪大改，因此凸顯博客名稱既表明了博客名稱的重要性與穩固性，同時也希望讀者能夠對博客名稱印象深刻，從而提升博客知名度，至少混個臉熟！

通過javascript在博客頂部創建頭部框架：

<script type="text/javascript" >
/*博客頭部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/twobin/">twobin’<span id="blog">blog</span></a></h1><span id="subtitle">努力學習前端技術　|　其實技術也可以是通俗易懂的！</span></div>');
</script>

 利用CSS為博客頭部定制樣式：

.head{
    height: 60px;
    line-height:60px;
    padding-left:200px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    background: #fff;
}
.head h1{
    float:left;
    width:200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #1f7b9b;
    text-align: center;
}
.head h1:hover {
    float:left;
    width:200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #ff7227;
    text-align: center;
}
.head h1 a{
    color: #fff;
    outline:none;
    -moz-outline:none;
    text-decoration:none;
}
#blog{
    font-weight:normal;
    font-size:16px;
    color: #fff;
}
#subtitle{
    display:block;
    float:right;
    font-size:18px;
    color:#999;
    line-height:18px;
    margin:20px 200px 0 0;
}

 

博客導航欄

將博客導航條單獨成欄，一方面是凸顯導航欄的重要性，方便自身以及讀者操作，另一方面也是使得整個博客頁面更為飽滿，而不只是單獨的兩欄設計。

通過CSS為博客導航欄定制樣式：

#header {
    display: block;
}
/*導航欄*/
#navigator {
    font-size:16px;
    height:48px;
    background:#fff;
    text-align:center;
    margin-top:20px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b; 
}
#navList li {
    margin:0;
    line-height:48px;
    display:inline-block;
    float:left;
}
#navList li:hover {
    background:#1f7b9b;
}
#navList li a {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#1f7b9b;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
#navList li a:hover  {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#fff;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats {
    height:48px;
    color:#1f7b9b;
    line-height:48px;
}

 

博客左側邊欄

左側邊欄包含：公告、訪客記錄、相片、微博、個人簡要信息、日歷、隨筆分類、隨筆歸檔、關注前端博客、積分排名、最新評論、閱讀排行、評論排行、推薦排行。

其中較為重要的部分，訪客記錄：可以清晰的查看博客目前的訪問數、是了解博客熱度的一大利器；微博：掛載微博掛件，不僅充實博客的個人信息，而且在一定程度上可以提升微博的粉絲數與關注度；關注前端博客：可以使讀者了解博主的關注對象與關注內容，同時也便於自身查看所關注的博客。

通過CSS為博客左側邊欄定制樣式：

#main {
    margin: 30px 0 15px 0;
    padding: 0;
}
/*左邊欄*/
#sideBar {
    background: #fff;
    width: 205px;
    padding: 25px 15px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
#sideBarMain {  
    line-height:24px;
}
/*公告*/
#profile_block {
    margin-top:0px;
    line-height:24px;
    text-align:left;
}
.newsItem .catListTitle {
    display: none;
}
.mySearch .catListTitle{
    display: none;
}

 

博客右側內容欄

右側內容欄里一個頁面包含10篇文章，每篇文章主要包含：文章標題、文章摘要、右側小圖片、以及文章發布信息、閱讀評論數等。

一個頁面中所包含的文章數，如果小於10篇，則顯得頁面文章數過少，內容單調，且右側欄高度明顯小於左側欄，從而出現大部分留白，降低視覺效果；如果多於10篇，則會顯得單頁冗長，提高閱讀疲勞，因此單頁中設置為包含10篇文章為佳。

通過CSS為博客右側內容欄定制樣式：

/*主面板*/
#mainContent {
    margin-top:0px;
    padding: 25px 15px;
    background:#fff;
    float:right;
    width:920px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
/*每日文章列表*/
.day {
    background:#fff;
    padding:0;
    margin:0 0 20px 0;
}
/*博客標題*/
.postTitle a {
    color:#1f7b9b;
}
.postTitle a:hover {
    color: #ff7227;
    text-decoration: underline;
}
.postTitle {
    padding-bottom:10px;
    font-size:20px;
    font-weight:bold;
    color:#1f7b9b;
    background:url('http://images.cnblogs.com/cnblogs_com/twobin/520730/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left:30px;
}
.dayTitle {
    display:none;
}
/*摘要*/
.c_b_p_desc {
    padding:10px;
    line-height:24px;
    color:#888;
}
.c_b_p_desc a {
    color:#1f7b9b;
}
.c_b_p_desc a:hover {
    text-decoration:none;
    color:#ff7227;
    border-bottom-width:1px;
    border-bottom-style:dotted;
}
.c_b_p_desc_readmore {
    margin-left: 20px;
}
.desc_img {
    margin-left:10px;
    border:solid 1px #fff;
    box-shadow:0 0 10px #aaa;
}

 

博客底部

由於很少有讀者會去關心博客底部的內容，因此也不用在此部分大費周章，簡單設置個人博客版權信息或博客名稱即可。

通過CSS為博客底部定制樣式：

/*尾部*/
#footer {   
    height:24px;
    line-height: 24px;
    text-align:center;  
    color:#1f7b9b;
    font-size:16px;
}

 

博文內容頁

一篇完整且有着良好排版的博文可能會包含元素：文章標題、段落標題、正文、注意事項、圖片、代碼、鏈接、表格、插件等，需要為每個元素定制樣式，方可使得整篇博文在排版上令人賞心悅目，流連忘返。

其中，<h1>、<h2>、<h3>分別表示文章段落的一、二、三級標題，並以不同的背景顏色以及字體大小加以區分，注意事項通過黃色背景凸顯，以起到提醒讀者的作用，至於圖片、代碼、表格等樣式設計就不加以贅述了。

通過CSS為博客內容頁定制樣式：

.Abstract
{
    padding: 15px;
    border: dotted 2px #999;
    color: #999;
    font-family: 'Microsoft Yahei';
    border-radius: 4px;
}        
.First
{
    margin: 10px 0;
    font-family: 'Microsoft Yahei';
    text-align: left;
    padding: 6px 20px;
    color: #fff;
    background: #1f7b9b;
    font-size: 20px;
    border-radius: 4px;
    clear: both;
}                
.Second
{
    margin: 10px 0;
    font-family: 'Microsoft Yahei';
    padding: 6px 20px;
    background: #2ca8d3;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    clear: both;
}             
.Third
{
    margin: 10px 0;
    padding: 6px 20px;
    font-family: 'Microsoft Yahei';
    margin: 15px 0;
    font-size: 16px;
    color: fff;
    background: #32c0f1;
    color: #999;
    border-radius: 4px;
    clear: both;
}
.note
{
    margin: 10px 0;
    padding: 15px 40px 15px 40px;
    background: #FCFAA9;
    font-size: 15px;
    font-family: 'Microsoft Yahei';
    box-shadow: 0 0 8px #aaa;
    clear: both;
}
.demo
{
    text-align: left;
    padding: 6px 20px;
    overflow: auto;
    border-radius: 4px;
    background: orange;
    color: #fff;
    font-size: 16px;
    clear: both;
}        
.cnblogs_Highlighter
{
    border: solid 1px #ccc;
    clear: both;
}
.cnblogs_code
{
    background: #EFFFF4;
    border: solid 0px #939393;
    font-size: 14px;
    clear: both;
    padding: 10px 20px;
}
.cnblogs_code pre
{
    font-size: 14px;
}
.cnblogs_code span
{
    font-family: Courier New;
    font-size: 14px;
}

 

評論區域/綠色通道/推薦

綠色通道主要包含：好文要頂、關注我、收藏該文、與我聯系、分享至新浪微博、推薦一下，將讀者閱讀博文時的一些操作進行集成，提高讀者操作的便捷性。

評論區域進行重新定制，以塊狀面板進行呈現，使得評論一目了然，便於博主與讀者閱讀。

通過CSS為博客評論區域/綠色通道定制樣式：

/*評論按鈕*/
#btn_comment_submit {
    border:none;
    height:48px;
    width:120px;
}
.comment_btn {
    font-family:'Microsoft Yahei';
    border-radius: 3px 3px 3px 3px; 
    height:48px;
    width:120px;
    font-size:18px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#1f7b9b;
    color:#fff;
}
#btn_comment_submit:hover {
    background:#ff7227;
}
/*評論標題*/
.feedback_area_title {
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#1f7b9b;
    border-bottom:solid 6px #1f7b9b;
}
.feedbackListSubtitle {
    font-size:12px;
    color:#888;
}
.feedbackListSubtitle a {
    color:#888;
}
.comment_quote {
    background:#FCFAAC;
    padding:15px;
    border:1px solid #CCC;
}
#commentform_title {
    color:#1f7b9b;
    background-image:none;
    background-repeat:no-repeat;
    margin-bottom:10px;
    padding:10px 20px 10px 10px;
    font-size:24px;
    font-weight:bold;
    border-bottom:solid 6px #1f7b9b;
}
/*評論框*/
#comment_form {
    margin:10px 0;
    padding:0;
}
.commentform {
    margin:10px 0;
    padding:10px 20px;
    background:#fff;
}
/*評論輸入域*/
#tbCommentBody {
    font-family:'MIcrosoft Yahei';
    margin-top:10px;
    width:900px;
    max-width:900px;
    min-width:900px;
    background:white;
    color:#333;
    border:2px solid #fff;
    box-shadow:inset 0 0 8px #aaa;
    padding:10px;
    height:120px;
    font-size:14px;
    min-height:120px;
}
/*評論條目*/
.feedbackItem {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
    font-weight:normal;
}
/*頂一下*/
.diggnum {
    font-size:28px;
    color:#1f7b9b;
    font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
    line-height:100px;
}
.diggit {
    float:left;
    width:128px;
    height:128px;
    background:url('https://images0.cnblogs.com/blog/479892/201311/09133514-36eb19831f014a7ea6de13bc99e1d8ed.gif') no-repeat;
    background-position:0 0;
    text-align:center;
    cursor:pointer;
}
.diggit:hover {
    background-position:-128px 0;
}
/*隱藏踩一下*/
.buryit {
    display:none;
}
.diggword {
    display:none;
}
/*綠色通道*/
#green_channel {
    text:align:right;
    background:#1f7b9b;
    padding-left:20px;
    font-weight:normal;
    font-size:15px;
    width:880px;
    border:none;
    color:#fff;
    padding:20px;
    border-radius:4px;
}
/*最新評論*/
#myposts .PostList {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
    color:#6DA47D;
}
/*清除浮動*/
.clear {
    clear: both;
}
/*屏蔽廣告*/
.c_ad_block {
    display: none!important;
}

 

交互動作/插件

博客中利用JavaScript添加了一些交互動作和插件，用於提高博客的交互性，且有利於博主宣傳、管理本博客。

交互動作：回到頂部交互，便於讀者快速回至博客頂部，提高操作便捷性。

插件：新浪微博掛件、王子墨天氣插件、百度分享插件、gostats統計插件、JSFiddle插件。

其中，新浪微博掛件：可在一定程度上提升微博的粉絲數與關注度，同時也可通過微博宣傳博客，達到相互宣傳的作用；王子墨天氣插件：一款非常棒的基於jQuery的天氣插件，簡潔、美觀、動態，在此推薦下，算是為其打打小廣告；百度分享插件：可快速將博文分享至QQ空間、微博、人人、貼吧、豆瓣等知名社交空間，可以提升博文的流傳度與閱讀數；gostats統計插件：用於圖片數字實時統計博客的訪問數，且每周發送一封郵件描述本周博客詳細的統計信息，輕便、美觀，推薦之；JSFiddle插件：大力推薦！用過都說好！JSFiddle是一款在線前端編輯器，可以分屏同時編輯HTML/CSS/JS代碼，能夠實時同屏查看效果，最牛之處在於可通過URL鏈接分享至各個博文頁面，並在頁面中顯示運行效果與源碼，強大的難以名狀。

后續計划

博客風格樣式的設計並不會就此止步，無論設計多么精巧的樣式都會有審美疲勞的一天，計划平均3-4個月重構一次博客樣式，以保持博客樣式的新鮮活力。

計划：設計流式或響應式博客，以適應不同屏的閱讀習慣，特別是提高手機上閱讀博客的體驗。

花費大量篇幅贅述博客樣式重構其實並非本文的重點核心，唯一精髓爾：用心改善博客，提高閱讀質量！望各博主與讀者能夠親身實踐，善待自己的博客，罷了。