我属于外貌协会中偏理性的一类人，对于自己博客界面当然也不会例外，谁不喜欢嫩嘟嘟水灵灵的皮肤呢，一款好的样式更能激起我阅读更新博客的兴趣，这种来自于外在的客观刺激是不容小觑的。所有这次对博客园的主题来了一次大改造.

风格预览

既然我们的是技术型文章的博客(?我的是学习笔记), 就要选择一种看上去很 Geek 的博客框架, 所以我选中了, 把我们博客园的主题改成light风格

主页如图:

文章页如图:

具体的可以到我的预览

整体样式

博客园后台->设置->选择LessIsMore皮肤->定制css代码->禁用模板默认样式

@font-face {  font-family: 'FontAwesome';  font-style: normal;  font-weight: normal;  src: url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');}* {  margin: 0;  padding: 0;}body {  background: #eee;  background-image: url("//images.cnblogs.com/cnblogs_com/moondark/420237/o_banner.jpg")  color: #444;  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;  font-size: 14px;  text-shadow: 0 0 1px transparent;}@media screen and (max-width: 1260px) {  body {    margin: 0 30px;  }}@media screen and (max-width: 600px) {  body {    font-size: 13px;  }}h1,h2,h3,h4,h5,h6 {  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}h1 {  font-size: 1.8em;}h2 {  font-size: 1.5em;}h3 {  font-size: 1.3em;}a {  text-decoration: none;  color: #258fb8;}a:hover {  text-decoration: underline;}#tbCommentBody {  width: 100%;}#Header1_HeaderTitle {   font-size: 22px;}#blogTitle {  float: left;}.alignright {  float: right;}.clearfix {  zoom: 1;}.clearfix:before,.clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;}#header, #main, #footer {  width: 1200px;  margin: 0 auto;}@media screen and (max-width: 1260px) {  #main {    width: 100%;  }}#mainContent {  width: 900px;  float: left;}@media screen and (max-width: 1260px) {  #main-col {    width: 100%;    margin-right: -300px;  }}@media screen and (max-width: 900px) {  #main-col {    margin-right: 0;    float: none;  }}@media screen and (max-width: 1260px) {  #wrapper {    margin-right: 300px;  }}@media screen and (max-width: 900px) {  #wrapper {    margin-right: 0;  }}#header {  text-shadow: 0 0 1px #fff;  margin: 50px auto;  position: relative;  height: 60px;  color: #999;}#header a {  color: #999;}#header a:hover {  color: #258fb8;  text-decoration: none;}#header h1 {  font-weight: normal;  font-size: 30px;  line-height: 1;}#header h2 {  font-weight: normal;  font-size: 0.9em;  line-height: 1;  margin-top: 10px;  margin-left: 30px;}#header #navigator {  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;  line-height: 2.5em;  float: right;  position:relative;}#header #navigator ul {  list-style: none;}#header #navigator ul li {  float: left;  margin-left: 30px;}#header .blogStats {  position: absolute;  top:35px;  right: 0;  float: right;}.topicListFooter {  margin-bottom: 30px;  margin-right: 0 !important;}.topicListFooter a {  display: inline !important;  padding: 5px 10px;  background: #ddd;  color: #999;  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;  text-shadow: 0 0 1px #fff;}.topicListFooter a:hover {  background: #258fb8;  color: #fff;  text-decoration: none;  text-shadow: none;}.topicListFooter .prev:before {  content: '\f053';  padding-right: 10px;  font-family: FontAwesome;}.topicListFooter .next:after {  content: '\f054';  padding-left: 10px;  font-family: FontAwesome;}article {  -webkit-box-shadow: 1px 2px 3px #ddd;  box-shadow: 1px 2px 3px #ddd;  background: #fff;}article.page {  padding-left: 20px;}article.page .icon {  display: none;}.postIcon:before {  content: '\f016';}article.photo .icon:before {  content: '\f030';}article.link .icon:before {  content: '\f0c1';}article.link .title a:after {  content: '\f08e';  color: #999;  font: 12px FontAwesome;  padding-left: 10px;  vertical-align: super;}.dayTitle {  display: none;}.postTitle, .entrylistPosttitle {  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;  font-size: 1.8em;  padding: 20px 20px 15px 40px;  box-shadow: 1px 2px 0 #ddd;  background: #fff;}.entrylistPostSummary, .postCon, .postBody {  padding: 0 20px 15px 40px;  -webkit-box-shadow: 1px 2px 3px #ddd;  box-shadow: 0 2px 0 #ddd;  background: #fff;  position: relative;}.postDesc, .entrylistItemPostDesc {  margin-bottom: 50px;  padding: 10px 20px 15px 40px;  color: #999;  font-size: 0.9em;  line-height: 16px;  position: relative;  min-height: 16px;  box-shadow: 1px 0 0 #ddd;  box-shadow: 0 2px 3px #ddd;  background: #fff;}#blog-calendar {  display: none;}@media screen and (max-width: 600px) {  .postCon {    padding-left: 20px;  }}.postIcon {  height: 0px;  margin-right: 25px;  position: relative;  top: 25px;  left: 25px;  color: #258fb8;}@media screen and (max-width: 600px) {  article header .icon {    display: none;  }}.postIcon:before {  position: absolute;  font: 32px FontAwesome;  top: 0;  left: 0;  width: 32px;  text-align: center;}article header time {  color: #999;  font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;  margin-bottom: 5px;  display: block;  line-height: 1;}article header .title {  font-weight: normal;}article header .title a {  color: #444;}article header .title a:hover {  color: #258fb8;  text-decoration: none;}#cnblogs_post_body {  text-align: justify;  line-height: 1.6;}#cnblogs_post_body p,#cnblogs_post_body blockquote,#cnblogs_post_body ul,#cnblogs_post_body ol,#cnblogs_post_body dl,#cnblogs_post_body table,#cnblogs_post_body iframe,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6,#cnblogs_post_body .video-container {  margin-top: 15px;}#cnblogs_post_body blockquote {  border-top: 1px solid #ddd;  border-bottom: 1px solid #ddd;  font-style: italic;  font-size: 14px;  /*padding: 0 30px 15px;*/}#cnblogs_post_body blockquote footer {  border-top: none;  font-size: 0.8em;  line-height: 1;  margin: 20px 0 0;  padding-top: 0;}#cnblogs_post_body blockquote footer cite:before {  content: '—';  color: #ccc;  padding: 0 0.5em;}#cnblogs_post_body code,#cnblogs_post_body pre {  font-family: Monaco, Menlo, Consolas, Courier New, monospace;}#cnblogs_post_body code {  background: #eee;  color: #666;  padding: 0 5px;  margin: 0 2px;  font-size: 0.9em;  border: 1px solid #ddd;  -webkit-border-radius: 3px;  border-radius: 3px;}#cnblogs_post_body pre {  background: #eee;  overflow: auto;  padding: 7px 15px;  -webkit-border-radius: 2px;  border-radius: 2px;}#cnblogs_post_body pre code {  background: none;  padding: 0;  margin: 0;  border: none;  -webkit-border-radius: 0;  border-radius: 0;}#cnblogs_post_body ul ul,#cnblogs_post_body ol ul,#cnblogs_post_body dl ul,#cnblogs_post_body ul ol,#cnblogs_post_body ol ol,#cnblogs_post_body dl ol,#cnblogs_post_body ul dl,#cnblogs_post_body ol dl,#cnblogs_post_body dl dl {  margin-top: 0;}#cnblogs_post_body h1,#cnblogs_post_body h2 {  font-weight: bold;  border-bottom: 1px solid #ddd;  padding-bottom: 10px;  margin-top: 20px;}#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6 {  font-weight: normal;}.postBody img, .entrylistPostSummary img, .postCon img,.postBody video {  max-width: 100%;  height: auto;  border: none;}#cnblogs_post_body iframe {  border: none;}#cnblogs_post_body .caption {  display: block;  margin-top: 5px;  color: #999;  position: relative;  font-size: 0.9em;  padding-left: 25px;}#cnblogs_post_body .caption:before {  content: '\f040';  position: absolute;  font: 1.3em FontAwesome;  position: absolute;  left: 0;  top: 3px;}#cnblogs_post_body .video-container {  position: relative;  padding-bottom: 56.25%;  padding-top: 30px;  height: 0;  overflow: hidden;}#cnblogs_post_body .video-container iframe,#cnblogs_post_body .video-container object,#cnblogs_post_body .video-container embed {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  margin-top: 0;}#cnblogs_post_body .pullquote {  float: right;  border: none;  padding: 0;  margin: 1em 0 0.5em 1.5em;  text-align: left;  width: 45%;  font-size: 1.5em;}#blog-comments-placeholder, #comment_form {  padding: 20px;  background: #fff;  -webkit-box-shadow: 1px 2px 3px #ddd;  box-shadow: 1px 2px 3px #ddd;  margin-bottom: 50px;}.feedback_area_title {  margin-bottom: 15px;  font-size: 1.8em;}.feedbackItem {  border-bottom: 1px solid #CCC;  margin-bottom: 10px;  padding: 5px;  background: rgb(248, 248, 248);}.color_shine {background: rgb(226, 242, 255);}.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}#comment_form .title {  font-weight: normal;  margin-bottom: 15px;}#ad_under_post_holder {  display: none;}.entrylistTitle {  color: #999;  font-weight: normal;  margin-bottom: 30px;  text-shadow: 0 0 1px #fff;}.entrylistTitle:before {  font-family: FontAwesome;  content: '\f07b';  padding-right: 15px;}.archive {  -webkit-box-shadow: 1px 2px 3px #ddd;  box-shadow: 1px 2px 3px #ddd;  border-bottom: 1px solid #ddd;  margin-bottom: 50px;}.archive article {  -webkit-box-shadow: none;  box-shadow: none;}.archive article .post-content {  margin-bottom: 0;}#sideBar{  width: 270px;  line-height: 1.8em;  float: right;}@media screen and (max-width: 900px) {  #sideBar {    float: none;    width: 100%;  }}.catListLink, .catListMyTeams, .catListComment, .catListFeedback {  display: none;}.search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {  background: #fff;  -webkit-box-shadow: 1px 2px 3px #ddd;  box-shadow: 1px 2px 3px #ddd;  margin-bottom: 30px;  word-wrap: break-word;}#blog-sidecolumn h3, .newsItem h3 {  padding: 15px 20px;  font-size: 1em;  border-bottom: 1px solid #ddd;  font-weight: normal;}#blog-sidecolumn ul, .newsItem #blog-news {  font-size: 0.9em;  padding: 15px 20px;}#blog-sidecolumn ul,#blog-sidecolumn ol,#blog-sidecolumn dl {  list-style: none;}#blog-sidecolumn ul ul,#blog-sidecolumn ol ul,#blog-sidecolumn dl ul,#blog-sidecolumn ul ol,#blog-sidecolumn ol ol,#blog-sidecolumn dl ol,#blog-sidecolumn ul dl,#blog-sidecolumn ol dl,#blog-sidecolumn dl dl {  list-style: disc;  margin-left: 20px;}#q {  background: #fff;  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;  font-style: italic;  font-size: 1em;  padding: 10px 15px;  border: 1px solid #ddd;  width: 100%;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  color: #999;  height: 100%;}#q:focus {  color: #444;}/*隐藏搜索框中的无用组件*/.mySearch {  display: none;}#sideBar .tag small {  margin-left: 15px;  color: #999;}#sideBar .tag small:before {  content: '(';}#sideBar .tag small:after {  content: ')';}#sideBar .twitter li {  border-bottom: 1px solid #ddd;  padding: 15px 20px;  font-size: 0.9em;}#sideBar .twitter li:last-of-type {  border-bottom: none;}#sideBar .twitter small {  display: block;  margin-top: 10px;  color: #999;  line-height: 1;}#sideBar .tagcloud .entry {  padding-right: 5px;}#sideBar .tagcloud a {  margin-right: 10px;  display: inline-block;}#footer {  color: #999;  margin-bottom: 50px;  font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;  text-shadow: 0 0 1px #fff;}.entry .gist {  background: #eee;  border: 1px solid #ddd;  margin-top: 15px;  padding: 7px 15px;  -webkit-border-radius: 2px;  border-radius: 2px;  text-shadow: 0 0 1px #fff;  line-height: 1.6;  overflow: auto;  color: #666;}.entry .gist .gist-file {  border: none;  font-family: inherit;  margin: 0;  font-size: 0.9em;}.entry .gist .gist-file .gist-data {  background: none;  border-bottom: none;}.entry .gist .gist-file .gist-data pre {  padding: 0 !important;  font-family: Monaco, Menlo, Consolas, Courier New, monospace;}.entry .gist .gist-file .gist-meta {  background: none;  color: #999;  margin-top: 5px;  padding: 0;  text-shadow: 0 0 1px #fff;  font-size: 100%;}.entry .gist .gist-file .gist-meta a {  color: #258fb8;}.entry .gist .gist-file .gist-meta a:visited {  color: #258fb8;}figure.highlight {  background: #eee;  border: 1px solid #ddd;  margin-top: 15px;  padding: 7px 15px;  -webkit-border-radius: 2px;  border-radius: 2px;  text-shadow: 0 0 1px #fff;  line-height: 1.6;  overflow: auto;  position: relative;  font-size: 0.9em;}figure.highlight figcaption {  color: #999;  margin-bottom: 5px;  text-shadow: 0 0 1px #fff;}figure.highlight figcaption a {  position: absolute;  right: 15px;}figure.highlight pre {  border: none;  padding: 0;  margin: 0;}figure.highlight table {  margin-top: 0;  border-spacing: 0;}figure.highlight .gutter {  color: #999;  padding: 7px 10px 7px 5px !important;  border-right: 1px solid #ddd;  text-align: right;}figure.highlight .code {  padding: 7px 7px 7px 10px !important;  border-left: 1px solid #fff;  color: #666;}pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc {  color: #93a1a1;  font-style: italic;}pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {  color: #859900;}pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {  color: #2aa198;}pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl,pre .literal,pre .id {  color: #268bd2;}pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {  color: #b58900;}pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title {  color: #cb4b16;}pre .deletion {  color: #dc322f;}.feedbackListSubtitle { position: relative;}.feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;}.cnblogs_code_toolbar {display: none;}#cnblogs_post_body {overflow: hidden;}#cnblogs_post_body ol { padding-left: 40px;}#cnblogs_post_body ul { margin-left: 35px;}.fixedReadRank { position: fixed; top: 20px; width: 270px; }.fixedRecRank { position: fixed; top: 360px; width: 270px; }figure.highlight { margin-top: 0; padding: 0;}figure table {width: 100%; margin: 0 !important;}#cnblogs_post_body pre { padding: 0; }#cnblogs_post_body th, #cnblogs_post_body td { padding: 0; }.cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;}.cnblogs_code th {border: 1px solid silver; padding: 3px;}.cnblogs_code { padding: 0;}/*评论标题*/.feedback_area_title {    padding:10px;    font-size:24px;    font-weight:bold;    color:#55895B;    border-bottom:solid 6px #55895B;}.feedbackListSubtitle {    font-size:12px;    color:#888;}.feedbackListSubtitle a {    color:#888;}.comment_quote {    background:#FCFAAC;    padding:15px;    border:1px solid #CCC;}#commentform_title {    color:#666;    background-image:none;    background-repeat:no-repeat;    margin-bottom:10px;    padding:10px 20px 10px 10px;    font-size:24px;    font-weight:bold;    border-bottom:solid 6px #EEEEEE;}/*评论框*/#comment_form {    margin:10px 0;    padding:0;}.commentform {    margin:10px 0;    padding:10px 20px;    background:#fff;}/*评论输入域*/#tbCommentBody {    font-family:'MIcrosoft Yahei';    margin-top:10px;    width:850px;    max-width:850px;    min-width:850px;    background:white;    color:#333;    border:2px solid #fff;    box-shadow:inset 0 0 8px #aaa;    padding:10px;    height:120px;    font-size:14px;    min-height:120px;}/*评论条目*/.feedbackItem {    font-size:14px;    line-height:24px;    margin:10px 0;    padding:20px;    background:#F2F2F2;    box-shadow:0 0 5px #aaa;}.feedbackListSubtitle {    font-weight:normal;}#green_channel {    text:align:right;    background:#eeeeee;    padding-left:0px;    font-weight:normal;    font-size:15px;    width:740px;    border:none;    color:#fff;    padding:20px;    border-radius:4px;}#blog-calendar {   display: none !important;}#blog-comments-placeholder,.catListImageCategory {   display:none;}#cnblogs_post_body img {   max-width: 800px;}#blog-news {    text-align: center;}#blog-news .img_avatar {   border: 1px solid #ddd;   padding: 2px;}

自动添加目录

添加js脚本支持, 需要申请权限(博客园后台->''博客侧边栏公告''有申请入口), 然后在页脚代码中添加:

修改icon

在页脚代码中添加:

$(function(){    ChangeIcon();});function ChangeIcon() {    var linkObject = document.createElement('link');    linkObject.rel = "shortcut icon";    linkObject.href = "https://s1.ax1x.com/2018/06/16/Cvll8I.png";    document.getElementsByTagName("head")[0].appendChild(linkObject);}

页首添加github链接

在页首html代码中添加:

效果如图:

底部添加返回顶部小火箭

在页首html代码中添加:

效果如图:

文章页添加推荐/反对按钮

在博客园后台 -> 页面定制 CSS 代码中添加:

#div_digg{  position:fixed;  bottom:5px;  width:140px;  right:390px;  border:2px solid #258fb8;  padding:10px;  background-color:#fff;  border-radius:5px 5px 5px 5px !important;  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);}

效果如图: