（轉載）3步搞定博客園界面風格

時間  2019-12-09
標籤 轉載 搞定 博客 界面 風格 简体版
原文   原文鏈接

目錄css

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

第一步 定製博客

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

這裏惟一要說明以下, 僅對於前端小白, 大神莫笑~git

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

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

屏幕快照 2017-07-08 上午11.16.48web

 
 

第二步 代碼風格設置

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

1. 選擇代碼風格

在highlight.js demo找一個本身喜歡的代碼高度風格, 這裏有不少風格, 想必你確定能夠找到你喜歡的一款, 下面截個vs風格的圖;瀏覽器

屏幕快照 2017-07-08 上午10.10.25markdown

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

  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裏(能有替換所有這個功能的文本編輯器均可以)

屏幕快照 2017-07-08 上午10.22.09

3. 修改代碼風格

打開剛纔下載好的代碼風格, 使用替換所有功能, 將 .hljs 替換成 '.cnblogs-markdown .hljs', 個人編輯器替換以下

屏幕快照 2017-07-08 上午10.29.10

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

屏幕快照 2017-07-08 上午10.31.46

4. 後續

可能設置以後感受和在highlight.js demo看到的不同, 多是代碼的字體, 背景顏色不同, 這時返回第一步所學會的技巧, 再一點點修改就行了, 個人代碼風格在我其餘有代碼的文章中就能夠看到, 感興趣的能夠看看

 
 

第三步 添加目錄

我都是使用MarkDown來寫博客, 不過博客園的MarkDown不支持``功能, 我也是很好奇, 因此找度娘學知識了, 當時隨便找了就使用了原諒我無法在這裏引用你了

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



2.申請以後貼上把下面的代碼貼進去就行了

<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樣式, 貼進去就行了

/* 目錄的隱藏目錄(顯示目錄)標籤設置*/
#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寫博客, 如今尚未找到怎麼實現代碼塊的摺疊的方法, 好比上面代碼塊太長, 太影響界面了,
若是有人知道, 還望指導一下, 先謝謝了:)

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 <vast@whiteants.net>

*/

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

 

---------------------做者：nowgood來源：博客園原文：https://www.cnblogs.com/nowgood/p/3bokejiemain.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程