目錄視圖 摘要視圖 訂閱
自定義博客園Markdown樣式.超簡單!
[-]
前言
實現方式
我的樣式表中那些選擇符是怎么來的
前言
寫筆記就喜歡用Markdown, 輕量, 直觀, 易保存. 但是博客園自帶的Markdown樣式, 實在慘不忍睹.
不說別的, 多行代碼樣式看起來, 實在別扭, 字體太小. 雖然不排斥其它等寬字體作為代碼字體, 但
是我個人已經習慣Consolas字體.
博客園官方最早的樣式設置教程, 我看了下基本能追溯到2008年, 而且常年沒跟新了, 在網上看了其
它大牛分享的樣式設置, 又感覺特別麻煩, 索性自己研究個簡單的分享給大家.
實現方式
在博客園上寫過博客的朋友都知道, 博客園前台基本就兩個界面: 首頁, 文章頁. 分別在這兩個頁面
上查看源代碼可以看到, 所有應用在文章中的CSS樣式表. 如下圖:
上圖第8行和第11行的樣式表, 是博客園自帶的樣式表, 我們不用管它. 而第9行樣式表是皮膚樣式表
也就是我們選擇的皮膚對應的樣式表, 第10行是關鍵, 我們圖中href地址也可以想到, 這正是
用戶自定義樣式所存放的位置.
大家可以在這里, 看到我自己定義的樣式表.
OK, 現在問題來了, 我們應該在哪寫該樣式呢. 很簡單管理->設置里就有. 如下圖所示:
我的樣式表中那些選擇符是怎么來的
很簡單, 用瀏覽器自帶開發者工具1個1個選中查看, 並不太多, 因為組成Markdown的基本語法本身就
不多, 為此我專門在博客園上寫了篇包含Markdown基本元素的博客, 供大家測試.博客鏈接是:
http://www.cnblogs.com/asheng2016/p/7462731.html
【分享】博客美化(2)自定義博客樣式細節
閱讀目錄
1.公共的頁面頭部
2.首頁內容主體
3.公共側邊欄
4.查看文章內容主體
5.資源
博客園美化相關文章目錄：博客園博客美化相關文章目錄
這一篇將根據我的博客目前使用的SimpleMemory模版和自己的理解來分析下，CSS文件的一些內容。如果不當，還請大家指正，因為我本身也不是很懂CSS，加上博客園這個CSS文件還挺大，內容挺多，搞錯了，還請大家理解。我自己都是改好后，上傳到博客，看效果，不滿意再改。
進入主題之前，先感謝博客園團隊，sevennight，marvin，博皮小組以及@Newlife群-長沙老豬，以及其他博客園關於樣式設計制作文章的作者，沒有一一列出，也記不清了。本文是在很多文章和現有博客模版的基礎上，自己磕磕碰碰，總結下來的。
本文原文地址：博客美化(2)自定義博客樣式細節
回到目錄
1.公共的頁面頭部
1.1 博客標題樣式
上面講到的其實只是一些常規的東西，希望對大家有幫助，但其實更核心的東西，還是如何定義博客園樣式及其細節。其實我這里說的自定義樣式，是針對你使用的模版來的，模版使用的css文件可以通過網頁的源碼找到鏈接，然后下載下來，針對性的修改。下面將通過本博客的模版對應的css文件對幾個重點位置的地方進行注釋和說明，其他可以下載我的資源里面的文件，自己研究。為了便於理解，直接對照代碼和注釋來看吧：
按 Ctrl+C 復制代碼
/home和頭部開始*********************/
home {
margin: 0 auto;
width: 72%;/*原始65*/
min-width: 980px;/*頁面的最低寬度,也就是頁面頂部的寬度*/
background-color: #fff;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
按 Ctrl+C 復制代碼
上面就是頭部的主要樣式，以前我用的博客模版，那個寬度非常寬，我不知道怎么修改，直到用這個模版，根據原作者的CSS文件和博客園官方團隊的提示，才知道要在width這個地方修改。我稍微增加了一點，65%看起來是稍微窄了點，當然大家可以根據自己的需要來。
我們在上一篇的后台設置中也提到了，可以設置博客園的主標題和次標題文字，而文字的格式就可以在下面的代碼中設置：
按 Ctrl+C 復制代碼
/博客標題/
blogTitle {
height: 60px; /*高度*/
clear: both;
}
/主標題格式/
#blogTitle h1 {
font-size: 26px;
font-weight: bold;
line-height: 1.8em;/原始 1.6em/
margin-top: 10px;/*原始 15px */
}
#blogTitle h1 a {
color: #515151;
}
/*超鏈接顏色*/
#blogTitle h1 a:hover {
color: #21759b;
}
/*次標題格式*/
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #757575;
float: left;
}
按 Ctrl+C 復制代碼
上面的代碼也很明顯，主標題和次標題是2個標題樣式，可以定義大小顏色，我都有一些改動，大家也可以對照現在頁面的頂部，字體稍微比原作者的要大了一些，大小了，感覺看起來難受。其實懂CSS，經常搞這個的人看定義也基本能看懂，我注釋是為了自己方便理解，畢竟不經常搞，萬一哪天要用，免得又去回憶和搜集。當然還可以添加logo圖片，大家可以看看完整的CSS文件以及我后面提供的Excel資料。
1.2 導航欄樣式
我在上一篇文章的2.4節頁腳Html代碼中，提到過導航欄設置的代碼，那一段代碼是Js來修改博客的欄目和鏈接，至於其他欄目我移到“公告”中去了，畢竟這個鏈接作用不大。下面這里就要講解導航欄的格式，如何在CSS中設置。
按 Ctrl+C 復制代碼
/頭部導航欄/
navigator {
font-size:15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 60px;/*導航欄高度，原始50*/
clear: both;
margin-top: 25px;
}
/導航欄設置,可以自定義導航欄的目錄/
navList {
min-height: 35px;
float: left;
}
#navList li { /每一個欄目節點/
float: left;
margin: 0 5px 0 0; /這里原來是0 40px 0 0 /
}
#navList a { /欄目文字的格式/
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 19px;
}
按 Ctrl+C 復制代碼
注意導航欄的欄目太多的話，欄目之間的間隔需要修改下，應該是li里面的margin，我修改為5了，所以看起來比較擠一點，沒辦法欄目有點多，而且我還把字體及高度都修改了下。至於超鏈接的顏色和效果之類的，我都沒有改動，也不貼代碼了。還有一個就是博客統計，就是導航欄右邊的那個信息，“隨筆-XX 文章-XX 評論-XX ” 的格式也可以設置。可以讓它的字體稍變小點，不要和導航欄的欄目字體一樣大：
按 Ctrl+C 復制代碼
/博客統計/
.blogStats {
float: right;
font-size:13px;
color: #757575;
margin-top: 19px;
margin-right: 2px;
text-align: right;
}
按 Ctrl+C 復制代碼
回到目錄
2.首頁內容主體
博客首頁的內容主體，主要就是博客首頁的文章列表，包括置頂文章以及按時間順序排列的文章【如果不希望文章顯示在首頁，可以在文章編輯和發表的頁面進行設置】，如下圖：
而文章列表的標題，內容簡介以及尾部的發表備注信息的格式都是可以設置的。有的博客好像是按日期進行列舉，所以有下面這個東西，不過這個模版好像沒什么用，也可以設置日期標題的格式。代碼如下，進行了注釋：
按 Ctrl+C 復制代碼
mainContent {
min-height: 200px;
padding: 0px 0px 10px 0;
padding-top: 10px;/*原始10*/
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
float: left;
margin-left: -22em;
width: 100%;
font-family:"微軟雅黑" , "宋體" , "黑體" ,Arial;/*比較鍾愛微軟雅黑*/
font-size: 14px;/*自己加的，不知道有沖突沒有？*/
}
.day { /每日文章列表/
min-height: 10px;
_height: 10px;
margin-bottom: 20px;
padding-bottom: 5px;
position: relative;
}
/日期標題，有的博客按照日期進行排列/
.dayTitle {
display: none;
border: 1px solid #21759b;
background: azure;
border-radius: 50%;
font-size: 14px;
height: 65px;
line-height: 1.5;
margin: 15px;
text-align: center;
width: 63px;
margin-left: -100px;
clear: both;
position: absolute;
top: -15px;
}
.dayTitle a { /日期標題的文字格式/
display: inline-block;
color: #21759b;
margin-top: 15px;
width: 60px;
}
按 Ctrl+C 復制代碼
而主要的還是發表的文章的標題以及內容的格式，看下面：
按 Ctrl+C 復制代碼
/發表文章的標題/
.postTitle {
border-left: 3px solid #21759b;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
/文章內容（簡介內容）/
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
/文章附加信息/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
font-size: 13px;
padding-right: 20px;/5px padding-left: 90px;posted 發表時間左邊距離/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
按 Ctrl+C 復制代碼
這里我主要是修改了一下字體，優先使用微軟雅黑，再就是對那個發表的時間，進行了移位，讓它靠近右邊一點。貌似沒什么效果，不知道是不是沒改對地方？文章摘要內容的格式也比較簡單，我沒有做什么修改。
回到目錄
3.公共側邊欄
公共側邊欄就是當前右邊這部分，包含的內容很多，也是按功能進行分塊，如公告欄，日歷，找找看搜索框，谷歌站內搜索等等。如下面是側邊欄的總體樣式，而對每個部分還可以單獨設置：
按 Ctrl+C 復制代碼
/側邊欄開始***************************/
sideBar {
margin-top: -15px;
width: 250px;/*側邊欄寬度*/
min-height: 200px;
padding: 0px 0 0px 5px;
float: right;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
#sideBar a {
color: #757575;
}
}
#sideBar a:hover {
color: #21759b;
text-decoration: underline;
}
按 Ctrl+C 復制代碼
側邊欄的其他部分我沒有過多的設置，都是采用模版原始的，由於組件太多，大家可能很不清楚，如果想要詳細了解。可以看看下面這張表 組件和class,id的對照表。這個是貌似是博客園官方測試頁面找到的，后面也提供一個下載。大家要對照相應的模塊和標簽，去修改樣式。
對於那些不需要的模塊，可以看前一篇的文章，關於后台的設置，為了簡單，我就把很多部件給隱藏了。
回到目錄
4.查看文章內容主體
單篇文章內容的主題也是另外一個比較重要的，和首頁的文章列表顯示稍微有些不同。文章內容主要分為 一級標題h1，二級標題h2，三級標題h3以及正文，圖片，表格等格式都是模版的格式，沒有變化。h1，h2的格式我是單獨采用以前的，也是從一個博客園網友分享的代碼里面抄過來的，有1，2年了，也找不到原出處，在此表示感謝。下面貼出h1，h2的格式，這個格式我是直接放在 后台設置的“ 頁面定制CSS代碼”框中的，本來想和現在的模版CSS文件合並，但技術太菜，合並之后總會有問題，所以也沒有去折騰。應該是會把模版的覆蓋掉。
按 Ctrl+C 復制代碼
按 Ctrl+C 復制代碼
這個樣式還是非常顯眼和漂亮的，大家可以用一下，設置合理的標題可以讓文章思路更加清晰，還可以為后面的生成文章目錄做准備。目錄就是提取這些h1,h2組合而成的。
回到目錄
5.資源
其他的如評論框，評論按鈕，標簽的設置也都可以在CSS文件中設置。在這里提供我博客的CSS文件以及博客園模版設計的一個Excel文件給大家，希望能用得上。
本博客的CSS文件：bundle-SimpleMemory-A5.css
博客園模版設計Excel文檔：博客皮膚開發文檔.zip
閱讀目錄
1.博客園后台設置
2.自定義樣式的設置
博客園美化相關文章目錄：博客園博客美化相關文章目錄
一直都拜膜那些博客園的皮膚設計高手，由於本人對前端研究甚少，所以js,css這種東西只能看得懂最基本的，會簡單改改。然后一直對自己的博客皮膚不滿意，也找不到好的文章例子來對應修改。博客園雖然有一些文章，但不全面，沒辦法，只能自己慢慢鑽研。上周，博客園官方團隊又發布了一款新的皮膚：SimpleMemory ，作者是sevennight。這款皮膚個人感覺非常高大上，而且一掃本人心中的疑惑，以前很多不能實現或者想要實現的，都滿足了，所以果斷將自己的博客模版切換到了SimpleMemory模版(也就是你當前看到的博客頁面)，但同時也碰到了很多問題，所以一起記錄下載，並搜集了相關資料，一起分享給大家，同時也是自己折騰的一個總結，以后忘記了也可以翻出來學習學習。接下來將循序漸進，介紹博客園后台設置與樣式設置的相關內容。
進入主題之前，先感謝博客園團隊，sevennight，marvin，博皮小組以及@Newlife群-長沙老豬，以及其他博客園關於樣式設計制作文章的作者，沒有一一列出，也記不清了。本文是在很多文章和現有博客模版的基礎上，自己磕磕碰碰，總結下來的。
本文原文地址：博客美化(1)基本后台設置與樣式設置
回到目錄
1.博客園后台設置
在設置樣式之前，其實還是了解一下博客園后台的相關設置比較好，畢竟后台設置里面提供了很多功能，可以解決問題。本人之前使用的是SimpleBlue模版，所以當初不會自定義css，也只能從后台設置找一些辦法了。
1.1博客標題與子標題
博客標題文字的設置在 “博客后台管理”->“設置”中，如下圖，本文的設置：
效果就是本博客頂部的效果，而至於標題的格式如大小，顏色可以在自定義的css中修改，將在后面介紹。
1.2控制博客控件顯示
博客園的博客是按照功能分為很多個部件（子控件）的，例如 公告欄，日歷，收藏夾，隨筆分類，閱讀排行榜等等，具體你可以看看本文當前頁面右側的部件，很豐富這些控件非常多，根據個人需要，可以自定義進行顯示或者不顯示。同時訂閱博客的條數，以及博客首頁顯示的博客數目等等都可以進行設置。這樣就可以顯示重點內容，重點文章給讀者。具體設置頁面在： “博客后台管理”->“選項”頁面中，如下圖所示：
看看上圖的一些功能，很直觀，如可以選擇默認的編輯器，可以設置列表的數量，一起其他一些附加設置，如評論等等還是比較有用。特別是首頁，經過合理的設置，首頁就可以簡單一些，而不是一眼看來，多，雜，亂。下面也是這個頁面的設置，可以對部件的顯示進行設置：
如上圖所示，本博客就將一些部件去掉了，如收藏夾，相冊等等。這樣空間就多了，也讓人感覺好一點。
特別要提示的是，每個博客的默認頁面上的 “導航欄”，並且基本都會有“首頁”，“訂閱”，“聯系”等欄目。這幾個欄目是可以在這里通過設置而不顯示的，只有一個欄目比較特殊 ：“管理”，無法直接設置取消，需要自定義css，或者js來移除。這里也是郵件咨詢了“博客園團隊”，順便贊一個，博客園團隊的回復速度很快，也很耐心。這個移除方法我在后面的樣式設置里面介紹。
回到目錄
2.自定義樣式的設置
注意，自定義樣式要用到css和js文件，需要有js權限，如果沒有js權限，需要自己發郵件向管理員申請開通，郵箱：contact@cnblogs.com。介紹自定義樣式的細節，按照博客園后台設置提供的“設置”細節先后順序來。
2.1 頁面定制CSS代碼
頁面定制就是用來修改當前頁面的，當然可以基於當前頁面，你也可以完全的自己編寫。如下圖我的博客后台“頁面定制CSS代碼”的界面：
上面的CSS代碼主要是設置正文的 標題的樣式的，也就是你現在看到的 h1,h2標題的格式。注意如果你點擊了“禁用模版默認CSS”的話，那就要求你自己編寫或者借鑒其他人編寫一個符合博客園規范的CSS文件，否則會亂碼。當然也支持通過文件的方式添加。你可以把你的CSS文件上傳到“文件”中，這樣可以直接通過上傳文件的地址來引用對應的CSS文件。這樣更方便。如我的后台就就很多這樣的CSS和js文件：
這里就是設置CSS樣式的主要地方，當然具體的設置方法還是沒有講到，參考下一篇的內容。
2.2 公告欄設置
公告欄如本博客右上方所示，可以在后台的“設置”中的“博客側邊欄公告（支持HTML代碼）”進行設置，公告欄的格式可以在CSS進行，這里只需要輸入文字和簡單的鏈接就夠了，例如，本文就將 “管理”，“訂閱”等菜單欄目移到了 “公告欄”，同時增加了博客統計的代碼(統計代碼需要自己去http://histats.com/網站申請帳號，自己獲取自己博客的代碼)：
至於內容的顯示和統計按鈕的情況，大家可以對照當前頁面右上角的公告欄目。特別是 聯系，訂閱 和管理 3個欄目，其實就是3個鏈接而已。
2.3 頁首Html代碼
這里可以自定義一些頁首的Html代碼，例如引入外部功能的js,Css文件等。也可以添加一些自定義的JS代碼，當然要對JS比較精通啊，像我就不懂JS，為了刪除個元素還是請人遠程解決的。呵呵，不過沒關系，人生在於折騰，折騰來折騰去，也折騰得差不多了。我的頁首主要是加載了一個外部分享的js和自定義的CSS文件，在模版CSS的基礎上對格式進行了簡單的修改。更加符合我的品味吧，不過大家有啥意見，也可以提出來。如下圖所示：
其中bootstrap.min.js和marvin.nav.my1502.css是一個自動生成目錄的css文件，要感謝博客園@marvin，當初調試這個生成目錄的功能也花了1天時間，在修改為現在的模版后，出現了一點問題，還沒來得及去修改，暫時搞不清楚到底問題在哪里。
2.4 頁腳Html代碼
由於很多外部功能需要等待在頁面最后才能引入或者才能運行，所以部分的js和css文件需要在這里引入。例如上面提到的，我把“管理”欄目去掉了，就是通過在頁腳添加js代碼刪掉的(博客園團隊給的方法是設置#MyLinks1_Admin{display: none;})。然后手動通過js添加了幾個本博客的自定義欄目，相當於一個目錄，就是頁面頂部大家看到的：
用的代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
當然還可以生成目錄等其他功能，也可以在這里添加對應的代碼或者文件，來完成你要的功能。由於自定義樣式的內容比較多，特意放到了下一篇文章，將於近期發布。請關注或收藏本博客。下一篇文章網址：【分享】博客美化(2)自定義博客樣式細節 ，3.20-3.21發布，敬請關注。