博客园皮肤Cnblogs-Theme-SimpleMemory
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地址,改成你自己的。