主模版
模版教程地址
- 默認大家都已申請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.1.4'的改成最新版本即可（不懂去看具體教程）
頁腳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>
復制正文文字時自動加版權
Language: HTML
<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
{
var selected = window.getSelection();
var selectedText = selected.toString().replace(/\n/g, '<br>'); // Solve the line breaks conversion issue 處理換行轉換的問題
var copyFooter = '<br>---------------------<br>著作權歸作者所有。<br>'
+ '商業轉載請聯系作者獲得授權，非商業轉載請注明出處。<br>'
+ '作者：loading_hlb<br> 源地址：' + document.location.href
+ '<br>來源：博客園cnblogs<br>© 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！';
var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
$('body').append(copyHolder);
selected.selectAllChildren( copyHolder[0] );
window.setTimeout(function() {
copyHolder.remove();
},0);
});
</script>
禁止復制
Language: CSS
/* 禁止頁面，選中 復制 */
html,body {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
壁紙
網址
參考
- 【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/#/
- 【4】前端小白也能快速學會的博客園博客美化全攻略[附源碼]：https://www.cnblogs.com/enjoy233/p/cnblogs_beautify_for_beginners.html