博客園自定義界面樣式（側邊欄、進度條、回到頂部、目錄）

最近這一段時間對我的博客園樣式做了一些調整。總體樣式改變了不少。在這里就分享下我的過程。

一、博客園后台管理

1、申請 JS 權限

這是第一步，如果需要定制的樣式就需要先申請 JS 權限。

登錄博客園后，管理=》設置，這這個面板里面有申請的按鈕。

申請后等待審核，審核通過后就可以設置了。

2、側邊欄基本設置

這一部分主要是對側邊欄選項卡、數據條數等的顯示控制。

在：管理=》選項，這個面板中設置（這里根據自己喜好設置）

3、設置板塊功能分析

設置面板有幾個地方可以寫代碼分別介紹下。

1）、頁面定制 CSS 代碼

這里可以對頁面中的任何地方的樣式進行設置，在設置前首相需要對頁面的結構了解清楚

2）、博客側邊欄公告

這部分主要是針對側邊欄的公告設置的

3）、頁首 HTML 代碼

這里輸入的代碼會插入在頁首，在 id 為 “page_begin_html” 的容器內

4）、頁腳 HTML 代碼

這里輸入的代碼會插入在頁尾，在 id 為 “page_end_html” 的容器內

二、側邊欄樣式調整

我對側邊欄做的調整有兩處地方。

1、公告欄添加頭像

在：選項=》博客側邊欄公告，這里對公告內容樣式調整

<div align="center" style="postion">
  <a href="https://www.cnblogs.com/zhurong/">
    <img style="position: absolute;right: 20px;top: 14px;width: 100px;height: 100px;border-radius: 50%;"
      src="//pic.cnblogs.com/avatar/592961/20180802101346.png">
  </a>
</div>

這個調整是在公告欄里面加入自己的頭像，並可以點擊到博客地址。

效果：

2、隨筆分類換行

我隨筆分類名字都比較短，就想把這些兩個兩個一行，同時也對整個頁面中內容布局大小做了調整。

主要是在：選項=》 “頁面定制 CSS 代碼” 中輸入以下代碼：

/*內容、右側菜單樣式*/
#main {
  width: 1300px;
}

#mainContent {
  width: 940px;
}

#sideBar {
  width: 340px;
}

#blog-news {
  position: relative;
}

#sidebar_postcategory ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#sidebar_postcategory li {
  width: 139px;
}

#under_post_news,
#under_post_kb {
  border: 0;
  padding: 0;
}

效果：

三、回到頂部、進度條

1、回到頂部

這一部分代碼主要是放在了：選項=》“頁首 HTML 代碼” 這里面，

具體代碼：

<!-- 回到頂部 -->
<style>
  #back-top {
    position: fixed;
    bottom: 5rem;
    right: 5rem;
    z-index: 10;
  }

  #back-top span {
    width: 50px;
    height: 64px;
    display: block;
    background: url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
  }

  #back-top a {
    outline: none
  }
</style>
<script type="text/javascript">
  $(function () {
    // 默認是隱藏“回到頂部”按鈕
    $("#back-top").hide();
    // 滾動距離頂部 500 像素時 淡入、淡出
    $(window).scroll(function () {
      if ($(this).scrollTop() > 500) {
        $('#back-top').fadeIn();
      } else {
        $('#back-top').fadeOut();
      }
    });
    // 回到頂部，點擊事件
    $('#back-top a').click(function () {
      $('body,html').animate({
        scrollTop: 0
      }, 800);
      return false;
    });
  });
</script>
<p id="back-top" style="display:none" title="回到頁面頂部"><a href="#top"><span></span></a></p>

這個樣式是當距離頂部一定距離才顯示這個按鈕。

2、進度條

進度條我是放在了頁面底部，所以代碼放在了：選項=》“頁腳 HTML 代碼”，主要代碼是：

<!-- 進度條 -->
<style>
  progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 0.5rem;
    border: 1px solid #999;
    border-radius: 1rem;
    z-index: 5;
    -webkit-apperance: none;
  }

  ::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 1rem;
  }

  ::-webkit-progress-value {
    background-color: #169fe6ad;
    border-radius: 1rem;
  }
</style>
<script>
  // 生成元素並添加到文檔尾部
  var progress = document.createElement('progress');
  progress.id = 'progress';
  document.body.appendChild(progress);

  // 計算當前頁面的高度並賦值給進度條
  var H;
  window.onload = function () {
    progress.max = H = home.scrollHeight;
    progress.value = 0;
  }

  // 監聽滾動，實時計算滾動條進度值
  window.onscroll = function () {
    var h = document.documentElement.scrollTop || document.body.scrollTop;
    progress.value = h;
    var radio = (h / H >= 1) ? 1 : h / H;
    progress.innerHTML = progress.title = Math.floor(100 * radio) + '%';
  }
</script>

進度條的位置、樣式可以根據自己喜好進行設置。

四、目錄

想使自己寫的文章能夠自動生成統一的目錄樣式、功能，需要設置兩個地方：

1、后台管理自動生成目錄

這里是把文章中的 h 標簽提前處理，生成標簽。

功能：

• 最多可生成3級標題
• 文章中的標題必須是 h1、h2、h3 這三個的組合

（這里是根據當前代碼設定的，可以根據實際情況修改代碼，以達到其他效果）

具體的代碼：

<!-- 目錄索引列表生成 -->
<script>
  function GenerateContentList() {
    if ($('#cnblogs_post_body').length == 0) {
      return;
    }
    // 先取出三級標題標簽
    var jquery_h1_list = $('#cnblogs_post_body h1');
    var jquery_h2_list = $('#cnblogs_post_body h2');
    var jquery_h3_list = $('#cnblogs_post_body h3');

    var content = '<div id="navCategory">';
    content += '<p style="font-size:18px"><b>目錄</b></p>';
    content += '<ul id="left_menu" class="first_class_ul">';

    // 一級標題開始
    if (jquery_h1_list.length > 0) {
      for (var i = 0; i < jquery_h1_list.length; i++) {
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
        var nextH1Index = i + 1;
        if (nextH1Index == jquery_h1_list.length) {
          nextH1Index = 0;
        }
        var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
        if (jquery_h2_list.length > 0) {
          li_content += '<ul class="second_class_ul">';
        }
        for (var j = 0; j < jquery_h2_list.length; j++) {
          li_content += '<li><a href="#_label2_' + i + '_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
          var nextH2Index = j + 1;
          var next;
          if (nextH2Index == jquery_h2_list.length) {
            if (i + 1 == jquery_h1_list.length) {
              next = jquery_h1_list[0];
            } else {
              next = jquery_h1_list[i + 1];
            }
          } else {
            next = jquery_h2_list[nextH2Index];
          }
          var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
          if (jquery_h3_list.length > 0) {
            li_content += '<ul class="third_class_ul">';
          }
          for (var k = 0; k < jquery_h3_list.length; k++) {
            li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() +
              '</a></li>';
          }
          if (jquery_h3_list.length > 0) {
            li_content += '</ul>';
          }
          li_content += '</li>';
        }
        if (jquery_h2_list.length > 0) {
          li_content += '</ul>';
        }
        li_content += '</li>';
        content += li_content;
      }
      content += '</ul>';
      content += '</div>';
    } else if (jquery_h2_list.length > 0) {
      for (var i = 0; i < jquery_h2_list.length; i++) {
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>';
        var nextH1Index = i + 1;
        if (nextH1Index == jquery_h2_list.length) {
          nextH1Index = 0;
        }
        var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i + 1], "h3");
        if (jquery_h3_list.length > 0) {
          li_content += '<ul class="third_class_ul">';
        }
        for (var j = 0; j < jquery_h3_list.length; j++) {
          li_content += '<li><a href="#_label2_' + i + '_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';
        }
        if (jquery_h3_list.length > 0) {
          li_content += '</ul>';
        }
        li_content += '</li>';
        content += li_content;
      }
      content += '</ul>';
      content += '</div>';
    } else if (jquery_h3_list.length > 0) {
      for (var i = 0; i < jquery_h3_list.length; i++) {
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
        content += li_content;
      }
      content += '</ul>';
      content += '</div>';
    } else {
      return;
    }
    $($('#cnblogs_post_body')[0]).prepend(content);
  }
  GenerateContentList();
</script>

這里只是生產了標題，還要設置其樣式，樣式放在了：選項=》“頁面定制 CSS 代碼”：

/** 左側目錄 */
#navCategory {
  position: fixed;
  z-index: 99;
  top: 325px;
  left: 20px;
  max-width: 300px;
}

#left_menu {
  text-align: left;
  border-left: 1px solid #ddd;
  font-size: 14px;
  margin-left: 20px !important;
}

#left_menu ul {
  margin: 0 0 10px 20px;
}

#left_menu li {
  list-style: none !important;
}

#left_menu a {
  display: inline-table;
  margin-left: 5px;
  white-space: nowrap;
  text-decoration: none;
  color: #313131;
  outline: 0;
  text-decoration: none !important;
}

#left_menu a:hover {
  color: #eb5055;
  border-bottom: none !important;
}

#left_menu>li::before {
  position: relative;
  top: 0;
  left: -4px;
  display: inline-block;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background-color: #eb5055;
}

2、文章中設置錨點

上面只是生成了具體的目錄，但是點擊沒有效果，這里就需要對文章中的 h 標簽的 id 進行設置。

注意：上面生成目錄的代碼中，在一級目錄中里面包含了 <a> ，設置了其屬性 src ，我這里選的是 "_label" 作為前綴，

不同等級命名規則：

• 一級：_label0（第一個一級標簽），_label1（第二個一級標簽）
• 二級：_label2_0_0（二級標簽，第一個一級標簽下的第一個二級標簽）
• 三級：_label3_0_0_0（三級標簽，第一個級標簽下的第一個二級標簽下的第一個三級標簽）

這里之所以用 0 是上面代碼循環從 0 開始