SimpleMemory博客园主题定制美化 配置
Author:3# 一个专注于web技术的80后
软件开发要知其然知其所以然
aaa@qq.com 极客小俊,CSDN官方首发,`3#原创
企业博客: ???? 极客小俊GeekerJun ????
博客园URL: ???? cnblogs.com/GeekerJun ????
配置项
你可以配置在window.cnblogsConfig
里。
Url 类型的配置,请尽量配置支持 Https 的地址!
示例
例如我原配置为:
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions : 'v1.2.2',
blogUser : "userName",
blogAvatar : "https://xxxx.png",
blogStartDate : "2016-11-17",
}
<script>
我需要新增关于主页图片的配置:homeTopImg
新增配置为:
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions : 'v1.2.2',
blogUser : "userName",
blogAvatar : "https://xxxx.png",
blogStartDate : "2016-11-17",
homeTopImg : [
"https://x1.jpg",
"https://x2.jpg",
"https://x3.jpg",
],
}
<script>
JavaScript 对象是被命名值的容器。值以名称:值对的方式来书写(名称和值由冒号分隔)。
主题仓库配置
用于设置样式文件加载源的配置。
GhUserName - GitHub用户
- 类型:
String
- 默认值:
BNDong
GitHub用户名(不是昵称),注意大小写。
window.cnblogsConfig = {
GhUserName: 'BNDong',
}
GhRepositories - GitHub仓库
- 类型:
String
- 默认值:
Cnblogs-Theme-SimpleMemory
GitHub主题仓库名称。
window.cnblogsConfig = {
GhRepositories: 'Cnblogs-Theme-SimpleMemory',
}
GhVersions - 主题版本
- 类型:
String
- 默认值:
v1.1.2
GitHub发布版本或提交哈希值,根据版本加载代码。
window.cnblogsConfig = {
GhVersions: 'v1.1.2',
// or
GhVersions: 'd2c2e52cfef...38998f0e', // 全哈希值,不要使用七位的部分哈希值
}
不推荐使用哈希值加载代码;使用哈希值要明确使用的哈希值所在的大版本中,保证设置的兼容性!
基础信息配置
blogUser - 用户昵称
- 类型:
String
- 默认值:
[默认抓取博客园用户名]
用户昵称。
window.cnblogsConfig = {
blogUser: 'BNDong',
}
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',
}
网站配置
webpageTitleOnblur - 失去焦点标签文字
- 类型:
String
- 默认值:
(o゚v゚)ノ Hi
当页面失去焦点,页面title显示的文字。
window.cnblogsConfig = {
webpageTitleOnblur: '(o゚v゚)ノ Hi',
}
webpageTitleOnblurTimeOut - 失去焦点变化延时
- 类型:
Number
- 默认值:
500
当页面失去焦点,页面title变化的延时时间,单位毫秒。
window.cnblogsConfig = {
webpageTitleOnblurTimeOut: 500,
}
webpageTitleFocus - 获取焦点标签文字
- 类型:
String
- 默认值:
(*´∇`*) 欢迎回来!
当页面获取焦点,页面title显示的文字;显示后,延时恢复原title。
window.cnblogsConfig = {
webpageTitleFocus: '(*´∇`*) 欢迎回来!',
}
webpageTitleFocusTimeOut - 获取焦点变化延时
- 类型:
Number
- 默认值:
1000
当页面获取焦点,页面title变化的延时时间,单位毫秒。
window.cnblogsConfig = {
webpageTitleFocusTimeOut: 1000,
}
webpageIcon - 网站图标
- 类型:
Url
- 默认值:
""
网站图标图片Url。
window.cnblogsConfig = {
webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/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
}
},
}
字体图标扩展
fontIconExtend - 字体图标库扩展
- 类型:
Url
- 相关文档:字体图标库
- 默认值:
""
字体图标库扩展Css的Url。
window.cnblogsConfig = {
fontIconExtend: "//at.alicdn.com/t/font_xxxxxxxxxx.css",
}
菜单配置
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',
}
进度条配置
progressBar
- 类型:
Object
- 默认值:
{
id : 'top-progress-bar', // 请勿修改该值
color : '#77b6ff',
height : '2px',
duration: 0.2,
}
进度条配置,显示在页面顶部。
window.cnblogsConfig = {
progressBar: {
color : '#77b6ff',
},
}
Loading配置
loading
- 类型:
Object
- 相关文档: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,
}
}
页面加载loading。
window.cnblogsConfig = {
loading: {
rebound: {
tension: 16,
},
spinner: {
id: 'spinner',
radius: 90,
}
},
}
页面动效配置
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%",
},
}
主页配置
homeTopImg - 主页banner图片
- 类型:
Array
- 默认值:
[
"https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/home_top_bg.webp"
]
主页banner图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张。
window.cnblogsConfig = {
homeTopImg: [
"https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/home_top_bg.webp",
"https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/home_top_bg.webp"
],
}
homeBannerText - 主页banner上的标语
- 类型:
String
orArray
- 默认值:
""
主页banner上的标语,设置此选项会显示自定义文字,默认为空,自动获取一句。
- 设置文字,会固定显示该文字。 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:每日获取一句话
*/
文章页配置
essayTopImg - 文章页banner图片
- 类型:
Array
- 默认值:
[
"https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/nothome_top_bg.webp"
]
文章页banner图片Url,推荐尺寸>= 1920*600,支持多张,每次刷新随机设置一张。
window.cnblogsConfig = {
essayTopImg: [
"https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/nothome_top_bg.webp",
"https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/nothome_top_bg.webp"
],
}
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',
}
代码相关配置
codeMaxHeight - 限制代码框高度
版本 >= v1.2.5
- 类型:
Boolean
- 默认值:
"false"
限制代码框的最大高度;如开启,代码框高度不会超过页面可视区域的70%,隐藏部分通过滚动的方式查看。
window.cnblogsConfig = {
codeMaxHeight: true,
}
codeLineNumber - 代码行号渲染
版本 >= v1.3.0
- 类型:
Boolean
- 默认值:
"false"
是否渲染代码行号,如开启会在代码框左侧增加行号显示,默认不开启。 不与博客园行号渲染兼容,如果博客园添加代码时勾选显示行号并同时开启此配置,会出现双行号的现象。大家自己权衡使用此配置。
window.cnblogsConfig = {
codeLineNumber: true,
}
essayCode - 代码框统一样式设置
版本 >= v1.2.9
- 类型:
Object
- 默认值:
{
fontFamily: "'Ubuntu Mono',monospace", // 代码框字体
fontSize: "14px" // 代码框字体大小
}
代码框统一样式设置,目前只有字体设置,看需求后续可能会增加配置项。
window.cnblogsConfig = {
essayCode: {
fontSize: "16px",
},
}
使用博客园默认代码样式
essayCodeHighlightingType
- 类型:
String
- 默认值:
"cnblogs"
使用博客园代码高亮样式,介意加载速度的可以使用此配置。
window.cnblogsConfig = {
essayCodeHighlightingType: "cnblogs",
}
essayCodeHighlighting
- 类型:
String
- 默认值:
""
当使用博客园代码高亮样式时,此配置不会对渲染产生影响。
使用 highlightjs 渲染代码
- 相关文档:highlight
essayCodeHighlightingType
- 类型:
String
- 默认值:
"cnblogs"
使用 highlightjs
插件渲染代码高亮。
window.cnblogsConfig = {
essayCodeHighlightingType: "highlightjs",
}
essayCodeHighlighting
- 类型:
String
- 默认值:
""
highlightjs 代码高亮主题:demo
window.cnblogsConfig = {
essayCodeHighlighting: "a11y-dark",
}
/** 所有可配置项
default、a11y-dark、a11y-light、agate、an-old-hope、androidstudio、arduino-light、arta、ascetic
、atelier-cave-dark、atelier-cave-light、atelier-dune-dark、atelier-dune-light、atelier-estuary-dark
、atelier-estuary-light、atelier-forest-dark、atelier-forest-light、atelier-heath-dark
、atelier-heath-light、atelier-lakeside-dark、atelier-lakeside-light、atelier-plateau-dark、atelier-plateau-light
、atelier-savanna-dark、atelier-savanna-light、atelier-seaside-dark、atelier-seaside-light
、atelier-sulphurpool-dark、atelier-sulphurpool-light、atom-one-dark-reasonable、atom-one-dark、atom-one-light
、brown-paper、codepen-embed、color-brewer、darcula、dark、darkula、docco、dracula、far
、foundation、github-gist、github、gml、googlecode、grayscale、gruvbox-dark、gruvbox-light、hopscotch
、hybrid、idea、ir-black、isbl-editor-dark、isbl-editor-light、kimbie.dark、kimbie.light、lightfair
、magula、mono-blue、monokai-sublime、monokai、nord、obsidian、ocean、paraiso-dark、paraiso-light、pojoaque
、purebasic、qtcreator_dark、qtcreator_light、railscasts、rainbow、routeros、school-book、shades-of-purple
、solarized-dark、solarized-light、sunburst、tomorrow-night-blue、tomorrow-night-bright
、tomorrow-night-eighties、tomorrow-night、tomorrow、vs、vs2015、xcode、xt256、zenburn
*/
使用 prettify 渲染代码
essayCodeHighlightingType
- 类型:
String
- 默认值:
"cnblogs"
使用prettify
插件渲染代码高亮。
window.cnblogsConfig = {
essayCodeHighlightingType: "prettify",
}
essayCodeHighlighting
- 类型:
String
- 默认值:
""
prettify 代码高亮主题(需*访问):demo
window.cnblogsConfig = {
essayCodeHighlighting: "obsidian",
}
/** 所有可配置项
prettify、desert、sunburst、obsidian、doxy
*/
页脚配置
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: "天天向上",
},
}
控制台输出
consoleList
- 类型:
Array
- 默认值:
[]
控制台输出。
window.cnblogsConfig = {
consoleList: [
['BNDong CNBlogs', 'https://www.cnblogs.com/bndong'],
['BNDong GitHub', 'https://github.com/BNDong'],
['BNDong Email', 'aaa@qq.com'],
],
}
广告
advertising
版本 >= v1.3.0
- 类型:
Boolean
- 默认值:
true
是否显示博客园广告。
window.cnblogsConfig = {
advertising: true,
}
版本映射
isVersionMapping
版本 >= v1.2.6
- 类型:
Boolean
- 相关文档:版本映射
- 默认值:
false
是否开启版本映射,默认关闭。
window.cnblogsConfig = {
isVersionMapping: true,
}
图片地址素材
主页banner图片
风格组1
https://files.dbnuo.com/wallpaper/wallhaven-83w372.webp
https://files.dbnuo.com/wallpaper/wallhaven-4ylgl0.webp
https://files.dbnuo.com/wallpaper/wallhaven-k9p8l6.webp
https://files.dbnuo.com/wallpaper/wallhaven-dgojvj.webp
https://files.dbnuo.com/wallpaper/wallhaven-2ew3pm.webp
https://files.dbnuo.com/wallpaper/wallhaven-ne7lr8.webp
https://files.dbnuo.com/wallpaper/wallhaven-13mk9v.webp
https://files.dbnuo.com/wallpaper/wallhaven-dgekog.webp
https://files.dbnuo.com/wallpaper/wallhaven-lm2762.webp
https://files.dbnuo.com/wallpaper/wallhaven-47ldq9.webp
https://files.dbnuo.com/wallpaper/wallhaven-96w8e8.webp
风格组2
https://w.wallhaven.cc/full/w8/wallhaven-w8o6m7.jpg
https://w.wallhaven.cc/full/4v/wallhaven-4v135p.jpg
https://w.wallhaven.cc/full/13/wallhaven-13gom9.jpg
风格组3
https://files.dbnuo.com/wallpaper/wallhaven-39qjjd.webp
文章页banner图片
对应风格组1 的文章banner图地址
https://files.dbnuo.com/wallpaper/wallhaven-4gj334.webp
https://files.dbnuo.com/wallpaper/wallhaven-132m93.webp
https://files.dbnuo.com/wallpaper/wallhaven-96w5gk.webp
https://files.dbnuo.com/wallpaper/wallhaven-r2yjg1.webp
https://files.dbnuo.com/wallpaper/wallhaven-13dv2g.webp
https://files.dbnuo.com/wallpaper/wallhaven-kwkg5q.webp
https://files.dbnuo.com/wallpaper/wallhaven-2e37y9.webp
https://files.dbnuo.com/wallpaper/wallhaven-lqddel.webp
https://files.dbnuo.com/wallpaper/wallhaven-j5y525.webp
https://files.dbnuo.com/wallpaper/wallhaven-yml8wd.webp
https://files.dbnuo.com/wallpaper/wallhaven-d5yzvg.webp
https://files.dbnuo.com/wallpaper/wallhaven-ey1pow.webp
https://files.dbnuo.com/wallpaper/wallhaven-wyomo6.webp
对应风格组2 的文章banner图地址
https://w.wallhaven.cc/full/13/wallhaven-13gom9.jpg
如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏”
一键三连哦!
听说 ???? 点赞
???? 的人运气不会太差,每一天都会元气满满哦 嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我坚持下去的动力。点赞后不要忘了???? 关注 ????我哦!
更多精彩内容请前往 极客小俊GeekerJun 的博客
如果以上内容有任何错误或者不准确的地方,欢迎在下面 ???? 留个言指出、或者你有更好的想法,欢迎一起交流学习~~~
上一篇: 探究120年里奥运会金牌运动员身高与体重的数学模型
下一篇: 总成绩的集合排序