前端装扮系列-为博客添加新的主题样式simleMemory
安装配置
本文为v2版本的安装配置教程,请核对使用版本!
本主题需要JS权限,没有的请先申请权限。
关于博客园后台
进入管理后台:管理后台
设置
设置页面:
本主题当前页面所涉及的配置有:
- 博客皮肤
- 代码高亮
- 页面定制CSS代码
- 禁用模板默认CSS
- 博客侧边栏公告
- 页脚Html代码
博客配置选项
配置完成保存即可成功应用博皮!
配置项
参考配置选项
你可以配置在window.cnblogsConfig里。
例如我原配置为:
<!-- 添加主题 -->
<!-- https://www.cnblogs.com/bndong/p/15203054.html 备用地址 -->
<script type="text/javascript">
window.cnblogsConfig = {
info: {
name: '枫奇丶宛南', // 用户名
startDate: '2021-10-08', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
avatar: 'https://files.cnblogs.com/files/blogs/710653/avatarBlog.bmp', // 用户头像
blogIcon: 'https://files.cnblogs.com/files/blogs/710653/fengIcon.bmp' // 网站图标图片Url
},
sidebar: {
infoBackground: 'https://files.cnblogs.com/files/blogs/710653/InfoBackground.bmp', // 侧边栏个人信息背景图片Url。
// 列表数据 ['导航名称', '链接', 'icon'] // 多加的导航列表
navList: [
['新随笔', 'https://i-beta.cnblogs.com/posts/edit'],
['友链', 'https://blog.csdn.net/qiqiyingse', 'icon-pengyoufill'],
['博客', 'https://www.cnblogs.com/aifengqi/', 'icon-blog-solid'],
['GitHub', 'https://github.com/JimmyFengqi', 'icon-github'],
['515894016', '','icon-logo_QQ'],
['WX:以后再说', '','icon-logo-wechat'],
],
},
banner: {
// 主页头图
home: {
//主页banner图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张。
background: [ ],
// 主页banner上的标语,设置此选项会显示自定义文字,默认为空,每次刷新随机
title: [],
titleSource: '',
},
// 文章页头图,每次随机更换一张
article: {
background: [ ],
},
},
// 加载loading
loading: {
rebound: {
tension: 16,
},
spinner: {
id: 'spinner',
radius: 90,
}
},
// 顶部进度条
progressBar: {
color : '#77b6ff',
},
// 页面标签
title: {
onblur: '干啥呢,快看看我(o゚v゚)',//失去焦点标签文字
onblurTime: 500,//失去焦点变化延时
focus: '(*´∇`*) 欢迎回来!',//获取焦点标签文字
focusTime: 1000,//获取焦点变化延时
},
//页脚
footer: {
style: 2,
text: {
left: '我有屠龙计',
right: '奈何没有刀',
iconFont: {
icon: "icon-xl",
color: "red",
fontSize: "16px"
}
},
},
// 页脚友情链接
links: {
footer: [
["枫奇", 'https://blog.csdn.net/qiqiyingse'],
["Github", 'https://github.com/JimmyFengqi'],
["申请坑位", 'https://msg.cnblogs.com/send/aifengqi'],
],
},
//右下角菜单二维码赞赏
rtMenu: {
qrCode: 'https://files.cnblogs.com/files/blogs/710653/WechatqrCode.bmp',
reward: {
alipay: 'https://files.cnblogs.com/files/blogs/710653/alipay.bmp',
wechatpay: 'https://files.cnblogs.com/files/blogs/710653/wechatpay.bmp',
},
downScrollDom: '#blog_post_info_block', //跳至底部位置定义,配置为 JQuery 选择器。
},
//日夜切换, 是否开启日/夜间模式切换按钮
switchDayNight: {
enable: true,
auto: {
enable: true
},
},
//主页banner动效,版本 v2.0.3 及之后,所有动效默认配置为关闭,这里把它打开。
animate: {
homeBanner: {
enable: true,
options: {
radius: 15,
color: 'rgba(255,255,255, .2)', // 颜色设置,“random” 为随机颜色
density: 0.2,
clearOffset: 0.3
}
},
articleTitle: {
enable: true,
},
articleBanner: {
enable: true,
},
background: {
enable: false,
options: {
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
}
},
backgroundMouse: {
enable: true
},
mouse: {
enable: true,
options: {
size: 8,
sizeF: 36
}
},
bannerImages: {
enable: true, // 背景图自动切换动效
},
},
//用于设置文章目录显示在文章的左侧还是右侧,配置项:right、left
articleDirectory: {
position: 'right',
minBodyWeight: 1350, //文章目录隐藏宽度
autoWidthScroll: true, //文章目录中标题过长时候是否显示横向滚动条
},
//代码渲染类型
code: {
type: 'hljs',
options: {
hljs: {
theme: 'atom-one-dark-reasonable',
languages: ['Bash', 'CSS', 'Dockerfile', 'Go', 'HTML', 'XML', 'HTTP', 'Less', 'Lua', 'PHP', 'Python', 'Shell', 'SQL', 'Java', 'JSON']
},
maxHeight: '',
line: true,
macStyle: true,
},
},
//文章后缀内容
articleSuffix: {
// imgUrl: 'https://x1.jpg', // 左侧图片
aboutHtml: "不是我吹,给我个笔,我能撬动地球!~",
// copyrightHtml: "版权...", //版权声明,支持HTML代码,不配置使用默认。
// supportHtml: "声援...", //声援博主,支持HTML代码,不配置使用默认
},
//控制台输出
consoleList: [
['Fengqi CNBlogs', 'https://www.cnblogs.com/aifengqi'],
['Fengqi GitHub', 'https://github.com/JimmyFengqi'],
['Fengqi Email', 'jmps515@163.com'],
],
cnzz: "1280420412", // 网站统计
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/simpleMemory.js" defer></script>