3步搞定博客園界面風格

最近開了博客園的博客, 在博客主題上糾結了好久, 每次寫博客預覽的代碼風格時, 都有一種想要修改博客樣式的沖動. 最近花了點時間在上面, 在這里分享給和我一樣的前端小白, 在文章末尾, 我會貼上我自己的博客的css代碼, 風格很朴素. 設置過程及其簡單, 雖然文章可能有點和設置過程相比較長, 我只是想盡量說的細點.

第一步 定制博客

博客園是允許自定義樣式的, 可以個性化自己的主頁，文章顯示效果也可以自己控制，通過瀏覽器的檢查來一步步調整博客的css. 博客設置的第一步入門來自這里, 很感謝 voidsky_很有趣兒給我指路, 說的很詳細, 在這里=>一步一步教你自定義博客園（cnblog）界面

這里唯一要說明如下, 僅對於前端小白, 大神莫笑~

如何快速找到特定頁面局域的對應的CSS代碼塊

1. 右鍵博客頁面, 點擊檢查, 點擊下圖左上角的紅色標注的箭頭之后, 選中想要調整的頁面的部分, 然后按照上述教程修改就好了, 這樣就能快速定位想要修改的區域了.



第二步 代碼風格設置

其實博客園的代碼風格還是挺簡潔的, 不過我有點受不了代碼的背景顏色, 總感覺把好好的代碼樣式給毀了, 下面是關於代碼風格設置的簡單的方法

1. 選擇代碼風格

在highlight.js demo找一個自己喜歡的代碼高度風格, 這里有很多風格, 想必你肯定可以找到你喜歡的一款, 下面截個vs風格的圖;



關於風格我推薦下, 喜歡白色主題的我覺得下面幾個挺不錯的, 僅供參考, 畢竟每個人的感覺都不一樣

1. xcode
2. idea
3. Docco
4. Atom one light
5. Atelier-Seaside

2. 下載喜歡的代碼風格

在highlight.js demo找到喜歡的風格之后, 對應風格的源碼在github highlight.js上, 這里的文件名和highlight.js demo上名稱是一一對應的, 比如說'vs'風格的截圖如下, 點進去,將代碼拷貝到word里(能有替換全部這個功能的文本編輯器都可以)



3. 修改代碼風格

打開剛才下載好的代碼風格, 使用替換全部功能, 將 .hljs 替換成 '.cnblogs-markdown .hljs', 我的編輯器替換如下



替換之后將文本拷貝到博客園的自定義css風格欄中, 點擊保存就可以了, 不過不要選中下面的禁用模板默認



4. 后續

可能設置之后感覺和在highlight.js demo看到的不一樣, 可能是代碼的字體, 背景顏色不一樣, 這時返回第一步所學會的技巧, 再一點點修改就好了, 我的代碼風格在我其他有代碼的文章中就可以看到, 感興趣的可以看看

第三步 添加目錄

我都是使用MarkDown來寫博客, 不過博客園的MarkDown不支持目錄功能, 我也是很好奇, 所以找度娘學知識了, 當時隨便找了就使用了原諒我沒法在這里引用你了

1.根據管理頁面的說明，如果是通過js修改公告欄的話，需要向博客園申請。沒有申請成功之前，會看到如下這么一條提示，申請成功后該提示自動消失。郵件正文簡單說一下博客的地址和請求開通就行。



2.申請之后貼上把下面的代碼貼進去就好了

code

<script>
    function CreatePostNavigator(){
        // 目錄標題的div
        var navigatorTitleDiv = '<div id="navigatorTitleDiv">隱藏目錄</div>';
    
        // 目錄所有內容的div
        var navigatorDivContent = '<div id="navigatorDiv">';
        
        if($("#cnblogs_post_body :header").length == 0){
            return;
        }
    
        $.each($("#cnblogs_post_body :header"), function(i, val){      
              // 查找所有的header（h1-h4），並生成header條目，並添加屬性class=“dt_h?”
              var headerTagName = $(val)[0].tagName.toLowerCase();
              var navigatorItem = '<dt class="dt_'+headerTagName+'"><a href="#_nav_' + i + '">' + $(val).text() + '</a></dt>';
              // 把header條目加入navigatorDiv
              navigatorDivContent += navigatorItem;
              
              // 給頁面上每個header元素之前添加一個跳轉標簽
              var headerLabel = '<a name="_nav_' + i + '" style="padding:0px"></a>';
              $(val).prepend(headerLabel);
          }); 
          
         navigatorDivContent += '</div>';
        
         $('#cnblogs_post_body').append(navigatorDivContent);
         $('#cnblogs_post_body').append(navigatorTitleDiv);
         
         // 給目錄標題div添加toggle事件
         $("#navigatorTitleDiv").click(function(){
                $("#navigatorDiv").toggle(200, function(){
                    var title = $("#navigatorTitleDiv").text() == "隱藏目錄"?"文章目錄":"隱藏目錄";
                    $("#navigatorTitleDiv").text(title);
                });
         });
         
         
         var headerList = ["h1", "h2", "h3", "h4"];
         var headerListLen = headerList.length;
         // 遍歷所有的header，然后給小一級的header設置縮進
         for(var i = 0; i < headerListLen; i++){
                if(i < (headerListLen-1) && $(".dt_"+headerList[i]).length > 0){
                    for(var j=headerListLen-1; j > i; j--)
                    $(".dt_"+headerList[j]).css({"margin-left": (i+1)*10+"px"});
                 }
         }
         
    }
    
    CreatePostNavigator();
</script>

然后在設置中 頁面定制CSS代碼中添加css樣式, 貼進去就好了

code

/* 目錄的隱藏目錄(顯示目錄)標簽設置*/
#navigatorTitleDiv
{
    padding: 5px;
    position: fixed;
    top: 0.1px; 
    right: 1%;
    font-weight: bold;
    cursor :pointer;
    background-color: #f8f8f8;
}
/* 目錄設置 */
#navigatorDiv {
    border-style: none;
    position: fixed;
    padding: 05px;
    padding-top: 50px;
    top: 0px;
    bottom: 0px;
    right: 0%;
    left: 83%;
    background-color: #f8f8f8;
    font-family: "Monaco" !important;
    font-size: 15px
}

css代碼

css 中一些特定區域的風格,我都有注釋說明, 就不在這里多說了
唯一要說明的是我的博客主題使用的是 'ThinkInside', 如果不是的話, 應該會沖突
不過下面的每個部分的風格都做了解釋, 只要對應這修改自己風格的就可以了, 所以最重要的技能還是第一步中介紹的.

一直使用MarkDown寫博客, 怎么實現代碼塊的折疊, 比如上面代碼塊太長, 太影響界面了,

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

body {   
    font-size: 15.5px;
}
.post {
    background-color: #ffffff;
    border-radius: 6px 6px 6px 6px;
    padding: 20px;
}

#cnblogs_post_body h1 {
    background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋體","黑體",Arial;
    font-size: 29px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}
#cnblogs_post_body h2 {
     background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋體","黑體",Arial;
    font-size: 25px;
    font-weight: bold;
    height: 25px;
    line-height: 22px;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}
#cnblogs_post_body h3 {
     background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋體","黑體",Arial;
    font-weight: bold;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}

#cnblogs_post_body  h4, h5{
   background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋體","黑體",Arial;
    font-weight: bold;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}

/*
整體頁面布局
*/
#home {  
    width: 100%;
}

/* 設置超鏈接的屬性*/
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #333;
    transition: all 0.4s linear 0s;
    text-decoration: blink;
    font-size: 25px;
}
.postBody a:link, .postBody a:visited, .postBody a:active {
    text-decoration: blink;
}
/* 博客園 首頁 新隨筆 所在區域設置*/
#navigator {
    font-size: 18px;
    font-family: "STXingkai" !important;
}

/* 目錄的隱藏目錄(顯示目錄)標簽設置*/
#navigatorTitleDiv
{
    padding: 5px;
    position: fixed;
    top: 70px;
    left: 2px;
    font-weight: bold;
    cursor :pointer;
    background-color: #fff;
}
/* 目錄設置 */
#navigatorDiv {
    border-style: none;
    position: fixed;
    padding: 05px;
    padding-top: 5.3%;
    top: 40px;
    bottom: 0px;
    right: 79%;
    left: 20px;
    background-color: #fff;
    font-family: "Monaco" !important;
    font-size: 15px
}

.postBody blockquote {
    padding: 1px 20px 1px 20px;
    min-height: 35px;
    line-height: 1.6em;
    color: #333;
    background-color: #aaaaaa;
}

/*
標題欄:博客名 NowGood 設置
!important 表示優先級高
*/
#blogTitle a {
    color: #075db3;
    font-family: "-webkit-pictograph" !important;
    font-size: 20px;
}


/*
正文: 設置博客文章的標題風格
*/ 

#topics .postTitle {
    /*font-weight: bold;*/
    float: left;
    line-height: 2;
    padding-left: 5px;
    font-size: 25px;
     font-family: "Monaco" !important;
}

/*
正文: 設置段落(普通文本)的字體顏色,字體大小, 字體風格 
*/
#cnblogs_post_body p {
    margin: 10px auto;
    text-indent: 0;
    margin-right: 13%;
    margin-top: 15px;
    margin-bottom: 15px;
}
.postBody p {
    line-height: 1.7;
    color: #000;
    font-size: 16px;
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif  !important;*/
   font-family: "Monaco" !important;
/*Monaco*/
}
.postBody p, .postCon p {
    margin: 2 auto 5em auto;
    line-height: 1.8;
}

#cnblogs_post_body h3,h4,h5,h6{
    margin-top: 70px;
    margin-bottom: 20px;
}
#cnblogs_post_body p code {
    font-family: "Monaco"!important;
    font-size: 16px !important;
    color: #000;
    background-color: #ccc !important;
}
/*.cnblogs-markdown  code {
    background-color: #eee!important;
    vertical-align: middle;
}
*/
.cnblogs-markdown .hljs {
    font-family:  Monaco!important;
    font-size: 14px!important;
    line-height: 1.5!important;
}

/* 設置圖片的大小*/
#cnblogs_post_body img {
    max-width: 600px;
    max-high: 400px;
}
.code_img_closed {
    vertical-align: middle;
    padding-right: 5px;
}

/*

github.com style (c) Vasily Polovnyov <[e-mail]>

*/

.cnblogs-markdown .hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

.cnblogs-markdown .hljs-comment,
.cnblogs-markdown .hljs-quote {
  color: #998;
  /*font-style: italic;*/
}

.cnblogs-markdown .hljs-keyword,
.cnblogs-markdown .hljs-selector-tag,
.cnblogs-markdown .hljs-subst {
  color: #333;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-number,
.cnblogs-markdown .hljs-literal,
.cnblogs-markdown .hljs-variable,
.cnblogs-markdown .hljs-template-variable,
.cnblogs-markdown .hljs-tag .cnblogs-markdown .hljs-attr {
  color: #008080;
}

.cnblogs-markdown .hljs-string,
.cnblogs-markdown .hljs-doctag {
  color: #d14;
}

.cnblogs-markdown .hljs-title,
.cnblogs-markdown .hljs-section,
.cnblogs-markdown .hljs-selector-id {
  color: #900;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-subst {
  font-weight: normal;
}
#blogTitle h2 {
    float: left;
    line-height: 1.5;
    margin-left: 10px;
    margin-right: 10px;
    padding: 8px 0;
    color: darkgray;
}
.cnblogs-markdown .hljs-type,
.cnblogs-markdown .hljs-class .cnblogs-markdown .hljs-title {
  color: #458;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-tag,
.cnblogs-markdown .hljs-name,
.cnblogs-markdown .hljs-attribute {
  color: #000080;
  font-weight: normal;
}

.cnblogs-markdown .hljs-regexp,
.cnblogs-markdown .hljs-link {
  color: #009926;
}

.cnblogs-markdown .hljs-symbol,
.cnblogs-markdown .hljs-bullet {
  color: #990073;
}

.cnblogs-markdown .hljs-built_in,
.cnblogs-markdown .hljs-builtin-name {
  color: #0086b3;
}

.cnblogs-markdown .hljs-meta {
  color: #999;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-deletion {
  background: #fdd;
}

.cnblogs-markdown .hljs-addition {
  background: #dfd;
}

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

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