博客园美化

Posted 2021-01-17 ak-b

闲着没事对博客皮肤做了些美化，主要是css，js写了些小功能
css部分：整体采用蓝色简洁风，有些部分我不用，所以没优化，比如标签，日历，相册，头部固定在顶部，侧边栏固定250px;右边内容主体自适应，支持，收藏和关注按钮固定于右下角，评论区做了些美化，小于767px时隐藏侧边栏，头部右端出现菜单按钮，点击可显示或隐藏侧边栏
js部分：为markdown的代码块添加了折叠按钮，返回顶部按钮根据滚动距离做了显示与隐藏判断，后期准备写一下生成侧边栏文章目录

css

body,
h1,
h2,
h3,
ul,
#profile_block {
  margin: 0;
  padding: 0
}

li {
  list-style: none
}

a {
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  color: #3086f2
}

a:hover {
  color: #ef6b6b
}

a[id|='a_comment'] {
  color: red
}

input[type='button'],
button,
.catListPostCategory li a,
a[href='#top'],
#main .comment_actions a,
.comment_digg,
.comment_bury,
span.comment_date+a {
  border: 0;
  outline: 0;
  padding: 2px 12px;
  background: #409eff;
  border-radius: 2px;
  color: #fff !important;
  font-size: 12px;
  -webkit-box-shadow: 0 1px 3px 0 #bfd1e8;
  box-shadow: 0 1px 3px 0 #bfd1e8;
  cursor: pointer
}

input[type='button']:hover,
button:hover,
.catListPostCategory li a:hover,
a[href='#top']:hover,
#main .comment_actions a:hover,
.comment_digg:hover,
.comment_bury:hover {
  -webkit-box-shadow: 0 3px 5px 1px #bfd1e8;
  box-shadow: 0 3px 5px 1px #bfd1e8;
  opacity: .9
}

body {
  background: #edf4f6;
  font: 14px PingFangSC, 'helvetica neue', 'hiragino sans gb', arial, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif !important;
  line-height: 1.5;
  color: #333
}

a[name='top'] {
  position: absolute;
  top: 0
}

.swit,
.blogStats,
a[href='#top'],
#blogTitle,
#lnkBlogLogo,
.entrylist>p,
.topicListFooter {
  display: none
}

#home {
  margin: 50px auto 0;
  max-width: 1200px
}

#header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #398dee;
  -webkit-box-shadow: 0 2px 2px 0 #b9eee4;
  box-shadow: 0 2px 2px 0 #b9cce4
}

#navigator {
  margin: 0 auto;
  height: 40px;
  max-width: 1200px
}

#navList>li {
  float: left
}

#navList>li a {
  line-height: 40px;
  margin-right: 33px;
  color: rgba(255, 255, 255, 0.8)
}

#navList>li a:hover {
  color: #fff
}

.swit {
  float: right;
  padding: 12px 0;
}

.swit div {
  margin: 2px;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, .8)
}

.swit:hover div {
  background: #fff;
}

#main {
  position: relative;
  padding-left: 260px;
}

.day,
.entrylist {
  position: relative;
  margin-bottom: 10px;
  border-radius: 2px;
  min-height: 25px;
  padding: 0 20px 2px;
  background: #fff;
  -webkit-box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.05)
}

#mainContent .dayTitle a,
.entrylistTitle {
  position: absolute;
  top: 3px;
  right: 12px;
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
  color: #666
}

.postTitle a,
.entrylistPosttitle a {
  display: inline-block;
  margin: 7px 0 2px;
  font-size: 1.1em;
  font-weight: 600
}

.c_b_p_desc {
  color: #666
}

.day>.postDesc,
.entrylistItemPostDesc {
  padding: 3px 0 5px;
  text-align: right
}

.postSeparator {
  border-bottom: 1px dashed #ccc
}

#sideBar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 888;
  width: 210px;
  padding: 5px 20px 7px;
  background: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05)
}

#sideBar h3.catListTitle {
  font-size: 14px;
  margin-top: 3px
}

#sideBar .input_my_zzk {
  border: 0;
  border-bottom: 1px solid #ccc;
  width: 146px !important;
}

.catListPostCategory ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 6px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.catListPostCategory li a {
  margin: 0 12px 8px 0;
  display: block
}

.catListPostCategory li:nth-child(2n) a {
  background: #ec7878
}

#post_detail,
#comment_form {
  border-radius: 2px;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05)
}

#cb_post_title_url {
  display: inline-block;
  font-size: 18px;
  color: #333;
  font-weight: bold
}

.post>.postDesc {
  border-bottom: 1px solid #eee;
  padding: 0 14px 3px
}

#cnblogs_post_body code {
  font: 14px/1.5 Consolas, Menlo, Monaco, "Courier New", monospace !important;
  color: #525252;
  border: none !important;
  background: #f6f8fa !important;
  margin: 4px
}

pre {
  background: #f6f8fa
}

.hljs-comment,
.hljs-quote {
  color: #abb8c6
}

.hljs-variable,
.hljs-template-variable,
.hljs-regexp,
.hljs-deletion,
.hljs-keyword,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-attr {
  color: #e38800
}

.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #8d44eb
}

.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-attr {
  color: #e77600
}

.hljs-attribute {
  color: #108de8
}

.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #2aab51
}

.hljs-subst,
.hljs-number {
  color: #ed6e55
}

.hljs-title,
.hljs-section,
.hljs-name {
  color: #fa3d58
}

.hljs {
  display: block;
  overflow-x: auto
}

.hljs-emphasis {
  font-style: italic
}

.hljs-strong {
  font-weight: bold
}

#BlogPostCategory {
  position: absolute;
  top: 12px;
  right: 20px
}

#green_channel {
  margin: 0;
  border: 0;
  width: 70px;
  position: fixed;
  bottom: 0;
  right: calc(50% - 700px)
}

#green_channel>a {
  font-size: 12px;
  display: block;
  margin-bottom: 8px;
  padding: 2px 5px;
  border-radius: 2px
}

#green_channel>a:nth-child(n+4) {
  display: none
}

a[href='#top'] {
  position: fixed;
  bottom: 20%;
  right: calc(50% - 693px)
}

#blog-comments-placeholder {
  padding: 0 20px;
  background: #fff
}

.feedbackItem {
  margin-top: 12px;
  border-radius: 6px;
  padding: 10px 14px;
  background: #f6f8fa
}

.feedbackManage {
  margin-bottom: 8px
}

.feedbackCon {
  margin-top: 8px
}

#main .comment_actions a,
.comment_digg,
.comment_bury {
  margin-right: 12px
}

.comment_digg {
  background: #67c23a
}

.comment_bury {
  background: #f56c6c
}

a.layer {
  font-weight: bold;
  margin-right: 12px
}

span.comment_date+a {
  background: #9291ea;
  padding: 2px 12px
}

#footer {
  padding: 20px;
  text-align: center
}

@media only screen and (max-width:767px) {
  .swit {
    display: block;
  }

  #home {
    max-width: 100%
  }

  #navigator {
    max-width: 100%;
    padding: 0 12px;
  }

  #main {
    padding: 0 !important;
  }

  #sideBar {
    display: none;position:fixed;top:50px;
    -webkit-box-shadow: 3px 3px 3px 1px #999;
    box-shadow: 3px 3px 3px 1px #999
  }

  .day,
  .entrylist,
  #post_detail,
  #comment_form,
  #blog-comments-placeholder {
    padding: 0 15px;
  }

  div#comment_form {
    margin-left: 0;
    padding: 0 15px
  }

  a[href='#top'],
  .diggit {
    position: static
  }
}

js

var post = $('.post');
if (post) {
  $('.post>.postTitle').after($('.post>.postDesc'));
  var tog = $('<button>toggle</button>');
  tog.click(function () {
    $(this).siblings('code').toggle()
  })
  post.find('pre').prepend(tog);
}
var swit = $('<div class="swit"><div></div><div></div><div></div></div>')
$('#navigator').append(swit)
swit.click(function () {
  $('#sideBar').toggle()
})
window.onscroll = function () {
  if ($('a[href="#top"]').css('position') === 'static') return;
  var y = window.scrollY;
  if (y >= 500) {
    $('a[href="#top"]').show()
  } else {
    $('a[href="#top"]').hide()
  }
}