1.先上圖看效果
部署文檔地址：https://github.com/wangyang0210/Cnblogs-Theme-BNDong
原作者github地址：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory.git
頁面定制CSS代碼 ---> /css/base.min.css(禁用模板默認CSS)
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/reasonzzy/base.min.css"/>
博客側邊欄公告 ---> /html/sidebar.html(需要開啟JS權限)
<!-- menu html --> <div class="container"> <div class="menu-wrap optiscroll" id="menuWrap" style="display:none"> <nav class="menu"> <!-- 個人簡介 --> <div class="introduce-box"> <div class="introduce-head"> <div class="introduce-via" id="menuBlogAvatar"></div> </div> <div id="introduce"></div> </div> <!-- 導航 --> <div class="nav-title"></div> <div class="icon-list"> <ul> <li><a href="https://www.cnblogs.com/reasonzzy/" target="_self">首頁</a></li> <li><a href="https://msg.cnblogs.com/send/reasonzzy" target="_blank">聯系</a></li> <li><a href="https://www.cnblogs.com/reasonzzy/rss" target="_blank">訂閱</a></li> <li><a href="https://i.cnblogs.com/" target="_blank">管理</a></li> <li><a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" target="_blank">添加隨筆</a></li> <li><a href="https://github.com/Reason0701" target="_blank">GitHub</a></li> <li><a href="https://www.cnblogs.com/" target="_blank">CNBlogs</a></li> </ul> </div> <!-- 訪客來源統計 --> <div class="m-list-title" style="display: block;"><span>訪客來源</span></div> <a href='https://clustrmaps.com/site/1ahcn' title='Visit tracker'> <img src='//clustrmaps.com/map_v2.png?cl=ffffff&w=268&t=t&d=ymyD9S6Gxrh7BknYYgxQi8uzm-aKKsJUuRZX0vBVlZQ&co=000000' /> </a> <!-- 最新隨筆 --> <div class="m-list-title"><span>最新隨筆</span></div> <div class="m-icon-list" id="sb-sidebarRecentposts"></div> <!-- 我的標簽 --> <div class="m-list-title"><span>我的標簽</span></div> <div class="m-icon-list" id="sb-toptags"></div> <!-- 隨筆分類 --> <div class="m-list-title"><span>隨筆分類</span></div> <div class="m-icon-list" id="sb-classify"></div> <!-- 隨筆檔案 --> <div class="m-list-title"><span>隨筆檔案</span></div> <div class="m-icon-list" id="sb-record"></div> <!-- 閱讀排行 --> <div class="m-list-title"><span>閱讀排行</span></div> <div class="m-icon-list" id="sb-topview"></div> <!-- 推薦排行 --> <div class="m-list-title"><span>推薦排行</span></div> <div class="m-icon-list" id="sb-topDiggPosts"></div> <!-- 自定義列表 --> <span id="menuCustomList"></span> </nav> <button class="close-button" id="close-button">Close Menu</button> <div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none"> <path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/> </svg> </div> </div> <button class="menu-button" id="open-button">MENU</button> <div class="content-wrap" id="content-wrap"></div><!-- /content-wrap --> </div> <!-- menu html end --> <!-- banner html --> <div class="main-header"> <canvas id="notHomeTopCanvas" style=" position: absolute;margin: auto;width: 100%;height: 100%;top: 0;bottom: 0;left: 0;right: 0;"></canvas> <div class="vertical"> <div class="main-header-content inner"> <link href="https://fonts.googleapis.com/css?family=Playball" rel="stylesheet"> <h1 class="page-title" style="font-family: 'Playball', cursive;" id="homeTopTitle"></h1> <h2 class="page-description" id="hitokoto"></h2> <h3 class="page-author" id="hitokotoAuthor"></h3> </div> </div> <a class="scroll-down" href="javascript:void(0);" data-offset="-45"> <span class="hidden">Scroll Down</span> <i class="scroll-down-icon iconfont icon-fanhui"></i> </a> </div> <!-- banner html end --> <!-- global var --> <script type="text/javascript"> //博客全局配置 window.cnblogsConfig = { // ---- GitHub文件源配置 ---- GhUserName: 'wangyang0210', // GitHub用戶名(不是昵稱)，注意大小寫 GhRepositories: 'Cnblogs-Theme-BNDong', // GitHub主題倉庫名稱 GhVersions : '7230170d646de3ac13f94af7a4f27a51d1d246cb', // GitHub發布版本或提交哈希值，根據版本加載代碼，我有時候會提交代碼進行調試，大家最好加載我倉庫代碼此處的版本 https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/commits/master // ---- 基礎信息配置 ----custom blogUser : "。思索", // 博主名稱，文章后綴和主頁圖片上都會使用此名稱 blogAvatar : "https://blog-static.cnblogs.com/files/reasonzzy/qiyuan_avatar.gif", // 用戶頭像URL blogStartDate : "2019-5-2", // 入園時間，年-月-日，入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間 // ---- 菜單配置 ---- menuCustomList: { // 自定義菜單數據，顯示在正常數據下方 "title1": { // 標題 "data": [ // 列表數據 ['列表', '鏈接'] ['我的博客1', 'https://www.cnblogs.com/reasonzzy'], ['我的博客2', 'https://www.cnblogs.com/reasonzzy'], ['我的博客3', 'https://www.cnblogs.com/reasonzzy'], ['我的博客4', 'https://www.cnblogs.com/reasonzzy'], ['我的博客5', 'https://www.cnblogs.com/reasonzzy'], ], "icon": "icon-brush_fill" // 配置圖標，參考文檔：本博客字體圖標庫及其更換方法 }, "title2": { // 標題 "data": [ // 列表數據 ['列表', '鏈接'] ['我的博客6', 'https://www.cnblogs.com/reasonzzy'], ['我的博客7', 'https://www.cnblogs.com/reasonzzy'], ['我的博客8', 'https://www.cnblogs.com/reasonzzy'], ['我的博客9', 'https://www.cnblogs.com/reasonzzy'], ['我的博客10', 'https://www.cnblogs.com/reasonzzy'], ], "icon": "icon-brush_fill" // 配置圖標，參考文檔：本博客字體圖標庫及其更換方法 }, }, // ---- 網站配置 ---- webpageTitleOnblur : "(◍´꒳`◍) Hi, MyFriend", // 當前頁失去焦點，頁面title顯示文字 webpageTitleOnblurTimeOut : 500, // 當前頁失去焦點，頁面title變化，延時時間，單位毫秒 webpageTitleFocus : "(*´∇｀*) 歡迎回來！", // 當前頁獲取焦點，頁面title顯示文字，顯示后延時恢復原title webpageTitleFocusTimeOut : 1000, // 當前頁獲取焦點，頁面title變化，延時時間，單位毫秒 webpageIcon : "https://blog-static.cnblogs.com/files/reasonzzy/logo.gif", // 網站圖標 // ---- 進度條配置 ---- progressBar: { id : 'top-progress-bar', color : '#77b6ff', height : '2px', duration: 0.2 }, // ---- Loading配置 ---- loading: { rebound: { tension: 16, friction: 5 }, spinner: { id: 'spinner', radius: 90, sides: 3, depth: 4, colors: { background: '#f0f0f0', stroke: '#272633', base: null, child: '#272633' }, alwaysForward: true, // When false the spring will reverse normally. restAt: 0.5, // A number from 0.1 to 0.9 || null for full rotation renderBase: false } }, // ---- 頁面動效配置 ---- homeTopAnimationRendered: true, // true || false ,是否渲染主頁頭圖動效 homeTopAnimation: { // 主頁頭圖動效設置 radius: 15, density: 0.2, color: 'rgba(255,255,255, .2)', // 顏色設置，“random” 為隨機顏色 clearOffset: 0.3 }, essayTopAnimationRendered: true, // true || false ,是否渲染隨筆頁頭圖動效 essayTopAnimation: { // 隨筆頁頭圖動效設置 triW : 14, triH : 20, neighbours : ["side", "top", "bottom"], speedTrailAppear : .1, speedTrailDisappear : .1, speedTriOpen : 1, trailMaxLength : 30, trailIntervalCreation : 100, delayBeforeDisappear : 2, colors: [ '#96EDA6', '#5BC6A9', '#38668C', '#374D84', '#BED5CB', '#62ADC6', '#8EE5DE', '#304E7B' ] }, bgAnimationRendered: true, // true || false ,是否渲染背景動效 backgroundAnimation : { // 背景動效設置 colorSaturation: "60%", colorBrightness: "50%", colorAlpha: 0.5, colorCycleSpeed: 5, verticalPosition: "random", horizontalSpeed: 200, ribbonCount: 3, strokeSize: 0, parallaxAmount: -0.2, animateSections: true }, // ---- 主頁配置 ---- homeTopImg : [ // 主頁圖片Url，推薦尺寸>= 1920*1080，支持多張，每次刷新隨機設置一張 "http://cache.wangyangyang.vip/hello.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-165678.jpg", "http://cache.wangyangyang.vip/wallhaven-694674.jpg" ], homeBannerText: "", // 主頁頭圖上的標語，設置此選項會固定顯示文字，默認為空，自動獲取一句。 // ---- 隨筆頁配置 ---- essayTopImg: [ // 隨筆頁圖片Url，支持多張，每次刷新隨機設置一張 "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-569548.png", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-651235.png" ], essayCodeHighlightingType: 'cnblogs', // 代碼主題插件類型：cnblogs || highlightjs || prettify essayCodeHighlighting: 'cnblogs', // 代碼高亮主題，具體主題參考文檔 essaySuffix:{ // 隨筆后綴處配置 aboutHtml : '', // 關於博主，不配置使用默認 copyrightHtml: '', // 版權聲明，不配置使用默認 supportHtml : '' // 聲援博主，不配置使用默認 }, // ---- 頁腳配置 ---- bottomBlogroll: [ // 友情鏈接，[[鏈接名,鏈接]....] ["程序人生", 'http://anrs.net/'], ["申請坑位", 'https://msg.cnblogs.com/send/reasonzzy'], ["申請坑位", 'https://msg.cnblogs.com/send/reasonzzy'], ["申請坑位", 'https://msg.cnblogs.com/send/reasonzzy'], ["申請坑位", 'https://msg.cnblogs.com/send/reasonzzy'], ], bottomText: { // 頁腳標語 icon: "❤️", left: "學無止境", right: "謙卑而行" }, // ---- 控制台輸出 ---- consoleList: [ ['wangyang0210 CNBlogs', 'https://www.cnblogs.com/reasonzzy'], ['wangyang0210 GitHub', 'https://github.com/Reason0701'], ['wangyang0210 Email', '1434557977@qq.com'] ], }; // start cache $.ajaxSetup({cache: true}); // load loadingJs $.getScript(getJsDelivrUrl('loading.js'), function () { // Loading start pageLoading.initRebound(); pageLoading.initSpinner(); pageLoading.spinner.init(pageLoading.spring, true); $.getScript(getJsDelivrUrl('jquery.mCustomScrollbar.min.js'), function () { $.getScript(getJsDelivrUrl('require.min.js'), function () { $.getScript(getJsDelivrUrl('config.js'), function () { var staticResource = [ 'optiscroll', 'ToProgress', 'rotate', 'snapSvg', 'classie', 'main4', 'tools']; require(staticResource, function() { require(['base'], function() { (new Base).init(); }); }); }); }); }); }); // get file url function getJsDelivrUrl(file, directory) { file = setFileNameMin(file, directory); return 'https://cdn.jsdelivr.net/gh/'+(window.cnblogsConfig.GhUserName)+'/'+(window.cnblogsConfig.GhRepositories)+'@'+(window.cnblogsConfig.GhVersions)+'/' + (file ? file : ''); } // optimization file name function setFileNameMin(file, directory) { if (typeof file == 'undefined') return ''; var suffix = null,fileArr = file.split('.'); if (fileArr.length > 0 && $.inArray(fileArr[(fileArr.length -1)], ['js', 'css']) != -1) {suffix = fileArr.pop(); directory = suffix;} file.search('.min') == -1 && fileArr.push('min'); suffix != null && fileArr.push(suffix); return (typeof directory !== 'undefined' ? (directory + '/' + fileArr.join('.')) : (fileArr.join('.'))); } </script> <!-- global var end -->
頁首Html代碼 ---> /html/pageHeading.html
<!-- Loading 底層遮罩 --> <div id='loading'></div>
頁腳Html代碼 ---> /html/pageFooter.html
<!-- 滾動進度 -->
<div id="bottomProgressBar"></div>
<!-- 音樂播放器 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-id="316722029" data-lrctype="0" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<!-- 右下角菜單 -->
<div id="rightMenu"></div>
主要修改的是js代碼中你的首頁跟github地址，改成你自己的。