博客园自定义界面样式（侧边栏、进度条、回到顶部、目录）

最近这一段时间对我的博客园样式做了一些调整。总体样式改变了不少。在这里就分享下我的过程。

一、博客园后台管理

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; 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 开始