部落格園提供了個性化的修改方式,可以通過簡單的配置,使用HTML/CSS/JavaScript實作友好的閱讀體驗。
利用兩天時間,參考前人經驗實作了基本的個性化配置。在此做一個記錄。
更新:最新的樣式參考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;
}
說明
- 可以通過浏覽器自帶的調試工具(F12),檢視想要調整的元素的具體樣式,擷取到css的id或者class,再在“頁面定制CSS代碼”中添加想要修改的樣式
- 如果修改的樣式不生效,可以先通過調試工具檢視,目前元素應用的CSS樣式在哪個配置檔案中,再根據情況修改,可以通過在樣式後面添加"!important"提高自己添加的樣式的優先級
- 如果想知道看到的部落格園用了什麼模闆可以通過源碼中的css樣式表的名稱确定,skins/xxx,xxx就是模闆名
- 超連結的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&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>
- 該子產品需要申請(支援JS代碼)權限,一般一天左右可以通過稽核
- 可以将網站的說明等資訊都寫在此處
頁首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="https://files.cnblogs.com/files/miangao/maodian.css">
<!--<script src="https://files.cnblogs.com/files/miangao/maodian.js"></script>-->
<script src="https://files.cnblogs.com/files/z00377750/maodian.js"></script>
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
<!--引入js庫,用于實作文章自動生成目錄索引end-->
- 部落格園自帶的“選項”可以進行一些基本的個性化配置,但是有時候不是完全生效。如導航欄的“管理”項,這時,可以先通過浏覽器調式工具找到對應标簽的id,通過js腳本的remove動作予以去除。
- 該生成文章目錄的插件有一點瑕疵,在個人首頁上,往下拖動時也會出現一個空白的索引,影響美觀,對此,我對原實作進行了一點改造。通過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—修改字型、字号與顔色
參考清單:
>為自己的部落格園添加目錄錨點和傳回頂部
>部落格園部落格美化相關文章目錄
>如何自定義部落格園代碼高亮主題,同時分享自己使用的黑色主題
>部落格園自定義樣式
本部落格用于技術學習,所有資源都來源于網絡,部分是轉發,部分是個人總結。歡迎共同學習和轉載,轉載請在醒目位置标明原文。如有侵權,請留言告知,及時撤除。