自定义博客园样式

 更新日志[最近更新：2020-03-03]

再使用博客园之前，一直都是用CSDN来记录一些自己成长的点滴、发表相对不易解决的IT开发问题。使用CSDN已有一段时间，几乎所有的CSDN用户的页面布局大同小异，CSDN对于开发者是封闭的，看过一些优秀的网站后，对于不能对自己博客页面进行美化，对其的归属感顿时下降不少。

看到博客园后，不得不惊叹于它的优秀，看到别人的博客园页面后一直想要自己着手来对自己的博客园页面进行布局。奈何当时因种种原因被搁置了，借此闲暇之时，给自己的博客园进行一次美化。

代码没有进行优化，造成加载页面缓慢的情况。

---

一、申请JS权限

由于对侧边公告栏进行了改动，所以需要申请侧边公告栏的JS权限。没有申请的可自行向博客园后台进行申请，理由不要敷衍了事，会有几率被拒，具体可自度娘或谷歌借鉴别人的理由。

二、选择基本模板

博客皮肤

由于我是基于博客园中一款皮肤的HTML布局来改的，不知道其它皮肤是否有影响，所以在此声明一下。如果你要使用我所用的样式，可自行尝试^_^。

在[管理]——>[设置]中,选择[darkgreentrip]这款皮肤。

三、了解博客园纯HTML基本布局

  3.1 博客园个人博客页面布局

留给用户三个空白div区域，写纯HTML

3.1.1 [首页]：#page_begin_html

3.1.2 [侧边栏](位于home内部)：#blog-news

3.1.3 [页脚]：#page_end_html。改变其它地方需要用JavaScript脚本来实现

body
├──<a name="top">
├──<div id="page_begin_html> ****************** 空白首页div标签 ***
├──<div id="home">博客园默认内容区
│ ├──<div id="header"> header 头部
│ │ ├──<div id="blogTitle"> 博客标题 和 副标题
│ │ └──<div id="navigator"> 博客导航栏
│ │ 
│ ├──<div id="main"> main区
│ │ ├──<div id="mainCotent"> 主体内容容器
│ │ └──<div id=<sideBar"> 侧边栏容器
│ │ ├──<div id="sidebar_news"> 
│ │ ├──<h3 class="catListTetle">
│ │ │ ├──<div id="blog-news"> ****************** 博客侧边公告栏 ***
│ │ │ ├──侧边栏 纯HTML区
│ │ │ └──<div id="profile_block">
│ │ │ 
│ │ ├──<div id="blog-calendar">
│ │ └──<div id="leftcontentcontainer">
│ │ 
│ └──<div id="footer"> footer区
│ 
├──<div id="page_end_html"> ****************** 空白页脚div标签 ***
└──<audio> 媒体标签

五、CSS样式

  5.1 禁用CSS样式

  为避免默认样式带来的影响，我们自己写样式时，需要吧博客园的默认样式禁用掉。

  5.2 使用

在Css中使用下面的代码导入博客园文件中提前上传好的样式，或者直接将全部CSS代码粘贴进去。

@import "https://files.cnblogs.com/files/langkye/Blogs.min.css";

  5.3 CSS代码 

/*------------------------------------------------------------- Custom cascading style sheets -------------------------------------------------------------*/
/*  清除ul、ol、a、input等标签元素的默认样式和内、外边距  ----------------------------------------------------------------*/
/*:empty{display:none;}     */
* {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none; /* 清除li前面的符号 */
}

input {
  border: 0; /* 边框 */
  outline: 0; /* 外边线 */
  padding: 0; /*内边距 */
  margin: 0; /* 外边距 */
}

a {
  text-decoration: none !important; /* 下划线 */
}

/*伪类——清除浮动的影响*/
.clear-fix:after {
  content: " ";
  display: none;
  clear: both; /* 清除当前元素左右浮动元素的影响 */
  height: 0;
  visibility: hidden; /* 隐藏 */
}
/* 首行缩进 START*/
.postBody #cnblogs_post_body h2 {
  text-indent: 1em;
}
.postBody #cnblogs_post_body h3,.postBody #cnblogs_post_body p {
  text-indent: 2em;
}
/* 取消首行缩进 */
.offRetrack{
  text-indent: 0em !important;
}
/* 首行缩进 END*/
/* 侧边栏、主题区高度、设置超出部分隐藏并滚动 */
/*
#sideBar,
#mainContent {
  max-height: 3600px !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}
*/
/*滚动条整体样式*/
#sideBar::-webkit-scrollbar,
#mainContent::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 0px;
  height: 0px;
}

/* 新标签 START */
fieldset {
  display: block !important;
  margin-inline-start: 2px !important;
  margin-inline-end: 2px !important;
  padding-block-start: 0.35em !important;
  padding-inline-start: 0.75em !important;
  padding-inline-end: 0.75em !important;
  padding-block-end: 0.625em !important;
  min-inline-size: min-content !important;
  border-width: 1px !important;
  border-radius: 3px !important;
  border-style: groove !important;
  border-color: threedface !important;
  border-image: initial !important;
}

legend {
  display: block !important;
  width: auto !important;
  margin: 0 auto !important;
  padding-inline-start: 2px !important;
  padding-inline-end: 2px !important;
  border-width: initial !important;
  border-style: none !important;
  border-color: initial !important;
  border-image: initial !important;
}
/* 新标签 End */
/*  ./ 清除ul、ol、a、input等标签元素的默认样式  ----------------------------------------------------------------*/
/* 文章默认字体大小 */
#cnblogs_post_body,
#cnblogs_post_body blockquote {
  font-size: 14px !important;
}

#MySignature {
  /*  */
  display: none !important;
}

/*body静态背景*/
body {
  margin: 0;
  width: 100%;
  height: 100vh;
  color: #fff;
  background-image: linear-gradient(
          to top,
          #d299c2 0%,
          #fef9d7 100%
  ); /* 颜色线性渐变背景 */
  background-repeat: no-repeat; /* 取消重复 */
  background-attachment: fixed; /* 固定背景，避免背景随滚动条滚动 */
}

#sidebar_news,
#blog-calendar {
  /* ,#blog-sidecolumn */
  background-color: rgba(240, 255, 240, 0.9);
  border-radius: 3px;
}

#blog-sidecolumn > div {
  background-color: rgba(240, 255, 240, 0.9);
  border-radius: 3px;
  padding: 0 35px 10px;
  margin-bottom: 20px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 3px;
}

/* 看板娘START [css + 侧边栏+ 页脚] https://www.cnblogs.com/cainiao-chuanqi/p/11808640.html#autoid-2-9-0 */
/* 看板娘是固定定位，可通过宽高、左右来设置其位置 */
canvas#live2dcanvas {
  border: 0 !important;
  right: 0;
  width: 230px !important;
  height: 460px !important;
}
/* 看板娘 END */

/*隐藏广告*/
#cnblogs_c2,
#cnblogs_c1,
#ad_t2 {
  display: none !important;
}

/* 导航栏 */
#header {
  background-color: rgb(99, 73, 139);
  color: whitte;
}

/* 标题 */
#Header1_HeaderTitle {
  color: orange;
  text-transform: uppercase;
}

/* 菜单 */
#navList a {
  color: white;
}

@media screen and (max- 414px) {
  /* 博客园侧边栏的搜索框样式 */
  #q,
  #google_q {
    width: 320px !important;
  }
}

/* github */

/* 点赞 按钮 START*/
#div_digg {
  padding: 5px;
  border-radius: 5px;
  position: fixed;
  left: 0;
  bottom: 80px;
  width: 80px;
  z-index: 100;
}
/* 点赞按钮图片 */
.diggit {
  background: url("http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png")
  no-repeat;
  width: 60px;
  height: 60px;
}

#div_digg .diggnum {
  position: absolute;
  bottom: -20px;
  left: 6px;
  background: #d0d0d0;
  padding: 2px 0;
  display: block;
  color: #555;
  font-size: 12px;
  text-align: center;
  width: 60px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-weight: bold;
}

/* 删除反对按钮,有点邪恶了 */
.buryit {
  display: none !important;
}

#ToTopB {
  margin-top: 1rem;
}
/* 返回顶部按钮样式 START */
#ToTopA,
#ToTopB {
  width: 120px;
  /*宽*/
  height: 32px;
  color: #fff;
  /*字体大写*/
  text-transform: uppercase;
  /*字体增加装饰：去除下划线*/
  text-decoration: none;
  /*非衬线体*/
  font-family: sans-serif;
  /*盒模型大小规则*/
  box-sizing: border-box;
  background: linear-gradient(
          90deg,
          #03a9f4,
          #f441a5,
          #ffeb3b,
          #03a9f4,
          #f441a5,
          #ffeb3b,
          #03a9f4
  );
  /*渐变背景*/
  border-radius: 60px;
  /*边框圆角*/
  background-size: 400%;
  /*背景大小*/
  z-index: 1;
  /*层叠定位*/
}
/* 返回顶部按钮，鼠标穿过元素时的样式 */
#ToTopA:hover,
#ToTopB:hover {
  /*动画: 名称 时间 线性 循环 播放完回退播放*/
  animation: animate 8s linear infinite alternate;
}
/* 定义动画 */
@keyframes animate {
  0% {
    background-position: 0%;
    /*修改背景定位，实现渐变色炫光*/
  }

  50% {
    background-position: 100%;
  }

  100% {
    background-position: 0%;
  }
}

#ToTopA::before,
#ToTopB::before {
  /*之前添加*/
  content: "";
  /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
  z-index: -1;
  background: linear-gradient(
          90deg,
          #03a9f4,
          #f441a5,
          #ffeb3b,
          #03a9f4,
          #f441a5,
          #ffeb3b,
          #03a9f4
  );
  border-radius: 40px;
  background-size: 400%;
  filter: blur(20px);
  /*过渡：模糊*/
  opacity: 0;
  /*透明度*/
  transition: 1s;
  /*过渡时间*/
}

#ToTopA:hover::before,
#ToTopB:hover::before {
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite;
  /*注意动画名称统一*/
}
/* 返回顶部按钮样式 END */
/*------------------------------------------------------------- ./Custom cascading style sheets -------------------------------------------------------------*/
/*标签云－－标签部分- START -css+js*/
#sidebar_toptags > div > ul > li > a {
  font-size: 12px;
  line-height: 11px;
  color: #fff;
}

#sidebar_toptags > div > ul > li {
  position: absolute;
  padding: 0 10px;
  border-radius: 10%;
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  transition: all 0.7s;
  font-size: 9px;
  color: #fff;
}

#sidebar_toptags > div > ul {
  position: relative !important;
  clear: both;
  display: block;
  padding: 10px;
  padding-left: 0px;
  width: 270px;
  height: 230px;
  /* background: #ffffee; */
}
/* 标签云 END */
/* 收藏、关注 ...*/
/* 关注收藏等几个按钮 */
#green_channel {
  padding: 5px 0 15px 0;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 0;
  border-top: #eee 1px dashed;
  border-bottom: #eee 1px dashed;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: rgb(238, 238, 238);
  font-size: 12px;
  width: 100% !important;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

a#green_channel_digg,
a#green_channel_follow,
a#green_channel_favorite,
a#green_channel_weibo,
a#green_channel_wechat {
  text-decoration: none;
  color: #fff;
  margin: auto;
  width: 120px;
  display: inline-block;
  line-height: 30px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  border-radius: 3px;
  text-transform: uppercase;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  position: relative;
  margin-left: 10px;
  background-image: none;
  margin-top: 10px;
}

a#green_channel_digg {
  background-color: #2daebf;
  box-shadow: 0 15px 18px -6px rgba(95, 193, 206, 0.65);
}

a#green_channel_favorite {
  background-color: #ffb515;
  box-shadow: 0 15px 18px -6px rgba(255, 198, 75, 0.65);
  margin-left: 10px;
}

a#green_channel_follow {
  background-color: #e33100 !important;
  box-shadow: 0 15px 18px -6px rgba(227, 49, 0, 0.65);
  margin-left: 10px;
}

a#green_channel_wechat {
  padding: 3px 8px !important;
  background-color: #3cb034 !important;
  box-shadow: 0 15px 18px -6px rgba(60, 176, 52, 0.65) !important;
  margin-left: 10px;
  width: 120px;
}

a#green_channel_weibo {
  padding: 3px 8px !important;
  background-color: #ff464b !important;
  box-shadow: 0 15px 18px -6px rgba(255, 70, 75, 0.65) !important;
  margin-left: 10px;
  width: 120px;
}

/*下面的头像边框*/
#author_profile_info img.author_avatar {
  border-radius: 100%;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  border: 3px solid #f7f7f7;
  padding: 0;
  margin-left: 3px;
  margin-right: 7px;
}

/* 禁用下划线 */
.postBody a:link,
.postBody a:visited,
.postBody a:active {
  text-decoration: none;
}

/* 上一篇下一篇 */
#post_next_prev {
  font-size: 14px;
  color: #535353;
}
#cnblogs_post_body table{
  border: none ;
  overflow: hidden !important;
}
#cnblogs_post_body table > tbody{
  width: 100% !important;
}
@media screen and (max- 768px) {
  #main div[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body #home #mainContent{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}



/* 文章 START */
/* 水平线 */
#home #main #cnblogs_post_body hr {
  border-top-color: #0ee !important;
}



/* 文章引用样式 */
#cnblogs_post_body > blockquote {
  display: block;
  padding: 16px;
  margin: 0 0 24px;
  /* border-left: 8px solid #dddfe4; */
  background: #c7ecee;
  overflow: auto;
}

/* 文章 END */

/*编辑 收藏*/
/*------------------------------------------------------------------------------------*/
#home
> #main
#mainContent
> .forFlow
> .day
.postCon
.c_b_p_desc
.c_b_p_desc_readmore {
  display: inline-block;
  box-sizing: border-box;
  background-color: #97d058;
  color: whitesmoke;
  padding: 0.1rem 0.5rem;
  border-radius: 0.1rem;
}

#home
> #main
#mainContent
> .forFlow
> .day
> .postCon
> .c_b_p_desc
> .c_b_p_desc_readmore:hover {
  font-weight: bold;
  background-color: #6ab04c;
}

#home > #main #mainContent > .forFlow > .day > .postDesc ,
.dayChildPreWrap .postDesc ,
.dayChildNexWrap .postDesc {
  display: flex;
  justify-content: space-around;
  padding: 0.8rem 0;
  border-radius: 0.2rem;
  border-bottom: 0.1rem solid #e5e5e5;
  background-color: #1b95e0;
  color: #e5e5e5;
  box-sizing: border-box;
}

#firstDay > #topics > .post > .postDesc {
  padding: 0.8rem 1rem;
  border-radius: 0.2rem;
  border-bottom: 0.1rem solid #e5e5e5;
  background-color: #1b95e0;
  color: #e5e5e5;
}

#home > #main #mainContent > .forFlow > .day .postDesc > a {
  display: inline-block;
  width: 5rem;
  height: 2.5rem;
  background-color: #1b95e0;
  border: 0.1rem solid whitesmoke;
  border-radius: 0.3rem;
  color: #e5e5e5;
  display: flex;
  justify-content: center;
  align-items: center;
}

#firstDay>#topics>.post>.postDesc>a[href^="https://www.cnblogs.com"] {
  min-width: 6.5rem;
}

#firstDay > #topics > .post > .postDesc {
  text-align: center;
}

#firstDay > #topics > .post > .postDesc > a {
  display: inline-block;
  height: 2.1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: #1b95e0;
  border: 0.1rem solid whitesmoke;
  border-radius: 0.3rem;
  color: #e5e5e5;
  text-align: center;
  font-weight: bold;
}

#home > #main #mainContent > .forFlow > .day .postDesc > a:hover,
#firstDay > #topics > .post > .postDesc > a:hover {
  color: #d980fa;
}

/*-----------------------------------------------------------------------------------*/

#firstDay,#comment_form{
  margin-top: 22px !important;
  border-radius: 3px !important;
  border: 1px solid rgb(99, 73, 139) !important;
  padding: 10px 5px !important;
}
#comment_form {
  margin-left: 0 !important;
}
#mainContent > .forFlow > .day {
  margin-top: 22px !important;
  border-radius: 3px !important;
  border: 1px solid rgb(99, 73, 139) !important;
  padding: 10px 5px !important;
}

#mainContent > .forFlow > .entrylist > .entrylistItem {
  margin-right: 10px !important;
  height: 300px !important;
  /*overflow: scroll;*/
  margin-left: 5px !important;
}



#mainContent > .forFlow > .entrylist > .entrylistItem:nth-last-child(2) {
  margin-right: 0px !important;
}

#mainContent > .forFlow > .entrylist > .entrylistItem .c_b_p_desc {
  height: 143px !important;
  overflow: hidden;
}

#mainContent > .forFlow > .entrylist .entrylistItemTitle {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mainContent > .forFlow > .entrylist .entrylistItemTitle:hover {
  color: #f8efba !important;
}

#mainContent > .forFlow > .entrylist > .entrylistItem::-webkit-scrollbar,
#mainContent::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}

#firstDay > div:not(.postDesc):not(.clear),
#firstDay + .day > div:not(.postDesc):not(.clear) {
  margin-bottom: 10px !important;
}

.forFlow > .day .dayTitle {
  display: none !important;
}



/* 防止图片溢出 */
#cnblogs_post_body img {
  max-width: 100%;
}

/* 如果没有bug可以忽略这一条 */
/*溢出隐藏设置*/
#topics,
#mainContent {
  overflow: visible;
}

#mainContent {
  margin-left: 20px ;
  margin-right: 20px ;
}

#firstDay > #topics > .post > .postTitle {
  text-align: center;
  display: flex;
  justify-content: center;
  background-color: #7fbd42;
}

#firstDay > #topics > .post > .postTitle > a {
  color: white;
  font-size: 3rem;
  padding: 1rem;
}

#firstDay > #topics > .post > .postTitle > a:hover {
  color: #ce7fd8;
}

#firstDay > .postTitle,
#firstDay + .day > .postTitle,
#mainContent > .forFlow > .day .postTitle {
  text-align: center;
  display: flex;
  justify-content: center;
}

#firstDay > .postTitle > a,
#firstDay + .day .postTitle > a {
  border-bottom: 1px solid;
}

#mainContent > .forFlow > .day .postTitle > a {
  border-bottom: 1px solid;
}



#postDesc {
  float: none;
}

/* 代码块 START ***************************************************************/
/**/
#firstDay > #topics > .post > .postBody > #cnblogs_post_body > .cnblogs_code {
  background-color: #3a3d51;
  border-radius: 0.3rem !important;
  box-sizing: border-box;
}

#firstDay
> #topics
> .post
> .postBody
> #cnblogs_post_body
> .cnblogs_code
> .code_img_closed,
#firstDay
> #topics
> .post
> .postBody
> #cnblogs_post_body
> .cnblogs_code
> .code_img_opened {
  display: inline-block;
  width: 25px;
  cursor: pointer;
  padding: 0px;
  padding-bottom: 3px;
  margin: 0px;
  margin: 0 15px;
}

#firstDay
> #topics
> .post
> .postBody
> #cnblogs_post_body
> .cnblogs_code
> .cnblogs_code_hide
img {
  width: 25px;
}
#mainContent > .row {margin-right: 0 !important;}


#main > .row{
  /*margin-left: 0 !important;*/
  margin-right: 1px !important;
}

#sidebar {
  margin-left: 3%;
}
@media screen and (min- 1200px) {
  #mainContent > .forFlow > .entrylist > .entrylistItem {
    width: 32%;
  }
}

@media only screen and (max- 768px) {
  #home #main #mainContent .forFlow,#sideBarMain {
    margin-left: 1px !important;
    margin-right: 1px !important;
  }
  #main > .row,#mainContent, #sideBar{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #home #main #sideBar{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  div[class*="col-"] {
    margin-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media screen and (max- 768px) {
  #mainContent {
    width: 100vw !important;
  }
  #main {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  #firstDay + .day:not("#daySelf") {
    height: 280px !important;
  }
}


/* 代码高亮 START ***************************************************************/
/**
 * Shades of Purple Theme — for Highlightjs.
 *
 * @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>
 * @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
 * @version 1.5.0
 */

/* 样式地址
* https://highlightjs.org/
* https://highlightjs.org/static/demo/
*******************************/

.cnblogs-markdown .hljs {
  display: block !important;
  overflow-x: auto !important;
  /* Custom font is optional */
  /* font-family: 'Operator Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', 'monospace';  */
  padding: 0.5em !important;
  background: #2d2b57 !important;
  font-weight: normal !important;
}

.hljs-title {
  color: #fad000 !important;
  font-weight: normal !important;
}

.hljs-name {
  color: #a1feff !important;
}

.hljs-tag {
  color: #ffffff !important;
}

.hljs-attr {
  color: #f8d000 !important;
  font-style: italic !important;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section {
  color: #fb9e00 !important;
}

.hljs-keyword {
  color: #fb9e00 !important;
}

.hljs,
.hljs-subst {
  color: #e3dfff !important;
}

.hljs-string,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-code,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-quote,
.hljs-deletion {
  color: #4cd213 !important;
}

.hljs-meta,
.hljs-meta-string {
  color: #fb9e00 !important;
}

.hljs-comment {
  color: #ac65ff !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name,
.hljs-strong {
  font-weight: normal !important;
}

.hljs-literal,
.hljs-number {
  color: #fa658d !important;
}

.hljs-emphasis {
  font-style: italic !important;
}

.hljs-strong {
  font-weight: bold !important;
}


/* header */
@media screen and (min- 768px) {
  #header {
    position: fixed;
    width: 100%;
    z-index: 999;
  }
}

#lnkBlogLogo{ /*#navigator,*/
  display: none;
}
#blogTitle,#blogTitle h2,#blogTitle h1 {
  padding: 0;
  margin: 0;
}
#blogTitle {
  height: 50px;
}
#mainContent{
  margin-top: 1px;
}

#Header1_HeaderTitle {
  font-size: 18px;
}
.tempHide{
  display: none;
}
/*目录*/
#sideToolbar {
  top: 70px !important;
}
#sideCatalog {
  background-color: #63498b;
}
#catalog-toggle button i:hover{
  color: #f19066;
}
#sideCatalog-catalog ul li a:hover {
  background-color: #d6a2e8;
}
#sideCatalog-catalog ul li a {
  color: white;
}
@media screen and (max- 1200px) {
  #sideToolbar {
    top: 135px !important;
    left: 10px;
  }
}

六、博客侧边栏公告

  6.1 板娘插件

  右下角板娘部分是用别人写好的插件，如需更换可自行到侧边栏代码部分找到下列代码区域进行更改，具体方法参照博客[【分享】给自己的博客园添加板娘(可选)]

<!-- 板娘 [css + 侧边栏 + 页脚] START-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        "model": { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku/assets/shizuku.model.json", "scale": 1 },
        "display": { "position": "right", "width": 100, "height": 200, "hOffset": -17, "vOffset": -10 },
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.3 }
    });
</script>
<!-- 板娘 End -->　

  6.2 侧边栏代码  

<script src="https://files.cnblogs.com/files/langkye/Cnblogs.sidebar.min.js"></script>
<script>
    $(window).load(function () { // 入口函数  // prepend()方法是jQuery中的内置方法，用于在所选元素的开头插入指定的内容。//   
        /*$(selector).prepend(content, function(){});*/
        let GitHub_Conf = {
            url: "https://github.com/langkye",
            top: "50px", // 两个Github图标到顶部的距离
            right: "0", // 右侧Github图标到右侧的距离
            left: "0", // 左侧Github图标到左侧的距离
        };
        Sidebar_Min(GitHub_Conf); // 必须也引入 Cnblogs.sidebar.min.js
    });
</script>
<!-- —————————————————————————————————————— 博客侧边栏 START —————————————————————————————————————— -->
<!-- ———————————————————————— 插件 START ———————————————————————— -->
<!-- 板娘 [css + 侧边栏 + 页脚] START-->
<!--
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        "model": { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku/assets/shizuku.model.json", "scale": 1 },
        "display": { "position": "right", "width": 100, "height": 200, "hOffset": -17, "vOffset": -10 },
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.3 }
    });
</script>-->
<!-- 板娘 End -->


<!-- ———————————————————————— 插件 END ———————————————————————— -->
<!-- 公告 -->

<!-- —————————————————————————————————————— 博客侧边栏 END —————————————————————————————————————— -->

七、博客首页HTML代码

  7.1 打赏插件

  配置打赏插件，需在博客园后台管理的文件中上传支付宝和微信的收款码。在首页的代码中更改以下部分代码中的对应图片地址即可。

<!-- 打赏插件 START -->
<script>
  window.tctipConfig = {
    staticPrefix: "http://static.tctip.com",
    buttonImageId: 7,
    buttonTip: "dashang",
    list: {
      alipay: { qrimg: "https://files.cnblogs.com/files/langkye/Alipay.bmp" }, //支付宝
      weixin: { qrimg: "https://files.cnblogs.com/files/langkye/WeChatPay.bmp" },  // 微信
    }
  };
</script>
<script src="https://files.cnblogs.com/files/hafiz/tctip.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/myRewards.css">
<!-- 打赏插件 END-->

  7.2 首页代码 

<!---------------------------------------------------------------------------------------------
/*  博客园个人博客页面布局：留给用户三个空白div区域[首页：#page_begin_htm l；侧边栏(位于home内部)：#blog-news；页脚：#page_end_html]写纯HTML，写道其它地方需要用JavaScript脚本来实现
 * body
 *├──<a name="top">
 *├──<div id="page_begin_htm l> ****************** 空白首页div标签 ***
 *├──<div id="home">博客园默认内容区
 *│   ├──<div id="header">  header 头部
 *│   │   ├──<div id="blogTitle">  博客标题 和 副标题
 *│   │   └──<div id="navigator">  博客导航栏
 *│   │   
 *│   ├──<div id="main"> main区
 *│   │    ├──<div id="mainCotent"> 主体内容容器
 *│   │    └──<div id=<sideBar"> 侧边栏容器
 *│   │          ├──<div id="sidebar_news"> 
 *│   │          ├──<h3 class="catListTetle">
 *│   │          │    ├──<div id="blog-news"> ****************** 博客侧边公告栏 ***
 *│   │          │    ├──侧边栏 纯HTML区
 *│   │          │    └──<div id="profile_block">
 *│   │          │   
 *│   │          ├──<div id="blog-calendar">
 *│   │          └──<div id="leftcontentcontainer">
 *│   │   
 *│   └──<div id="footer"> footer区
 *│   
 *├──<div id="page_end_html"> ****************** 空白页脚div标签 ***
 *└──<audio>  媒体标签
 *
 */
----------------------------------------------------------------------------------------------->
<!-- ———————————— 静态资源 START ————————————-->
<link rel="stylesheet" href="https://files.cnblogs.com/files/langkye/bootstrap.min.css">
<!-- ———————————— 静态资源 END ————————————-->

<!-- 博客园网页图标 START-->
<link rel="https://files.cnblogs.com/files/langkye/langkye.ico">
<script type="text/javascript" language="javascript">
    $("#navigator").addClass("tempHide");
    function ToTop() { $("html,body").animate({ scrollTop: "0px" }, 200); } // 回到顶部函数，绑定在ToTopA和ToTopB按钮中
    //Setting ico for cnblogs
    var linkObject = document.createElement('link');
    linkObject.rel = "shortcut icon";
    linkObject.href = "https://files.cnblogs.com/files/langkye/langkye.ico";
    document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
<!-- 博客园网页图标 END-->

<!---------------------------------------------插件------------------------------------------->
<script>
    /*$(document).ready(function(){$("#yourid").hide();});*/
  //$("body").hide(); // 加载完页面之前隐藏整个body  
</script>
<!-- 打赏插件 START -->
<script>
    window.tctipConfig = {
        staticPrefix: "http://static.tctip.com",
        buttonImageId: 7,
        buttonTip: "dashang",
        list: {
            alipay: { qrimg: "https://files.cnblogs.com/files/langkye/Alipay.bmp" }, //支付宝
            weixin: { qrimg: "https://files.cnblogs.com/files/langkye/WeChatPay.bmp" },  // 微信
        }
    };
</script>
<script src="https://files.cnblogs.com/files/langkye/Cnblogs.tctip.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/langkye/Cnblogs.myRewards.css">
<!-- 打赏插件 END-->
<!--------------------------------------------- ./ 插件------------------------------------------->

<!------------------------------------------------------------- 页首 HTML 代码 #page_begin_html  START------------------------------------------------------------->



<script type="text/javascript">
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = new Array("❤客官，点个赞再走吧！^_^❤");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
                1500,
                function () {
                    $i.remove();
                });
        });
    });
</script>

<!-- #home -->
<script src="https://files.cnblogs.com/files/langkye/Cnblogs.index.min.js"></script>
<script>
    $(function () {
        Index_Min();
    });
</script>


<!------------------------------------------------------------- 页首 HTML 代码 END ------------------------------------------------------------->

八、页脚

  8.1 绚丽彩虹播放器插件

  该插件可自定制，也可使用我的，具体方法可访问 [绚丽彩虹播放器主页], 进而更改页脚代码中的一下部分代码。

<!-- 音乐播放器插件| 绚丽彩虹播放器 START -->
<nav id="navbar-bottom" class="navbar navbar-fixed-bottom" style="background-color: rgb(99, 73, 139)">
    <div class="container">
        <div id="music">
            <!-- Your XlchPlayerKey -->
            <script>XlchKey = "2iVjTsPS7h";</script>
            <!-- font-awesome 4.2.0 -->
            <link href="https://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
                type="text/css">
            <!-- JQuery 2.2.4 -->
            <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
            <!-- JQuery-mousewheel 3.1.9 -->
            <script src="https://lib.baomitu.com/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script>
            <!-- Scrollbar -->
            <script src="https://static.https.badapple.top/BadApplePlayer/js/scrollbar.js"></script>
            <!-- BadApplePlayer -->
            <script src="https://static.https.badapple.top/BadApplePlayer/Player.js"></script>
            <!---------------------------end 音乐插件--------------------------------------------->
        </div>
    </div>
</nav>
<!-- 音乐播放器插件| 绚丽彩虹播放器 END -->

  8.2 页脚代码 

<!-- —————————————————————————————————————— 页脚 START —————————————————————————————————————— -->
<!-- 页脚JS -->
<script src="https://files.cnblogs.com/files/langkye/Cnblogs.Footer.min.js">
</script>
<!--/* 板娘Began [css + 侧边栏 + 页脚] + 预加载内容 ---------------------------------*/-->
<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        /* 板娘 START */
        L2Dwidget.init();
        /* 板娘 END */
        // 执行页脚其它代码
        Footer_Min();  // 必须在前面引入 Cnblogs.Footer.min.js
    }    
</script>

<!-- ———————————————————— 插件 START ———————————————————— -->
<!-- 音乐播放器插件| 绚丽彩虹播放器 -->
<nav id="navbar-bottom" class="navbar navbar-fixed-bottom" style="background-color: rgb(99, 73, 139)">
    <div class="container">
        <div id="music">
            <!-- Your XlchPlayerKey -->
            <script>XlchKey = "2iVjTsPS7h";</script>
            <!-- font-awesome 4.2.0 -->
            <link href="https://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
                type="text/css">
            <!-- JQuery 2.2.4 -->
            <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
            <!-- JQuery-mousewheel 3.1.9 -->
            <script src="https://lib.baomitu.com/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script>
            <!-- Scrollbar -->
            <script src="https://static.https.badapple.top/BadApplePlayer/js/scrollbar.js"></script>
            <!-- BadApplePlayer -->
            <script src="https://static.https.badapple.top/BadApplePlayer/Player.js"></script>
            <!---------------------------end 音乐插件--------------------------------------------->
        </div>
    </div>
</nav>
<!-- ———————————————————— 插件 END ———————————————————— -->
<!-- ———————————— 静态资源 START  ————————————-->
<!--  目录 -->
<script src="https://files.cnblogs.com/files/langkye/Cnblogs.Catalog.min.js"></script>
<!-- Bootstrap JS-->
<script src="https://files.cnblogs.com/files/langkye/bootstrap.min.js"></script>
<!-- ———————————— 静态资源 END ————————————-->
<!-- —————————————————————————————————————— 页脚 END —————————————————————————————————————— -->

参考博客

1. 博客园自定义页面风格设计

2. 博客园美化手记

3. 博客园自定义

4. 【分享】博客美化(1)基本后台设置与样式设置

5. 欠的债，这一次还给你们

6. 【分享】给自己的博客园添加板娘(可选)

---

 跟新日志

2020.02.24 —— 处理响应式布局

2020.02.26 —— 优化代码，解决页面加载缓慢问题

2020.03.03 —— 新增博客目录

---

更新中...