1. 前言说明
本博客的博皮样式设计者是BNDong大神,在此表示衷心的感谢!为了让更多人的博客园更加的美观大方,本人特此参考设计者BNDong关于博客样式的文章,写了这更加通俗易懂的文章,让更多喜欢这博客样式的人,可以应用此博客样式。
2. 入门准备
2.1 安装配置
本主题需要JS权限,没有的请先申请权限。
2.2 后台配置
博客园后台设置
2.2 选项配置
选项页面:
2.3 确定使用的版本
选择版本下载对应的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">blogsConfig = {GhVersions : 'v1.3.3', // 版本blogUser: "userName", // 用户名blogAvatar : "https://xxxx.png", // 用户头像blogStartDate : "-11-17", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间}</script><script src="/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>
注意:引入的文件 simpleMemory.min.js 版本需要与配置 blogsConfig.GhVersions 一致!
3.5 开启公告控件
博客设置 --> 控件显示设置 --> 勾选公告
配置完成保存即可成功应用博皮!
4 定制化设定
4.1 基础信息设置
blogUser - 用户昵称
类型:String
默认值:[默认抓取博客园用户名]
blogsConfig = {blogUser: 'L-Rui',}
blogAvatar - 用户头像
类型:Url
默认值:""
用户头像图片Url。
blogsConfig = {blogAvatar: '/avatar/1065454/1119225202.png',}
blogStartDate - 入园时间
类型:Date
默认值:-01-01
入园时间,年-月-日,入园时间查看方法:鼠标停留园龄时间上,会显示入园时间。
blogsConfig = {blogStartDate: '-01-01',}
4.2网站配置
webpageTitleOnblur - 失去焦点标签文字
类型:String
默认值:(o゚v゚)ノ Hi
当页面失去焦点,页面title显示的文字。
blogsConfig = {webpageTitleOnblur: '(o゚v゚)ノ Hi',}
webpageTitleOnblurTimeOut - 失去焦点变化延时
类型:Number
默认值:500
当页面失去焦点,页面title变化的延时时间,单位毫秒。
版本 >= v1.3.3 后该配置值为 -1 时,当页面失去焦点,页面title显示的文字不会变化。
blogsConfig = {webpageTitleOnblurTimeOut: 500,}
webpageTitleFocus - 获取焦点标签文字
类型:String
默认值:(*´∇`*) 欢迎回来!
当页面获取焦点,页面title显示的文字;显示后,延时恢复原title。
blogsConfig = {webpageTitleFocus: '(*´∇`*) 欢迎回来!',}
webpageTitleFocusTimeOut - 获取焦点变化延时
类型:Number
默认值:1000
当页面获取焦点,页面title变化的延时时间,单位毫秒。
版本 >= v1.3.3 后该配置值为 -1 时,当页面获取焦点,页面title显示的文字不会变化。
blogsConfig = {webpageTitleFocusTimeOut: 1000,}
webpageIcon - 网站图标
类型:Url
默认值:""
网站图标图片Url。
blogsConfig = {webpageIcon: "/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小时制}}
日/夜间模式配置。页面使用日/夜间模式优先级:用户设置 > 自动切换 > 默认。
blogsConfig = {switchDayNight: {enable: true,auto: {enable: true}},}
4.3 菜单配置
menuCustomList - 菜单数据
类型:Object
相关文档:字体图标库默认值:{}
自定义菜单数据,显示在默认数据下方。
blogsConfig = {menuCustomList: {"title1": { // 标题"data": [ // 列表数据 ['列表', '链接']['我的博客1', '/bndong/'],['我的博客2', '/bndong/'],['我的博客3', '/bndong/'],['我的博客4', '/bndong/'],['我的博客5', '/bndong/'],],"icon": "icon-brush_fill" // 配置图标,参考文档:定制化/字体图标库},"title2": { // 标题"data": [ // 列表数据 ['列表', '链接']['我的博客6', '/bndong/'],['我的博客7', '/bndong/'],['我的博客8', '/bndong/'],['我的博客9', '/bndong/'],['我的博客10', '/bndong/'],],"icon": "icon-brush_fill" // 配置图标,参考文档:定制化/字体图标库},},}
menuNavList - 菜单导航
版本 >= v1.1.2
类型:Array
默认值:[]
自定义菜单导航,显示在默认导航下方。 icon 支持与定义,要求版本 >= v1.3.2
blogsConfig = {menuNavList: [ // 列表数据 ['导航名称', '链接', 'icon']['我的博客1', '/bndong/', 'icon-github'],['我的博客2', '/bndong/', 'icon-github'],],}
menuUserInfoBgImg - 菜单个人信息背景图片
版本 >= v1.1.5
类型:Url
默认值:""
菜单个人信息背景图片设置。
blogsConfig = {menuUserInfoBgImg: 'https://xxx,jpg',}
4.4页面动效配置
homeTopAnimationRendered - 是否渲染主页banner动效
类型:Boolean
默认值:true
是否渲染主页banner动效。
blogsConfig = {homeTopAnimationRendered: true,}
homeTopAnimation - 主页banner动效配置
类型:Object
默认值:{radius: 15,density: 0.2,color: 'rgba(255,255,255, .2)', // 颜色设置,“random” 为随机颜色clearOffset: 0.3,}
主页banner动效配置。
blogsConfig = {homeTopAnimation: {color : 'random',},}
essayTopAnimationRendered - 是否渲染文章页banner动效
类型:Boolean
默认值:true
是否渲染文章页banner动效。
blogsConfig = {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动效配置。
blogsConfig = {essayTopAnimation: {triW : 14,triH : 20,},}
bgAnimationRendered - 是否渲染页面背景动效
类型:Boolean
默认值:true
是否渲染页面背景动效。
blogsConfig = {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}
页面背景动效配置。
blogsConfig = {backgroundAnimation: {colorSaturation: "60%",colorBrightness: "50%",},}
4.5主页配置
homeTopImg - 主页banner图片
类型:Array
默认值:["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"]
主页banner图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张。
blogsConfig = {homeTopImg: ["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp","/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"],}
homeBannerText - 主页banner上的标语
类型:String
orArray
默认值:""
主页banner上的标语,设置此选项会显示自定义文字,默认为空,自动获取一句。
1) 设置文字,会固定显示该文字。
2) 设置数组,随机从数组中获取一条文字显示。 (版本 >= v1.3.2)
blogsConfig = {homeBannerText: "好好学习,天天向上!",}// blogsConfig = {homeBannerText: ["我是标语一","我是标语二","我是标语三","我是标语四",],}
homeBannerTextType - 标语获取源
版本 >= v1.1.3
类型:String
默认值:"jinrishici"
主页 banner 上的标语获取源,默认为jinrishici
每次刷新随机获取一句古诗词。
blogsConfig = {homeBannerTextType: "one",}/** 所有可配置项jinrishici:每次刷新随机获取一句古诗词。one:每日获取一句话*/
4.6 文章页配置
essayTopImg - 文章页banner图片
类型:Array
默认值:["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"]
文章页banner图片Url,推荐尺寸>= 1920*600,支持多张,每次刷新随机设置一张。
blogsConfig = {essayTopImg: ["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp","/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"],}
essayTitleStyle - 文章内容标题样式设置
版本 >= v1.3.3
类型:Boolean
默认值:"false"
是否设置文章内容标题样式,默认不设置。
blogsConfig = {essayTitleStyle: true,}
essaySuffix - 文章后缀配置
类型:Object
默认值:{codeImgUrl : '', // >= v1.1.5 左侧图片设置,不配置使用 blogsConfig.blogAvataraboutHtml : '', // 关于博主,不配置使用默认copyrightHtml: '', // 版权声明,不配置使用默认supportHtml : '', // 声援博主,不配置使用默认}
文章后缀配置,不配置使用默认。
blogsConfig = {essaySuffix: {aboutHtml: "I am a good person",},}
reward - 打赏
版本 >= v1.2.7
类型:Object
默认值:
{enable: false, // 是否开启打赏功能wechatpay: '', // 微信支付二维码图片URLalipay: '' // 支付宝支付二维码图片URL}
文章打赏按钮,显示在页面右下角。
blogsConfig = {reward: {enable: true,wechatpay: '//xxxx.png',},}
weChatOfficialAccounts - 公众号
版本 >= v1.3.2
类型:
Url
默认值:""
公众号二维码图片,显示在页面右下角。 只在文章页显示公众号,首页不显示。
blogsConfig = {weChatOfficialAccounts: '//xxxx.png',}
5 个人配置分享
5.1 css路径
v1.3.3 base.min.css
5.2博客侧边栏公告
<script type="text/javascript">// ---- 主页配置 ----blogsConfig = {GhVersions: 'v1.3.3', // 版本blogUser: "L-RUI", // 用户名blogAvatar: "/files/Rui6/blogAvatar2.ico", // 用户头像//blogStartDate : "-04-10", // 入园时间,年-月-日。menuUserInfoBgImg: '/wallpaper/menu_bg.gif', //菜单个人信息背景图片设置。// ---- 公众号图片配置 ----weChatOfficialAccounts: '/files/Rui6/We.ico',//自定义菜单导航menuNavList: [['CSDN', '/qq_45061258'],['GitHub', '/L-Rui-G']],// ---- 网站配置 ----webpageTitleOnblur: "(◍´꒳`◍) Hi, L-Rui", // 当前页失去焦点,页面title显示文字webpageTitleOnblurTimeOut: 500, // 当前页失去焦点,页面title变化,延时时间,单位毫秒webpageTitleFocus: "(*´∇`*) 欢迎回来!", // 当前页获取焦点,页面title显示文字,显示后延时恢复原titlewebpageTitleFocusTimeOut: 1000, // 当前页获取焦点,页面title变化,延时时间,单位毫秒webpageIcon: "/files/Rui6/blogAvatar2.ico", // 网站图标//打赏设置reward: {enable: true,wechatpay: '/cnblogs_com/Rui6/1848426/t_16021730weixin.jpg?a=1605605943096',alipay: '/cnblogs_com/Rui6/1848426/t_16021739zhifubao.jpg?a=1605605943096'},// ---- 主页配置 ----homeTopImg: [ // 主页图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张"/blog/1772450/20/1772450-105542436-475532576.jpg"],// ---- 随笔页配置 ----essayTopImg: [ // 随笔页图片Url,支持多张,每次刷新随机设置一张"/blog/1772450/20/1772450-105542436-475532576.jpg"],//日、夜间模式配置。页面使用日、夜间模式优先级:用户设置 > 自动切换 > 默认。switchDayNight: {enable: true,auto: {enable: false // 开启自动切换}},//homeBannerText: "路漫漫其修远兮,吾将上下而求索",//主页banner上的标语,设置此选项会固定显示文字,默认为空,自动获取一句homeBannerTextType: "one", //每日获取一句话essayCodeHighlightingType: "highlightjs", //使用 highlightjs 插件渲染代码高亮。essayCodeHighlighting: "a11y-dark", //高亮的style// ---- 页脚配置 ----bottomBlogroll: [ // 友情链接,[[链接名,链接]....]["BING", '/'],["卡卡动漫", '/'],["百度贴吧", '/'],["B站", '/'],["博客园地址", '/Rui6/'],],// 页脚标语bottomText: {left: "路漫漫其修远兮", // 图标左侧文字right: "吾将上下而求索" // 图标右侧文字},//文章后缀配置,不配置使用默认。essaySuffix: {aboutHtml: "编程小萌新一名,希望从今天开始慢慢提高,一步步走向技术的高峰!", // 关于博主,不配置使用默认copyrightHtml: '', // 版权声明,不配置使用默认supportHtml: '', // 声援博主,不配置使用默认},}</script><script src="/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js"></script>
View Code
5.3页脚 HTML 代码
<!-- 网站统计 --><div id="cnzzProtocol" style="display: none;"><span class="id_cnzz_stat_icon" id='cnzz_stat_icon_1279442252'></span><script src='/z_stat.php?id=1279442252&online=1&show=line' type='text/javascript'></script></div><!-- 播放器 --><!-- require APlayer --><link rel="stylesheet" href="/npm/aplayer/dist/APlayer.min.css"><script src="/npm/aplayer/dist/APlayer.min.js"></script><!-- require MetingJS --><script src="/npm/meting@2/dist/Meting.min.js"></script><meting-js auto="/n/yqq/playlist/7787591166.html"fixed="true"></meting-js>