SimpleMemory 皮肤
文档参考这里,非常详细🌹
- 效果预览:
配置步骤
1. 选项
勾选 “公告”
2. 基本设置、代码高亮、开通JS权限
皮肤选择 SimpleMemory
3. 页面定制CSS代码
这里我选择的是 Cnblogs-Theme-SimpleMemory V2.1.0
版本
@import url(https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@2.1.0/dist/simpleMemory.css);
注意:
- 页面定制CSS代码我使用的是外链导入形式(免费jsdelivr cdn加速,也可以自行选择其它方式托管)。
- 勾选“禁用模板默认CSS”。(使得外链css生效)
4. 博客侧边栏公告设置
下面是我的配置(仅供参考)
<script type="text/javascript"> window.cnblogsConfig = { // iconfont(我个人的,可以自己建一个iconfont项目维护使用) fontIconExtend: "//at.alicdn.com/t/c/font_3603036_keyavmcqbhn.css", info: { name: '甜点cc', // 用户名 startDate: '2016-10-08', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间 avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 用户头像 blogIcon: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 网站图标 favicon.ico }, sidebar: { infoBackground: 'https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg', // 个人信息背景 titleMsg: '宝宝等你很久啦~🌹🌹', // 侧边栏title信息 navList: [ ['友链', 'https://www.cnblogs.com/all-smile/p/16612170.html', 'icon-pengyoufill'], ['个人主页', 'https://home.i-xiao.space/', 'icon-zhuye'], ], }, banner: { home: { // 主页banner标语, 随机从数组中获取一条文字显示 title: ['每一个不曾起舞的日子,都是对生命的辜负。', '为者常成,行者常至。', '逝者如斯夫,不舍昼夜。', "相逢的还会再相逢。"], // 主页banner图片 background: [ "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg", "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/horse.jpg", "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/background.jpg", "https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset.jpg", "https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset02.jpg" ], }, }, // 失去焦点标签文字 title: { onblur: '(o゚v゚)ノ Hi', }, // 页面加载loading。 loading: { rebound: { tension: 16, }, spinner: { id: 'spinner', radius: 90, } }, // 页脚模式 footer: { style: 2, text: { left: '蓄之既久,其发必速。', }, }, // 友情链接 links: { // 文章底部显示添加友链入口(博客园发送消息) footer: [ /* 格式: Key Description name 昵称 introduction 简介 avatar 头像 url 友链地址 */ ["添加友链", 'https://msg.cnblogs.com/send/甜点cc'], ], }, // 右下角菜单 rtMenu: { qrCode: 'https://xxx.jpg', // 自己设置 reward: { wechatpay: 'https:xxx.jpg' // 自己设置 }, }, animate: { // 主页banner动效配置。 homeBanner: { enable: true, options: { radius: 15, } }, // 文章页标题动效配置。 articleTitle: { enable: true, }, // 文章页banner动效配置 articleBanner: { enable: true, }, // 背景动效。 background: { enable: false, }, // 跟随鼠标动效。 mouse: { enable: false, }, }, }; // 友链配置 window.cnblogsConfig.links.page = [ { name: '甜点cc', // 昵称 introduction: '博客', // 简介 avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 头像 url: 'https://home.i-xiao.space/blog/' // 友链地址 }, ] </script> <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>
注意:
- 上面配置中 加载的 js 脚本,要和 上一步的CSS外链同一个版本(这里是V2.1.0),否则可能会不生效或者出现别的问题
最后
- 主题相关文件(css\js等)可以自己托管维护,可以自行扩展界面交互
- 图片等静态资源可以自行寻找免费图床,当然也可以自己放到
GitHub
上面托管,采用CDN访问(参考这里)
- 托管到博客园上
- 图片等静态资源也可以自行搭建云盘使用😏
👉 方式很多,顺手就行 👈
我的博客园主页请看这里😊欢迎来访问呀🌹