一、前言

写这篇博客的原因是，由于之前自定义的一些样式， 会导致页面内容量过多时造成网页卡顿的现象，
自己也比较喜欢干净直观的阅读方式，所以尝试不同的博客样式，从博客开通以来，差不多也改了四五次了吧，
所以这次做个总结，也是一种备份吧。

如果感兴趣可以慢慢看完，我也想表达一些对于一些自定义设置的原因。

自定义的前提

首先去后台设置中开通JS权限，写一些原因（比如写博客的原因，可以多写一点），审核其实也很快的一半天吧，看官方情况，反正我当时记得是很快就好了。

注意一：利用好网页的CTRL+F来进行搜索关键字，能快速定位自定义内容位置，编辑栏内也可以使用此快捷键进行查找。
同时CTRL+F也是提高开发效率的必备技能。
注意二：用好搜索快捷键的同时，也要用好目录，因为这次很多代码会占一大部分篇幅，所以用好目录，可以清楚的知道哪一块是做什么的。
注意三：总共总结四次比较重要的自定义操作，而且这次文章内容量也比较多，顺便自己想测试一下当前这款主题流畅阅读程度

第一次

simplememory官方主题

链接直达：https://www.cnblogs.com/SkinUser.aspx?SkinName=SimpleMemory

记得自己第一次写博客的时候，就挑选的这个博客样式，感觉很干净直观，其他博客样式也尝试去用了，可能还是偏向这款博客样式吧，整体真的简洁。

当时在博客“设置”中看到css栏，支持js啥的东西，还不太懂这是干什么的，后来自己学了一些前端的三件套，突然想到这块是不是官方留出来可以自定义化，然后网上搜了一下，果然是自己阳光浅了，还真的可以自定义化，然后自己就开始了DIY历程……

第二次

当初因为是第一次DIY，所以也没有留下什么记录，而且当时博客园，对于这块的语法检测是很松的，直到我去年秋天那时候吧，想再改动一下样式，发现博客园后台设置变样了，而且语法检测严格了。

当时好奇的是，虽然自己没有改动什么但由于报语法错误，保存不了，但是自己博客样式还是很好的渲染出来。自己没法改的是因为当时都是从网上照抄下来的代码，像CSS这种，我根本无从下手去改，几百行的东西，当时看见就吐了，然后我渐渐去找寻可以再次替代这款主题，并且可以自定义出来自己比较喜欢样式的主题，发现寥寥无几，还是打算重新开始simplememory的自定义化吧！

第三次

Cnblogs-Theme-SimpleMemory

这款主题是别人已经改好的主题，整体样式还是很不错的。
（需要提一点的是，根据我下面的自定义内容，可能会与作者的样式稍稍有点差别，还请自行看主题作者文档更改！）
记得选择这个主题！！！

大佬博客：https://www.cnblogs.com/bndong/
附上GItHub：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
文档：https://www.dbnuo.com/Cnblogs-Theme-SimpleMemory/docs/v2/#/
当时也是冲着主题打开后可以有一个简单而且对Markdown渲染比较好的页面去的，而且也有自己的目录结构，其实后面我写博客的时候发现，有一个目录导航会很好的增加文章的可阅读性，毕竟点进来博客的人，也不是都喜欢看，只是冲着标题点进来的，所以目录结构能够大致的反应出博客内容。

（今年开年那时候发现，博客园在文章每一层级的标题上支持目录的展示，瞬间对官方爱了爱了，这个功能是真心不错)。
这块的话个人觉得直接看主题文档比较直接一点，我这里简单说一下，我自己自定义化的一些内容，其实也很少。

页面定制CSS

这里我选的2.*版本，直接进去CTRL+A全选，复制粘贴到CSS栏中，记得勾选“禁用模板CSS”
GitHub：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/blob/v2/dist/simpleMemory.css
Gitee：https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/blob/v2/dist/simpleMemory.css

博客侧边栏

重点就在这，其实很多DIY的东西就在这里面，我也把我之前的配置放着，主要修改内容如图

侧边栏这块最后两行是为了鼠标点击的效果增添的，至于背景上面的线条是在页脚代码块添加的，下面有。

页首HTML代码

页脚HTML代码

• 完全可以根据官方文档来
• 根据我的步骤来，和我一样的效果，先复制粘贴CSS，然后侧边栏，页首代码，页脚代码，我这里都没有做更改，直接粘贴过去可用，记得更换自己的内容
• 要注意的是，这是我当时的配置内容，所以版本可能会稍旧，请自行取舍

第四次

这次我又回归了最初的博客园官方simplememory主题，因为，我又发现，有时候在网络不好的情况下，主题也会出现卡顿。
再一个就是自己也是有点看腻了，不能说这款样式不好看，因为在后面这段时间，我发现很多人都是这个样式，自己也觉得新鲜感丧失了吧，
就想回到最初那个时候，体会一下第一次DIY的快乐。所以这一次简单的说一下，那张第一次DIY图片里的内容，加上这次修改的内容。

上面是经过多次不同的修改才有有内容，所以这里只放第二张图片里的配置，因为两者相差不大。

下面都是完整的配置文件，我在自己更改过的地方，都有备注，所以请自行复制后查看修改。

页面CSS

a:link {
  color: #6495ED;
  text-decoration: none
}
a:visited {
  color: 	#6495ED;
  text-decoration: none
}
a:hover {
  color: rgb(146, 122, 33);
  text-decoration: underline;
}
a:active {
  color: rgb(146, 122, 33);
  text-decoration: underline;
}
/*博客导航栏 */
/* #navList {
float:right;
}
#navList li {
border: none;
font-size: 16px;
}
.blogStats {
display: none;
} */
/*侧边栏公告*/
/* #blog-news > img {
/*头像*/
display: block;
margin: auto;
border-radius: 50%;
} */

/* #profile_block {
font-size: 15px;
padding: 20px;
line-height: 1.8;
}

#profile_block > a:link {
color: #F60;
} */

/*公告结束*/

#ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
  display: none;
}


/* 文章title自定义带动画样式 */
.postTitle {
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  clear: both;
  background-color: #FBF9F9;
  margin-bottom: 8px;
  padding-top: 5px;
  padding-bottom: 0px;
  margin-top: 12px;
  border-left: 8px solid #21759b;
  padding-left: 17px;
  font-size: 18px;
  border-radius:0px;
}
.postTitle a:hover {
  text-decoration: none;
  margin-left: 17px;
  color: #E00000;
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
  transition: all 0.4s linear 0s;
}


/*页面大小*/

#home {
  margin: 0 auto;
  opacity: 1;   /*透明度越小越透明*/
  width: 68%;
  min-width: 980px;
  background-color: #fff;
  padding: 30px;
  margin-top: 50px;
  margin-bottom: 50px;
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  border-radius: 36px;
}
/* body {
background: rgba(12, 100, 129, 1) url('https://pic.imgdb.cn/item/61e521d52ab3f51d9107a088.jpg') fixed no-repeat; 
background-position: 50% 5%;
background-size: cover;
} */
#blogTitle {
  height: 66px;  /*高度*/
  clear: both;
  background-color: rgba(0, 0, 0,0);
}


#blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {
  /*侧边栏每一模块添加圆角和阴影*/
  border-radius: 10px;
  box-shadow: 1px 2px 3px #A7A8AD;
  background-color: #fff0;
}
#sideBarMain h3, .newsItem h3 {
  /*侧边栏每个模块的标题部分*/
  font-size: 1.2em;
  height: 36px;
  line-height: 36px;
  text-indent: 0.5em;
  background: url() no-repeat left center #fff;
  padding: 0 0 0 50px;
  margin-bottom: 1;
  border: 1px solid rgba(112, 141, 215);
  border-left-width: 5px;
  border-radius: 10px;
  border-right-width: 5px;
}

/*生成博客目录的CSS*/
#uprightsideBar{
  font-size: 14px;
  font-family: ArialBold, Helvetica, sans-serif;
  text-align:left;
  position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
  top: 30px;
  right:0px;
  width: auto;
  height: auto;
  color: rgb(29, 4, 4);
}
#sideBarTab{
  font-size: 16px;
  float:left;
  width:30px; 
  border:1px solid #e5e5e5;
  border-right:none;
  text-align:center;
  background:#fff;
}

#sideBarContents{
  float:left;
  overflow:auto; 
  overflow-x:hidden;!important;
  width:266px;
  min-height:108px;
  max-height:460px;
  border:1px solid #e5e5e5;
  border-right:none; 
  background:	#fff;
}
#sideBarContents dl{
  margin:0;
  padding:0;
}

#sideBarContents dt{
  margin-top:5px;
  margin-left:5px;
}

#sideBarContents dd, dt {
  cursor: pointer;
}

#sideBarContents dd:hover, dt:hover {
  color:#abb0f3;
}
#sideBarContents dd{
  margin-left:10px;
}
#sideBarContents dd.indent3{
  margin-left:20px;
}
#sideBarContents dd.indent4{
  margin-left:30px;
}
#sideBarContents dd.indent5{
  margin-left:40px;
}
#sideBarContents dd.indent6{
  margin-left:50px;
}

.box{
  position:fixed;
  right:10px;
  bottom: 10px;
  height:30px;
  width: 50px;    
  text-align:center;
  padding-top:20px;    
  background-color: lightblue;
  border-radius: 20%;
  overflow: hidden;
}
.box:hover:before{
  top:50%
}
.box:hover .box-in{
  visibility: hidden;
}
.box:before{
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%,-50%);
  content:'回到顶部';
  width: 40px;
  color:peru;
  font-weight:bold;
  
}    
.box-in{
  visibility: visible;
  display:inline-block;
  height:20px;
  width: 20px;
  border: 3px solid black;
  border-color: white transparent transparent white;
  transform:rotate(45deg);
}
#cnblogs_post_body { 
  color: black;
  font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; 
  font-size: 15px; 
} 
#cnblogs_post_body h1 {
  text-align:center;
  background: #333366; 
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 
  color: #FFFFFF;
  font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 23px; 
  font-weight: bold; height: 25px; line-height: 25px;
  margin: 18px 0 !important; 
  padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222;
} 
#cnblogs_post_body h2 {
  text-align:center; 
  background: #006699;
  border-radius: 6px 6px 6px 6px; 
  box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
  color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 20px; 
  font-weight: bold; height: 25px;
  line-height: 25px; margin: 18px 0 !important;
  padding: 8px 0 5px 5px;
  text-shadow: 2px 2px 3px #222222; 
}

/* 关注收藏等几个按钮 */
#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: 80px;
  display: inline-block;
  line-height: 30px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  border-radius: 3px;
  text-transform: uppercase;
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  -o-transition: all .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: 35px;
}

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: 35px;
}

/*下面的头像边框*/
#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;
}
/* 设置签名格式 定制css样式 */
/* 个性签名 */
#MySignature {
  box-shadow: 8px 1px 10px #989898;
  padding: 10px;
  text-shadow: 1px 1px 1px #FFF;
  font-size: 15px;
  border-left: solid 5px #55895B;
  background: #FBF9F9;
  border-radius: 10px 10px 37% 10px;
  line-height: 2.4;
  margin: 37px 0;
}

#MySignature a {
  text-decoration: none;
  color: #4183c4;
  font-weight: bold;
}

#MySignature a:hover {
  text-decoration: underline;
  color: #f60;
}

#MySignature span {
  color: #f60;
}

/*推荐和反对*/
#div_digg {
  float: right;
  position: fixed;
  width: 50px;
  bottom: 10px;
  left: 90%;
  margin-bottom: 10px;
  background: rgba(247,247,247,0.3);
  margin-right: 10px;
  font-size: 12px;
  box-shadow: 0 0 10px 0 #AAA;
  padding: 10px;
  border: 2px solid rgba(82, 168, 236, 0.8);
  text-align: center;
  margin-top: 10px;
}

/*这里是将反对按钮做了一个隐藏，如果需要反对按钮，直接删除这块配置*/
.buryit {
  display: none;
}

侧边栏

页首

Welcome to Yu Yueq's blog















    

第五次

cnblogs-theme-silence

上次根据Google官方的开发文档，通过翻译和自己理解总结了《GoogleJava开发规范》，还是以前的问题，虽然这次自定义的东西我都比较符合规范，但还是会导致页面加载卡顿，渲染效果不是很好，所以想着再能不能调整一下主题样式，因为自己当时在用simplememor主题自定义的时候发现
cnblogs-theme-silence这个主题也是很不错的，但是当时自己也是比较喜欢simple这款主题，所以就没怎么在意，还是继续DIY simple，这次打算尝试一下这款主题。
作者GitHub仓库：https://github.com/esofar/cnblogs-theme-silence/
主题文档：http://esofar.gitee.io/cnblogs-theme-silence/#/
这款主题是基于博客园“custom”模板，可不是simplememory了

页面CSS

全选复制粘贴，这块没有什么要更改的
GitHub：https://github.com/esofar/cnblogs-theme-silence/blob/master/dist/silence.min.css
CSS-CDN：https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.css

侧边栏

至于JS的应用可以直接用我的，或者用作者官方CDN
JS-CDN：https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.js

然后就是一些我的个人配置，标题这块是这种配置

纸上得来终觉浅，绝知此事要躬行.
Talk is cheap. Show me the code.    悟已往之不谏，知来者之可追。实迷途其未远，觉今是而昨非.

下面是侧边栏内容，很多配置官方有说明，而且我也有一些注释，这里不做过多赘述

关于音乐播放器

这块我是用的 Aplayer：https://aplayer.js.org/#/zh-Hans/
可以去参考一下官方文档进行自定义化和配置。

关于其他主题

当时是直接在博客园里面，搜索相关的样式修改文章的，把文章日期尽量定位到比较旧的日期相对来说有新发现
这里推荐两篇很不错的文章:

目前自己的博客样式就是这个，暂时感觉还不错，可能自己也有审美疲劳吧，不知道会过多久，再次尝试换一个新的主题，也很有可能兜兜转转回归默认。
此外也是因为最近刚换博客主题，所以抽了点时间把以前的修改做个总结。

最后

顺便提一下上一篇对sql函数和优化的记录，今天看到公众号有一篇文章
警告！别再使用 TIMESTAMP 作为日期字段～
本人现在就有点懵，因为自己也有一点设计习惯了，也不知道这种方式到底怎么样，感觉网上说的大多都不一，多数情况下还是要根据业务来吧，到底哪种方式更普遍
更优先，还是都可以，希望有大佬可以不吝赐教，我在此非常感谢！