博客园SimpleMemory皮肤的页面美化--感谢BNDong大佬
本博客的博皮样式设计者是BNDong大神,在此表示衷心的感谢!为了让更多人的博客园更加的美观大方,本人特此参考设计者BNDong关于博客样式的文章,写了这更加通俗易懂的文章,让更多喜欢这博客样式的人,可以应用此博客样式。
2 入门准备
2.1 安装配置
本主题需要JS权限,没有的请先申请权限。
2.2 后台配置
博客园后台设置
2.3 选项配置
选项页面:
2.4 确定使用的版本
选择版本 下载对应的ZIP压缩包
、
3 博客设置
3.1 设置博客皮肤
博客皮肤:
SimpleMemory
3.2 设置页面定制CSS
这里拿最新的v1.3.3版本为例子,使用v1.3.3 base.min.css 拷贝此文件代码至页面定制CSS代码文本框处。
3.3 禁用模板默认CSS
选中页面定制CSS代码文本框下面的禁用模板默认CSS。
3.4 设置博客侧边公告栏
<script type="text/javascript"> window.cnblogsConfig = { GhVersions : 'v1.3.3', // 版本 blogUser : "userName", // 用户名 blogAvatar : "https://xxxx.png", // 用户头像 blogStartDate : "2016-11-17", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间 } </script> <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>
注意:引入的文件 simpleMemory.min.js 版本需要与配置 window.cnblogsConfig.GhVersions 一致!
3.5 开启公告控件
博客设置 --> 控件显示设置 --> 勾选公告
配置完成保存即可成功应用博皮!
4 定制化设定
4.1 基础信息设置
blogUser - 用户昵称
-
类型:
String
-
默认值:
[默认抓取博客园用户名]
window.cnblogsConfig = { blogUser: 'L-Rui', }
blogAvatar - 用户头像
-
类型:
Url
-
默认值:
""
用户头像图片Url。
window.cnblogsConfig = { blogAvatar: 'https://pic.cnblogs.com/avatar/1065454/20161119225202.png', }
blogStartDate - 入园时间
-
类型:
Date
-
默认值:
2019-01-01
入园时间,年-月-日,入园时间查看方法:鼠标停留园龄时间上,会显示入园时间。
window.cnblogsConfig = { blogStartDate: '2019-01-01', }
4.2 网站配置
webpageTitleOnblur - 失去焦点标签文字
-
类型:
String
-
默认值:
(o゚v゚)ノ Hi
当页面失去焦点,页面title显示的文字。
window.cnblogsConfig = { webpageTitleOnblur: '(o゚v゚)ノ Hi', }
webpageTitleOnblurTimeOut - 失去焦点变化延时
-
类型:
Number
-
默认值:
500
当页面失去焦点,页面title变化的延时时间,单位毫秒。
版本 >= v1.3.3 后该配置值为 -1 时,当页面失去焦点,页面title显示的文字不会变化。
window.cnblogsConfig = { webpageTitleOnblurTimeOut: 500, }
webpageTitleFocus - 获取焦点标签文字
-
类型:
String
-
默认值:
(*´∇`*) 欢迎回来!
当页面获取焦点,页面title显示的文字;显示后,延时恢复原title。
window.cnblogsConfig = { webpageTitleFocus: '(*´∇`*) 欢迎回来!', }
webpageTitleFocusTimeOut - 获取焦点变化延时
-
类型:
Number
-
默认值:
1000
当页面获取焦点,页面title变化的延时时间,单位毫秒。
版本 >= v1.3.3 后该配置值为 -1 时,当页面获取焦点,页面title显示的文字不会变化。
window.cnblogsConfig = { webpageTitleFocusTimeOut: 1000, }
webpageIcon - 网站图标
-
类型:
Url
-
默认值:
""
网站图标图片Url。
window.cnblogsConfig = { webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/blog_logo.webp", }
switchDayNight - 日/夜间模式
版本 >= v1.2.8
-
类型:
Object
-
默认值:
{ enable: true, // 是否开启日/夜间模式切换按钮 auto: { // 自动切换相关配置 enable: false, // 开启自动切换 dayHour: 5, // 日间模式开始时间,整数型,24小时制 nightHour: 19 // 夜间模式开始时间,整数型,24小时制 } }
日/夜间模式配置。页面使用日/夜间模式优先级:用户设置 > 自动切换 > 默认。
window.cnblogsConfig = { switchDayNight: { enable: true, auto: { enable: true } }, }
4.3 菜单配置
menuCustomList - 菜单数据
-
类型:
Object
-
相关文档:字体图标库
-
默认值:
{}
自定义菜单数据,显示在默认数据下方。
window.cnblogsConfig = { menuCustomList: { "title1": { // 标题 "data": [ // 列表数据 ['列表', '链接'] ['我的博客1', 'https://www.cnblogs.com/bndong/'], ['我的博客2', 'https://www.cnblogs.com/bndong/'], ['我的博客3', 'https://www.cnblogs.com/bndong/'], ['我的博客4', 'https://www.cnblogs.com/bndong/'], ['我的博客5', 'https://www.cnblogs.com/bndong/'], ], "icon": "icon-brush_fill" // 配置图标,参考文档:定制化/字体图标库 }, "title2": { // 标题 "data": [ // 列表数据 ['列表', '链接'] ['我的博客6', 'https://www.cnblogs.com/bndong/'], ['我的博客7', 'https://www.cnblogs.com/bndong/'], ['我的博客8', 'https://www.cnblogs.com/bndong/'], ['我的博客9', 'https://www.cnblogs.com/bndong/'], ['我的博客10', 'https://www.cnblogs.com/bndong/'], ], "icon": "icon-brush_fill" // 配置图标,参考文档:定制化/字体图标库 }, }, }
menuNavList - 菜单导航
版本 >= v1.1.2
- 类型:
Array
- 默认值:
[]
自定义菜单导航,显示在默认导航下方。 icon 支持与定义,要求版本 >= v1.3.2
window.cnblogsConfig = { menuNavList: [ // 列表数据 ['导航名称', '链接', 'icon'] ['我的博客1', 'https://www.cnblogs.com/bndong/', 'icon-github'], ['我的博客2', 'https://www.cnblogs.com/bndong/', 'icon-github'], ], }
menuUserInfoBgImg - 菜单个人信息背景图片
版本 >= v1.1.5
- 类型:
Url
- 默认值:
""
菜单个人信息背景图片设置。
window.cnblogsConfig = { menuUserInfoBgImg: 'https://xxx,jpg', }
4.4 页面动效配置
homeTopAnimationRendered - 是否渲染主页banner动效
-
类型:
Boolean
-
默认值:
true
是否渲染主页banner动效。
window.cnblogsConfig = { homeTopAnimationRendered: true, }
homeTopAnimation - 主页banner动效配置
-
类型:
Object
-
默认值:
{ radius: 15, density: 0.2, color: 'rgba(255,255,255, .2)', // 颜色设置,“random” 为随机颜色 clearOffset: 0.3, }
主页banner动效配置。
window.cnblogsConfig = { homeTopAnimation: { color : 'random', }, }
essayTopAnimationRendered - 是否渲染文章页banner动效
-
类型:
Boolean
-
默认值:
true
是否渲染文章页banner动效。
window.cnblogsConfig = { essayTopAnimationRendered: true, }
essayTopAnimation - 文章页banner动效配置
-
类型:
Object
-
默认值:
{ triW : 14, triH : 20, neighbours : ["side", "top", "bottom"], speedTrailAppear : .1, speedTrailDisappear : .1, speedTriOpen : 1, trailMaxLength : 30, trailIntervalCreation : 100, delayBeforeDisappear : 2, colorsRandom: false, // v1.2.4 是否开启随机颜色 colors: [ '#96EDA6', '#5BC6A9', '#38668C', '#374D84', '#BED5CB', '#62ADC6', '#8EE5DE', '#304E7B' ] }
文章页banner动效配置。
window.cnblogsConfig = { essayTopAnimation: { triW : 14, triH : 20, }, }
bgAnimationRendered - 是否渲染页面背景动效
-
类型:
Boolean
-
默认值:
true
是否渲染页面背景动效。
window.cnblogsConfig = { bgAnimationRendered: true, }
backgroundAnimation - 页面背景动效配置
-
类型:
Object
-
默认值:
{ colorSaturation: "60%", colorBrightness: "50%", colorAlpha: 0.5, colorCycleSpeed: 5, verticalPosition: "random", horizontalSpeed: 200, ribbonCount: 3, strokeSize: 0, parallaxAmount: -0.2, animateSections: true }
页面背景动效配置。
window.cnblogsConfig = { backgroundAnimation: { colorSaturation: "60%", colorBrightness: "50%", }, }
4.5 主页配置
homeTopImg - 主页banner图片
-
类型:
Array
-
默认值:
[ "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp" ]
主页banner图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张。
window.cnblogsConfig = { homeTopImg: [ "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp", "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp" ], }
homeBannerText - 主页banner上的标语
-
类型:
String
orArray
-
默认值:
""
主页banner上的标语,设置此选项会显示自定义文字,默认为空,自动获取一句。
1) 设置文字,会固定显示该文字。
2) 设置数组,随机从数组中获取一条文字显示。 (版本 >= v1.3.2)
window.cnblogsConfig = { homeBannerText: "好好学习,天天向上!", } // or window.cnblogsConfig = { homeBannerText: [ "我是标语一", "我是标语二", "我是标语三", "我是标语四", ], }
homeBannerTextType - 标语获取源
版本 >= v1.1.3
- 类型:
String
- 默认值:
"jinrishici"
主页 banner 上的标语获取源,默认为
jinrishici
每次刷新随机获取一句古诗词。
window.cnblogsConfig = { homeBannerTextType: "one", } /** 所有可配置项 jinrishici:每次刷新随机获取一句古诗词。 one:每日获取一句话 */
4.6 文章页配置
essayTopImg - 文章页banner图片
-
类型:
Array
-
默认值:
[ "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp" ]
文章页banner图片Url,推荐尺寸>= 1920*600,支持多张,每次刷新随机设置一张。
window.cnblogsConfig = { essayTopImg: [ "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp", "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp" ], }
essayTitleStyle - 文章内容标题样式设置
版本 >= v1.3.3
- 类型:
Boolean
- 默认值:
"false"
是否设置文章内容标题样式,默认不设置。
window.cnblogsConfig = { essayTitleStyle: true, }
essaySuffix - 文章后缀配置
-
类型:
Object
-
默认值:
{ codeImgUrl : '', // >= v1.1.5 左侧图片设置,不配置使用 window.cnblogsConfig.blogAvatar aboutHtml : '', // 关于博主,不配置使用默认 copyrightHtml: '', // 版权声明,不配置使用默认 supportHtml : '', // 声援博主,不配置使用默认 }
文章后缀配置,不配置使用默认。
window.cnblogsConfig = { essaySuffix: { aboutHtml: "I am a good person", }, }
reward - 打赏
版本 >= v1.2.7
-
类型:
Object
-
默认值:
{ enable: false, // 是否开启打赏功能 wechatpay: '', // 微信支付二维码图片URL alipay: '' // 支付宝支付二维码图片URL }
文章打赏按钮,显示在页面右下角。
window.cnblogsConfig = { reward: { enable: true, wechatpay: '//xxxx.png', }, }
weChatOfficialAccounts - 公众号
版本 >= v1.3.2
- 类型:
Url
- 默认值:
""
公众号二维码图片,显示在页面右下角。 只在文章页显示公众号,首页不显示。
window.cnblogsConfig = { weChatOfficialAccounts: '//xxxx.png', }
4.7 页脚配置
footerStyle - 页脚样式
版本 >= v1.1.8
- 类型:
Int
- 默认值:
2
页脚样式:
footerStyle: 1
footerStyle: 2
window.cnblogsConfig = { footerStyle: 1, }
bottomBlogroll - 友情链接
- 类型:
Array
- 默认值:
[]
友情链接。
window.cnblogsConfig = { bottomBlogroll: [ // 友情链接,[[链接名,链接]....] ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'], ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'], ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'], ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'], ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'], ], }
bottomText - 页脚标语
-
类型:
Object
-
默认值:
{ icon: "❤️", // v1.3.0 已废弃该配置 iconFont: { // v1.3.0 新增配置 icon: "icon-xl", // iconfont 图标名称 color: "red", // 图标颜色 fontSize: "16px" // 图标大小 }, left : "", right: "" }
页脚标语。
v1.1.4 版本之前不配置使用默认标语,v1.1.4 版本及以后不配置不会显示。
window.cnblogsConfig = { bottomText: { left : "好好学习", right: "天天向上", }, }
4.8 广告配置
advertising
版本 >= v1.3.0
- 类型:
Boolean
- 默认值:
true
是否显示博客园广告。
window.cnblogsConfig = { advertising: true, }
5 个性化扩展
5.1 网站统计
本主题整合 CNZZ 网站统计,并对样式进行了优化。如果需要本功能,请首先去 CNZZ 配置网站的统计,然后修改下面的代码,添加至页脚 Html 代码中。
<!-- 播放器 -->
<!-- require APlayer -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
auto="https://y.qq.com/n/yqq/playlist/7787591166.html"
fixed="true"
></meting-js>
5.3 鼠标点击特效特效1
点击后出现社会主义核心价值观。
粘贴到页脚。
<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
鼠标点击特效特效2
点击出现烟花。
粘贴到页脚
<script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script> <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
6 个人配置分享
6.1 css路径
6.2 博客侧边栏公告
<script type="text/javascript"> // ---- 主页配置 ---- window.cnblogsConfig = { GhVersions: 'v1.3.3', // 版本 blogUser: "L-RUI", // 用户名 blogAvatar: "https://files.cnblogs.com/files/Rui6/blogAvatar2.ico", // 用户头像 //blogStartDate : "2020-04-10", // 入园时间,年-月-日。 menuUserInfoBgImg: 'https://files.dbnuo.com/wallpaper/menu_bg.gif', //菜单个人信息背景图片设置。 // ---- 公众号图片配置 ---- weChatOfficialAccounts: 'https://files.cnblogs.com/files/Rui6/We.ico', //自定义菜单导航 menuNavList: [ ['CSDN', 'https://blog.csdn.net/qq_45061258'], ['GitHub', 'https://github.com/L-Rui-G'] ], // ---- 网站配置 ---- webpageTitleOnblur: "(◍´꒳`◍) Hi, L-Rui", // 当前页失去焦点,页面title显示文字 webpageTitleOnblurTimeOut: 500, // 当前页失去焦点,页面title变化,延时时间,单位毫秒 webpageTitleFocus: "(*´∇`*) 欢迎回来!", // 当前页获取焦点,页面title显示文字,显示后延时恢复原title webpageTitleFocusTimeOut: 1000, // 当前页获取焦点,页面title变化,延时时间,单位毫秒 webpageIcon: "https://files.cnblogs.com/files/Rui6/blogAvatar2.ico", // 网站图标 //打赏设置 reward: { enable: true, wechatpay: 'https://images.cnblogs.com/cnblogs_com/Rui6/1848426/t_200916021730weixin.jpg?a=1605605943096', alipay: 'https://images.cnblogs.com/cnblogs_com/Rui6/1848426/t_200916021739zhifubao.jpg?a=1605605943096' }, // ---- 主页配置 ---- homeTopImg: [ // 主页图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张 "https://img2020.cnblogs.com/blog/1772450/202011/1772450-20201113105542436-475532576.jpg" ], // ---- 随笔页配置 ---- essayTopImg: [ // 随笔页图片Url,支持多张,每次刷新随机设置一张 "https://img2020.cnblogs.com/blog/1772450/202011/1772450-20201113105542436-475532576.jpg" ], //日、夜间模式配置。页面使用日、夜间模式优先级:用户设置 > 自动切换 > 默认。 switchDayNight: { enable: true, auto: { enable: false // 开启自动切换 } }, //homeBannerText: "路漫漫其修远兮,吾将上下而求索", //主页banner上的标语,设置此选项会固定显示文字,默认为空,自动获取一句 homeBannerTextType: "one", //每日获取一句话 essayCodeHighlightingType: "highlightjs", //使用 highlightjs 插件渲染代码高亮。 essayCodeHighlighting: "a11y-dark", //高亮的style // ---- 页脚配置 ---- bottomBlogroll: [ // 友情链接,[[链接名,链接]....] ["BING", 'https://cn.bing.com/'], ["卡卡动漫", 'http://www.kakadm.com/'], ["百度贴吧", 'https://tieba.baidu.com/'], ["B站", 'https://www.bilibili.com/'], ["博客园地址", 'https://www.cnblogs.com/Rui6/'], ], // 页脚标语 bottomText: { left: "路漫漫其修远兮", // 图标左侧文字 right: "吾将上下而求索" // 图标右侧文字 }, //文章后缀配置,不配置使用默认。 essaySuffix: { aboutHtml: "编程小萌新一名,希望从今天开始慢慢提高,一步步走向技术的高峰!", // 关于博主,不配置使用默认 copyrightHtml: '', // 版权声明,不配置使用默认 supportHtml: '', // 声援博主,不配置使用默认 }, } </script> <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js"></script>
6.3 页脚 HTML 代码
<!-- 网站统计 --> <div id="cnzzProtocol" style="display: none;"> <span class="id_cnzz_stat_icon" id='cnzz_stat_icon_1279442252'></span> <script src='https://v1.cnzz.com/z_stat.php?id=1279442252&online=1&show=line' type='text/javascript'></script> </div> <!-- 播放器 --> <!-- require APlayer --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"> <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script> <!-- require MetingJS --> <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script> <meting-js auto="https://y.qq.com/n/yqq/playlist/7787591166.html" fixed="true" ></meting-js>
7 内容补充
目前本博客没有列出该皮肤所有功能模块,大家有需求的可以直接关注BNDong大神,先去浏览他的博客内容,本博客也会持续更新!!!
有问题的,欢迎大家在下方留言评论。