部落格園美化面板
阿新 • • 發佈:2021-08-15
部落格園美化面板
主模版
模版教程地址
- 預設大家都已申請JS許可權了
主要步驟
選擇版本
- 現已更新到v2階段,但比較喜歡v1,其中保留了我最喜歡的功能的最新版本是v1.2.9
獲取需要使用的版本
具體步驟看模版教程地址的獲取需要使用的版本
獲取需要使用的程式碼
- CSS程式碼位置:/src/style/base.min.css 拷貝此檔案程式碼至頁面定製CSS程式碼文字框處
部落格設定請使用壓縮版本,直接使用 /src/style/base.css 會字元超限!用base.min.css不要用base.css
修改版本(僅針對於v1)
頁面定製CSS程式碼
- /src/style/base.min.css 拷貝此檔案程式碼至頁面定製CSS程式碼文字框處
部落格側邊欄公告
- 將兩個涉及類似'v1.2.9'的改成最新版本即可(不懂去看具體教程)
頁尾HTML程式碼
音樂
<!--音樂,只在PC端寬度>1000px時顯示--> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/APlayer.min.css"> <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="720102620" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div> <script src="https://blog-static.cnblogs.com/files/miluluyo/APlayer.min.js"></script> <script src="https://blog-static.cnblogs.com/files/miluluyo/Meting.min.js"></script>
頁尾程式碼裡有個音樂區域,有個data-id,你把這個id換成你網易雲歌單的id,id獲取參考這個連結: https://jingyan.baidu.com/article/ce09321bb8f0db2bff858f8b.html
音樂自動播放
<script> let ref = setInterval(function(){ isaplay(); },2000); function isaplay(){ if($(".aplayer-play").length == 1){ $(".aplayer-play").click() clearInterval(ref); } } </script>
背景動畫
<!-- 背景動畫 -->
<canvas id="c_n9" width="1920" height="990"
style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/canvas-nest.min.js"></script>
<script type="text/javascript" language="javascript">
//Setting ico for cnblogs
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/blog_logo.gif";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
桌布
網址
參考
- 【1】可愛的部落格園樣式美化、自定義部落格園主題樣式:https://www.cnblogs.com/miluluyo/p/cute-cnblogs.html
- 【2】cute-cnblogs 自定義部落格園樣式美化二期來啦~:https://www.cnblogs.com/miluluyo/p/cute-cnblogs2.html
- 【3】SimpleMemory模板:https://www.dbnuo.com/Cnblogs-Theme-SimpleMemory/docs/v2/#/