壹. 前
相比較其他博客網站，博客園深度定制皮膚讓我很喜歡，而站內推薦的皮膚鮮有使用滿意的，所以我決定也來做一款，
平時作業需要，基本都是抽空余時間來，所以這款皮膚持續時間有些長了，制作程序中比較讓人尷尬的是大概做到了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 >
<div >
<div ></div>
</div>
</div>
<div 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 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，
額，應該不需要轉載這篇文章吧，感覺也沒什么用處??，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100500.html
標籤：Html/Css
下一篇：加載完后執行