博客園個性化配置

更新：最新的樣式參考silence簡潔主題設置博客園自定義樣式

博客園-->設置

通過“設置”可以使用JavaScript、CSS、HTML對博客進行個性化設置。主要包括“頁面定制CSS代碼”、“博客側邊欄公告”、“頁首Html代碼”和“頁腳Html代碼”。

頁面定制CSS代碼

主要配置都是在這里執行。先選取一個基礎模板，我選擇的是SimpleMemory。
下面是我的個性化頁面定制CSS代碼：

/*
定義整體樣式
*/
body {
    font-family:Monaco,Consolas,Microsoft Yahei,Verdana,Arial,Helvetica,sans-serif!important;
}

/*
 代碼高亮開始，使用了一個叫Monokai Sublime的黑色主題皮膚，直接拿過來還不行，有一些樣式沖突，還要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre {
/*控制代碼不換行*/
    white-space: pre;
    word-wrap: normal;
}
.cnblogs-markdown .hljs {
    font-family:Monaco,Consolas,Microsoft Yahei,Verdana,Arial,Helvetica,sans-serif!important;
    font-size: 14px !important;
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f !important;
    color: #FFF;
    white-space: pre;
    word-break: normal;
    max-height: 768px;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}

/*黑色主題皮膚結束*/


/*文章樣式*/

#cnblogs_post_body
{
    color: black;      
    font-size: 16px;
}
#cnblogs_post_body h1    {
    background: #333366;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2    {
    background: #006699;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3    {
    background: #726E74;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 17px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4{
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

/*博客導航欄 */
#navList {
    float:left;
    
    color:#0090D1;
}

#navList a{
    font-weight:normal!important; /*導航不加粗，用正常字體*/
    color:#990000!important;
}
#navList li {
    border: none;
    font-size: 18px;
    margin:0 0!important;
}

.blogStats {
   margin-right:12px!important;
} /*統計信息*/

/*首頁博客標題*/
.postTitle {
      font-size: 22px!important;
      border-left: 3px solid #21759b;
      font-weight:normal!important;
      margin-bottom: 10px;
      float: right;
      width: 100%;
      clear: both;
}

#home{
	width:75%;
	margin-top:20px;
	padding:10px;
	box-shadow:none;
}



/***************head*****************/
#blogTitle{
    overflow: hidden;
    height: auto;
}
#blogTitle h1{
	margin-left: 0;
	font-size:35px;
}
#blogTitle h1 a{
	color:black;
}
#blogTitle h1 a:hover{
	animation:myfirst1 1s;
	color:#0090D1;
}
#blogTitle h2{
	margin-top:7px;
}
#navList a{
        width:4em;
}

/

/*發表文章的標題*/

#topics .postTitle{  /*進入文章時，標題左側框不要顯示，會覆蓋.postTile的border配置*/
	border:none;

}

    .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;
}

#mainContent .forFlow{
    margin-left:22em!important;
    margin-right: 6px;
}
/*文章附加信息*/
.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;
}

.day{
padding-left: 20px!important;
}

.postDesc{
padding-left: 0px!important;
}

/*文章超鏈接樣式*/
.postBody a:link, .postBody a:visited, .postBody a:active {
        text-decoration: none!important;
        color: #007acc;
    }

 .postBody a:visited, .postBody a:active {
       
        color: #ff0066;
    }

.postBody a:hover {
       
        color: #005b99;
    }


/**首頁列表**/

#mainContent div.day{
	padding-bottom:25px;
	border-bottom:1px solid #ededed;
	box-shadow: 5px 5px 3px #CBCFD2;
}

/*隨筆列表樣式*/
.entrylistPosttitle {
      font-size: 22px!important;
      border-left: 3px solid #21759b;
      font-weight:normal!important;
      margin-bottom: 10px;
	  padding-left:0px;
      float: right;
      width: 100%;
      clear: both;
}

.entrylistItem .entrylistPosttitle a{
	padding-left:10px;
}

.entrylistPostSummary {
float: right;
    line-height: 1.5em;
    width: 99%;
    clear: both;
    padding: 10px 0;
  padding-right:6px;
}

.entrylistItemPostDesc{
    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;
	padding-left: 0px!important;
}

.entrylistItem{
padding-left: 20px!important;
}
/*分類描述*/
.entrylistDescription{
	  font-size: 18px!important;
      font-weight:normal!important;
      margin-bottom: 20px;
      float: right;
      width: 100%;
      clear: both;
}

#nav_next_page a{
	margin-top:20px;
	border-radius:7px;
	padding:9px 20px 9px 20px;
}
#nav_next_page a:hover{	
	animation:mytwo 1.5s;
	color:white;
	background-color:#0090d3
}

@keyframes myfirst1
{
from {color:black;}
to {color:#0090d3;}
}
@keyframes myfirst
{
from {color:black;}
to {color:#0090d3;}
}

@keyframes mytwo
{
from {background:#aaaaaa;}
to {background:#0090d3;}
}
@keyframes imgfirst{
	from{
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;}
	to{
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    
    filter: grayscale(0%);
	
    filter: none;
	}
}

/*文字中的代碼樣式*/
.cnblogs-markdown code, .cnblogs-post-body code{
    font-family:Monaco,Consolas,Microsoft Yahei,Verdana,Arial,Helvetica,sans-serif!important;
    font-size: 14px!important;
    border: 0!important;
    background-color: #D6DBDF!important;
    border-radius: 4px!important;
    color: #2C3E50;
}

/*引用的樣式*/

.postBody blockquote{
    padding: 10px 15px;
    border:none;
    border-left-style: solid;
    border-left-width: 10px;
    margin: 0 0 20px;
    border-color: #D6DBDF;
    background: none repeat scroll 0 0 rgba(102,128,153,.05);
}

/*標簽樣式*/
#myposts .PostList {
    margin-right: 20px;
    margin-top: 0px;
    
    padding-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    box-shadow: 5px 2px 2px #D0D1D2; /*列表陰影效果*/
}

.postTitl2{
     font-size: 22px;
    border-left: 3px solid #21759b;
    padding-top: 0px; */
    padding-bottom: 0px; 
}
.postDesc2{
 float:none;
}

#myposts .myposts_title{
    margin-bottom: 5px;
    font-size: 22px;
    border-bottom: 2px solid #e6e6e6;
    font-weight: normal;
    text-align: left;
}

.postTitl2 a{
    padding-left:10px;
}

.PostList a:link, .PostList a:visited, .PostList a:active {
        color: #21759b;
        transition: all 0.4s linear 0s;
    }

.PostList a:hover {
        margin-left: 30px;
        color: #0f3647;
        text-decoration: none;
    }

.even{
background-color:#D6DBDF;
}

說明

1. 可以通過瀏覽器自帶的調試工具（F12），查看想要調整的元素的具體樣式，獲取到css的id或者class，再在“頁面定制CSS代碼”中添加想要修改的樣式
2. 如果修改的樣式不生效，可以先通過調試工具查看，當前元素應用的CSS樣式在哪個配置文件中，再根據情況修改，可以通過在樣式后面添加"!important"提高自己添加的樣式的優先級
3. 如果想知道看到的博客園用了什么模板可以通過源碼中的css樣式表的名稱確定，skins/xxx，xxx就是模板名
4. 超鏈接的hover樣式在有的調試工具中無法直接查看，需要注意，如果修改了a:hover沒有生效，要注意檢查樣式文件中hover樣式的優先級

博客側邊欄公告

在該部分可以編輯側邊欄。
此處可以使用統計工具網站（需要注冊），直接將生成的代碼復制到此處。

<!--<div align="left">訪問次數：<a href="http://www.amazingcounters.com/"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3223265&amp;c=9670108" alt="AmazingCounters.com"></a></div>-->
<!--<div  align="left"><a href="https://i.cnblogs.com/Configure.aspx">博客管理</a></div>-->

也可以添加一些超鏈接，如“管理頁面”

<div  align="left"><a href="https://i.cnblogs.com/Configure.aspx">博客管理</a></div>

說明

1. 該模塊需要申請（支持JS代碼）權限，一般一天左右可以通過審核
2. 可以將網站的說明等信息都寫在此處

頁首Html代碼

在該模塊，添加了文章目錄自動生成的腳本，以及通過JS自定義了導航欄。

<script>
/*通過選項，去除控件失效，直接根據id移除*/
$(function(){
/*$("a").remove("#blog_nav_admin");  *//*刪除管理欄目*/
/*$("div").remove("#sidebar_links1226849");  *//*刪除側邊欄鏈接*/
/*$("div").remove("#sidebar_postarchive");  刪除隨筆檔案*/

/*$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/z00377750/">首頁</a></li>');*/
//添加導航，直接復制上面一行，修改鏈接和文字

//添加“清單”導航
$("#navList").append('<li><a id="qingdan" class="menu" rel="nofollow" href="https://www.cnblogs.com/z00377750/p/9172947.html">清單</a></li>');
});
</script>

<!--引入js庫，用於實現文章自動生成目錄索引begin-->
<link  type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/miangao/maodian.css">
<!--<script src="http://files.cnblogs.com/files/miangao/maodian.js"></script>-->
<script src="https://files.cnblogs.com/files/z00377750/maodian.js"></script>

<script src="http://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>

<!--引入js庫，用於實現文章自動生成目錄索引end-->

說明

1. 博客園自帶的“選項”可以進行一些基本的個性化配置，但是有時候不是完全生效。如導航欄的“管理”項，這時，可以先通過瀏覽器調式工具找到對應標簽的id，通過js腳本的remove動作予以去除。
2. 該生成文章目錄的插件有一點瑕疵，在個人首頁上，往下拖動時也會出現一個空白的索引，影響美觀，對此，我對原實現進行了一點改造。通過css樣式day類在首頁才有、'PostList'類在標簽頁才有、'entrylist'類在隨筆分類才有這一點，區分是否是文章詳情頁。增加判斷

if(t > k&&(!$("div").hasClass('day'))&&(!$("div").hasClass('PostList'))&&(!$("div").hasClass('entrylist')))

如果是首頁、標簽首頁、隨筆分類首頁，則不生成索引。核心修改點如下:

//該方法用於控制當頁面滾動到一定距離時，展示索引
a.on('scroll', function() {
		var t = a.scrollTop();
		if(t > k&&(!$("div").hasClass('day'))&&(!$("div").hasClass('PostList'))&&(!$("div").hasClass('entrylist'))){
			$sideToolbar.css('display', 'block');
			$('#gotop').show()
		} else {
			$sideToolbar.css('display', 'none')
			$('#gotop').hide()
		}
	})

完整代碼

博客園-->選項

選項中提供了基本的個性化配置

博客園-->寫作

先通過博客園-->選項，設置編輯器為MarkDown。
使用MarkDown編輯器編輯文章，編寫完成后，粘貼到博客園編輯器中。
Md2All 在線排版還可以將MarkDown轉換成html代碼，可以通過博客園的TinyMCE粘貼html源碼。
要注意，如果文章中有html元素，有可能會影響到文章的樣式排版，如在文章中有 標簽。
MarkDown標簽與內容之間不要有空格，否則會無效。

在線MarkDown編輯器:
>Md2All 在線排版
>Cmd Markdown 編輯閱讀器 - 作業部落出品

MarDown樣式改變：正常情況下MarkDown語法不支持字體設置和顏色改變，但是可以通過內聯HTML樣式實現字體樣式
>HTML CSS
>MarkDown—修改字體、字號與顏色

參考列表：
>為自己的博客園添加目錄錨點和返回頂部
>博客園博客美化相關文章目錄
>如何自定義博客園代碼高亮主題，同時分享自己使用的黑色主題
>博客園自定義樣式