我的博客園皮膚

壹. 前

相比較其他博客網站，博客園深度定制皮膚讓我很喜歡，而站內推薦的皮膚鮮有使用滿意的，所以我決定也來做一款。

平時工作需要，基本都是抽空余時間來，所以這款皮膚持續時間有些長了。制作過程中比較讓人尷尬的是大概做到了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。

額，應該不需要轉載這篇文章吧，感覺也沒什么用處😄。