我的博客园皮肤

壹. 前

相比较其他博客网站，博客园深度定制皮肤让我很喜欢，而站内推荐的皮肤鲜有使用满意的，所以我决定也来做一款。

平时工作需要，基本都是抽空余时间来，所以这款皮肤持续时间有些长了。制作过程中比较让人尴尬的是大概做到了40%左右，发现了一个家伙（非贬义）制作的皮肤比我优秀多，想着干脆偷懒直接用吧，但是半途而废显然不太好，所以紧赶慢赶，终于在 2019/11/21 晚上制作了pc端（额，适配手机的代码还没有搞定😅），赶紧贴出来炫耀一波。

贰. 效果

叁. 使用

Note: 兼容主流浏览器(IE:都他妈别看我啊😡)，如果对IE要求比较高，慎用。

选择Custom模板，在博客的设置选项粘贴资源中的代码即可。

资源 2020/03/22

• style
• script：主要为了兼容手机模式，如不需要可忽略，写法见更新日志(2019/11/25)

肆. 定制

项目资源在github上，可拉取定制，使用scss编写。

本网站风格非文中所提皮肤，项目在pro分支上，属于个人定制，若喜欢可自行尝鲜，这里不做任何介绍。

伍. 小问题

• 关于

  这玩意位置让我很头疼，我决定隐藏，看不到心不烦。当然，展示出来也是可以的，但是需要自己配置了。

• 底部的广告

  想着弄的博客干净一些，我就把广告隐藏了，如果必须放出广告位，还请私信我，我会及时修改。

  如果让我给设计下排版布局那真是非常乐意哈，一直想自己做个模板，奈何找不到入口😅。

陆. 结

放一些不错的博皮链接，非广告，侵删。

• 作者：GShang 【就是这位，很牛逼】
  https://www.cnblogs.com/gshang/p/11747824.html（基础款）
  https://www.cnblogs.com/gshang/p/11748135.html（高级款）

• 作者：BNDong
  https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

柒. 更新日志

2020/05/29

• [修订]文章中错别字，语义不通顺问题
• [移除]文章的标签web与前端

2020/03/22

• [修复]适配了当前博客园，主要是针对评论样式的调整（贰. 效果最后一张图）
• [修复]在一些浏览器上顶部导航间隔异常
• [修复]回到顶部和刷新页面按钮间隔异常
• [新增]手机模式下的底部背景，用于点击空白处可隐藏侧边栏

2019/11/25

• [新增]适配了移动端（其实就是隐藏了侧边栏而已😂），如不需要可忽略
• [新增]回到顶部

将以下代码放入合适的位置，推荐放入到页首 HTML 代码：

<div class="nav__toggle [ hamburger hamburger--squeeze ]">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

<div class="scroll-top" title="回到顶部">
  <svg viewBox="0 0 1024 1024" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">
    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path> 
  </svg>
</div>

<script>
(function (window, $, document, undefined) {
  if (typeof $ == undefined) return

  var page = {
    cache: function () {
      page.els = {}

      page.els.$window = $(window)
      page.els.$body = $('body')
      page.els.$top = $('.scroll-top')

      $('body').append(page.els.$sidemask = $('<div class="backmask nav__mask" style="display:none"/>'))
    },

    init: function () {
      page.cache()
      page.on_resize()
      page.on_scroll()
      page.detectMobile()
      page.scrollToTop()
      page.collapseSidebar()
    },

    on_resize: function () {
      page.els.$window.on('resize', function () {
        page.detectMobile()
      }).resize()
    },

    on_scroll: function () {
      page.els.$window.on('scroll', function () {
        if (page.els.$window.scrollTop() > 120) {
          $('.scroll-top').fadeIn()
        } else {
          $('.scroll-top').fadeOut()
        }
      })
    },

    detectMobile: function () {
      page.els.$body.removeClass('is-side-open')
      $('.nav__toggle').removeClass('is-active')
      page.els.$sidemask.hide();
    },

    collapseSidebar: function () {
      $('.nav__toggle').on('click', function () {
        $('.nav__toggle').toggleClass('is-active')

        if ($('.nav__toggle').hasClass('is-active')) {
          page.els.$body.addClass('is-side-open')
          page.els.$sidemask.show()
        } else {
          page.els.$body.removeClass('is-side-open')
          page.els.$sidemask.hide()
        }
      })

      page.els.$sidemask.on('click', function () {
        page.detectMobile()
      })
    },

    scrollToTop: function () {
      $('#comment_nav').find('a[href^="#top"]').hide()
      $('.scroll-top').click(function () {
        $('html, body').animate({
          scrollTop: 0
        }, 300)
        return false
      })
    }
  }

  $(document).ready(page.init())

})(window, jQuery, document)
</script>

捌. 附

本文乃原创，转载请注明原文地址：https://www.cnblogs.com/blackcat/p/11903805.html。

额，应该不需要转载这篇文章吧，感觉也没什么用处😄。