🚀 个人主页极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注
配置项
你可以配置在blogsConfig
里。
Url 类型的配置,请尽量配置支持 Https 的地址!
示例
例如我原配置为:
<script type="text/javascript">blogsConfig = {GhVersions : 'v1.2.2',blogUser: "userName",blogAvatar : "https://xxxx.png",blogStartDate : "-11-17",}<script>
我需要新增关于主页图片的配置:homeTopImg
新增配置为:
<script type="text/javascript">blogsConfig = {GhVersions : 'v1.2.2',blogUser: "userName",blogAvatar : "https://xxxx.png",blogStartDate : "-11-17",homeTopImg : ["https://x1.jpg","https://x2.jpg","https://x3.jpg",],}<script>
JavaScript 对象是被命名值的容器。值以名称:值对的方式来书写(名称和值由冒号分隔)。
主题仓库配置
用于设置样式文件加载源的配置。
GhUserName - GitHub用户
类型:String
默认值:极客小俊
GitHub用户名(不是昵称),注意大小写。
blogsConfig = {GhUserName: '极客小俊',}
GhRepositories - GitHub仓库
类型:String
默认值:Cnblogs-Theme-SimpleMemory
GitHub主题仓库名称。
blogsConfig = {GhRepositories: 'Cnblogs-Theme-SimpleMemory',}
GhVersions - 主题版本
类型:String
默认值:v1.1.2
GitHub发布版本或提交哈希值,根据版本加载代码。
blogsConfig = {GhVersions: 'v1.1.2',// orGhVersions: 'd2c2e52cfef...38998f0e', // 全哈希值,不要使用七位的部分哈希值}
不推荐使用哈希值加载代码;使用哈希值要明确使用的哈希值所在的大版本中,保证设置的兼容性!
基础信息配置
blogUser - 用户昵称
类型:String
默认值:[默认抓取博客园用户名]
用户昵称。
blogsConfig = {blogUser: '极客小俊',}
blogAvatar - 用户头像
类型:Url
默认值:""
用户头像图片Url。
blogsConfig = {blogAvatar: '/avatar/1065454/1119225202.png',}
blogStartDate - 入园时间
类型:Date
默认值:-01-01
入园时间,年-月-日,入园时间查看方法:鼠标停留园龄时间上,会显示入园时间。
blogsConfig = {blogStartDate: '-01-01',}
网站配置
webpageTitleOnblur - 失去焦点标签文字
类型:String
默认值:(o゚v゚)ノ Hi
当页面失去焦点,页面title显示的文字。
blogsConfig = {webpageTitleOnblur: '(o゚v゚)ノ Hi',}
webpageTitleOnblurTimeOut - 失去焦点变化延时
类型:Number
默认值:500
当页面失去焦点,页面title变化的延时时间,单位毫秒。
blogsConfig = {webpageTitleOnblurTimeOut: 500,}
webpageTitleFocus - 获取焦点标签文字
类型:String
默认值:(*´∇`*) 欢迎回来!
当页面获取焦点,页面title显示的文字;显示后,延时恢复原title。
blogsConfig = {webpageTitleFocus: '(*´∇`*) 欢迎回来!',}
webpageTitleFocusTimeOut - 获取焦点变化延时
类型:Number
默认值:1000
当页面获取焦点,页面title变化的延时时间,单位毫秒。
blogsConfig = {webpageTitleFocusTimeOut: 1000,}
webpageIcon - 网站图标
类型:Url
默认值:""
网站图标图片Url。
blogsConfig = {webpageIcon: "图标地址",}
switchDayNight - 日/夜间模式
版本 >= v1.2.8
类型:Object
默认值:
{enable: true, // 是否开启日/夜间模式切换按钮auto: {// 自动切换相关配置enable: false, // 开启自动切换dayHour: 5,// 日间模式开始时间,整数型,24小时制nightHour: 19 // 夜间模式开始时间,整数型,24小时制}}
日/夜间模式配置。页面使用日/夜间模式优先级:用户设置 > 自动切换 > 默认。
blogsConfig = {switchDayNight: {enable: true,auto: {enable: true}},}
字体图标扩展
fontIconExtend - 字体图标库扩展
类型:Url
默认值:""
字体图标库扩展Css的Url。
blogsConfig = {fontIconExtend: "/t/font_xxxxxxxxxx.css",}
菜单配置
menuCustomList - 菜单数据
类型:Object
相关文档:字体图标库默认值:{}
自定义菜单数据,显示在默认数据下方。
blogsConfig = {menuCustomList: {"title1": {// 标题"data": [ // 列表数据 ['列表', '链接']['我的博客1', '/GeekerJun/'],['我的博客2', '/GeekerJun/'],['我的博客3', '/GeekerJun/'],['我的博客4', '/GeekerJun/'],['我的博客5', '/GeekerJun/'],],"icon": "icon-brush_fill" // 配置图标,参考文档:定制化/字体图标库},"title2": {// 标题"data": [ // 列表数据 ['列表', '链接']['我的博客6', '/GeekerJun/'],['我的博客7', '/GeekerJun/'],['我的博客8', '/GeekerJun/'],['我的博客9', '/GeekerJun/'],['我的博客10', '/GeekerJun/'],],"icon": "icon-brush_fill" // 配置图标,参考文档:定制化/字体图标库},},}
menuNavList - 菜单导航
版本 >= v1.1.2
类型:Array
默认值:[]
自定义菜单导航,显示在默认导航下方。 icon 支持与定义,要求版本 >= v1.3.2
blogsConfig = {menuNavList: [ // 列表数据 ['导航名称', '链接', 'icon']['我的博客1', '/GeekerJun/', 'icon-github'],['我的博客2', '/GeekerJun/', 'icon-github'],],}
menuUserInfoBgImg - 菜单个人信息背景图片
版本 >= v1.1.5
类型:Url
默认值:""
菜单个人信息背景图片设置。
blogsConfig = {menuUserInfoBgImg: 'https://xxx,jpg',}
进度条配置
progressBar
类型:Object
默认值:{id: 'top-progress-bar', // 请勿修改该值color : '#77b6ff',height : '2px',duration: 0.2,}
进度条配置,显示在页面顶部。
blogsConfig = {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 rotationrenderBase: false,}}
页面加载loading。
blogsConfig = {loading: {rebound: {tension: 16,},spinner: {id: 'spinner',radius: 90,}},}
页面动效配置
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%",},}
主页配置
homeTopImg - 主页banner图片
类型:Array
默认值:["http://图片地址"]
主页banner图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张。
blogsConfig = {homeTopImg: ["http://图片地址","http://图片地址"],}
homeBannerText - 主页banner上的标语
类型:String
orArray
默认值:""
主页banner上的标语,设置此选项会显示自定义文字,默认为空,自动获取一句。
设置文字,会固定显示该文字。 2) 设置数组,随机从数组中获取一条文字显示。 (版本 >= v1.3.2)
blogsConfig = {homeBannerText: "好好学习,天天向上!",}// blogsConfig = {homeBannerText: ["我是标语一","我是标语二","我是标语三","我是标语四",],}
homeBannerTextType - 标语获取源
版本 >= v1.1.3
类型:String
默认值:"jinrishici"
主页 banner 上的标语获取源,默认为jinrishici
每次刷新随机获取一句古诗词。
blogsConfig = {homeBannerTextType: "one",}/** 所有可配置项jinrishici:每次刷新随机获取一句古诗词。one:每日获取一句话*/
文章页配置
essayTopImg - 文章页banner图片
类型:Array
默认值:["https://图片地址"]
文章页banner图片Url,推荐尺寸>= 1920*600,支持多张,每次刷新随机设置一张。
blogsConfig = {essayTopImg: ["https://图片地址","https://图片地址"],}
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',}
代码相关配置
codeMaxHeight - 限制代码框高度
版本 >= v1.2.5
类型:Boolean
默认值:"false"
限制代码框的最大高度;如开启,代码框高度不会超过页面可视区域的70%,隐藏部分通过滚动的方式查看。
blogsConfig = {codeMaxHeight: true,}
codeLineNumber - 代码行号渲染
版本 >= v1.3.0
类型:Boolean
默认值:"false"
是否渲染代码行号,如开启会在代码框左侧增加行号显示,默认不开启。 不与博客园行号渲染兼容,如果博客园添加代码时勾选显示行号并同时开启此配置,会出现双行号的现象。大家自己权衡使用此配置。
blogsConfig = {codeLineNumber: true,}
essayCode - 代码框统一样式设置
版本 >= v1.2.9
类型:Object
默认值:
{fontFamily: "'Ubuntu Mono',monospace", // 代码框字体fontSize: "14px" // 代码框字体大小}
代码框统一样式设置,目前只有字体设置,看需求后续可能会增加配置项。
blogsConfig = {essayCode: {fontSize: "16px",},}
使用博客园默认代码样式
essayCodeHighlightingType
类型:String
默认值:"cnblogs"
使用博客园代码高亮样式,介意加载速度的可以使用此配置。
blogsConfig = {essayCodeHighlightingType: "cnblogs",}
essayCodeHighlighting
类型:String
默认值:""
当使用博客园代码高亮样式时,此配置不会对渲染产生影响。
使用 highlightjs 渲染代码
相关文档:highlightessayCodeHighlightingType
类型:String
默认值:"cnblogs"
使用highlightjs
插件渲染代码高亮。
blogsConfig = {essayCodeHighlightingType: "highlightjs",}
essayCodeHighlighting
类型:String
默认值:""
highlightjs 代码高亮主题:demo
blogsConfig = {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、vs、xcode、xt256、zenburn*/
使用 prettify 渲染代码
essayCodeHighlightingType
类型:String
默认值:"cnblogs"
使用prettify
插件渲染代码高亮。
blogsConfig = {essayCodeHighlightingType: "prettify",}
essayCodeHighlighting
类型:String
默认值:""
prettify 代码高亮主题(需梯子访问):demo
blogsConfig = {essayCodeHighlighting: "obsidian",}/** 所有可配置项prettify、desert、sunburst、obsidian、doxy*/
页脚配置
footerStyle - 页脚样式
版本 >= v1.1.8
类型:Int
默认值:2
页脚样式:
footerStyle: 1
footerStyle: 2
blogsConfig = {footerStyle: 1,}
bottomBlogroll - 友情链接
类型:Array
默认值:[]
友情链接。
blogsConfig = {bottomBlogroll: [ // 友情链接,[[链接名,链接]....]["申请坑位", '/GeekerJun/'],["申请坑位", '/GeekerJun/'],["申请坑位", '/GeekerJun/'],["申请坑位", '/GeekerJun/'],["申请坑位", '/GeekerJun/'],],}
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 版本及以后不配置不会显示。
blogsConfig = {bottomText: {left : "好好学习",right: "天天向上",},}
控制台输出
consoleList
类型:Array
默认值:[]
控制台输出。
blogsConfig = {consoleList: [['极客小俊 CNBlogs', '/GeekerJun/'],['极客小俊 CNBlogs', '/GeekerJun/'],['极客小俊 Email', 'xxxx@'],],}
广告
advertising
版本 >= v1.3.0
类型:Boolean
默认值:true
是否显示博客园广告。
blogsConfig = {advertising: true,}
版本映射
isVersionMapping
版本 >= v1.2.6
类型:Boolean
相关文档:版本映射默认值:false
是否开启版本映射,默认关闭。
blogsConfig = {isVersionMapping: true,}
图片地址素材
主页banner图片风格组1/wallpaper/wallhaven-83w372.webp/wallpaper/wallhaven-4ylgl0.webp/wallpaper/wallhaven-k9p8l6.webp/wallpaper/wallhaven-dgojvj.webp/wallpaper/wallhaven-2ew3pm.webp/wallpaper/wallhaven-ne7lr8.webp/wallpaper/wallhaven-13mk9v.webp/wallpaper/wallhaven-dgekog.webp/wallpaper/wallhaven-lm2762.webp/wallpaper/wallhaven-47ldq9.webp/wallpaper/wallhaven-96w8e8.webp风格组2/full/w8/wallhaven-w8o6m7.jpg/full/4v/wallhaven-4v135p.jpg/full/13/wallhaven-13gom9.jpg风格组3/wallpaper/wallhaven-39qjjd.webp文章页banner图片对应风格组1 的文章banner图地址/wallpaper/wallhaven-4gj334.webp/wallpaper/wallhaven-132m93.webp/wallpaper/wallhaven-96w5gk.webp/wallpaper/wallhaven-r2yjg1.webp/wallpaper/wallhaven-13dv2g.webp/wallpaper/wallhaven-kwkg5q.webp/wallpaper/wallhaven-2e37y9.webp/wallpaper/wallhaven-lqddel.webp/wallpaper/wallhaven-j5y525.webp/wallpaper/wallhaven-yml8wd.webp/wallpaper/wallhaven-d5yzvg.webp/wallpaper/wallhaven-ey1pow.webp/wallpaper/wallhaven-wyomo6.webp对应风格组2 的文章banner图地址/full/13/wallhaven-13gom9.jpg
"👍点赞""✍️评论""收藏❤️"
大家的支持就是我坚持下去的动力!如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,欢迎一起交流学习❤️❤️💛💛💚💚