SimpleMemory 介绍
SimpleMemory Theme Extension是一个专门给博客园美化的前端插件, 它是由BNDong大神基于博客园SimpleMemory主题来开发的的扩展美化插件,非常好用!
插件官方地址 https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2.1/dist/
如图
前期准备
SimpleMemory插件需要我们在博客园的后台先去开通js权限，如果你还没有开通，那么请先申请权限!
申请的办法也很简单，直接进入到博客园的后台，在设置项中找到js权限申请开通即可!
如果你是未申请的会显示申请开通，一般需要半天左右时间审核
我这里已经申请过了，所以显示的就是JS权限 ： 已开通
如图
注意:申请的时候需要给管理员附带上申请通过的理由，不要乱写，最好是写想要通过插件来美化博客就行!
然后我们就可以开始去下载SimpleMemory这个插件了!
SimpleMemory 下载
SimpleMemory目前最新的版本为v2.1.4 我们可以直接先到github上去下载相关文件
地址: https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
如图
历史版本随着博客园不断迭代，会出现兼容性问题, 所以都建议大家使用最新版本, 时不时也可以来官方看一下，有更新就迭代上去!
下载好之后，解压缩备用!
如图
博客后台设置
选项设置
首先还是进入到我们的博客园的后台管理, 然后打开选项 确认博客需要开启/关闭哪些控件
要是不清楚的话，你可以按照官方的文档上的要求来进行开启和关闭!
如图
其他不用更改点击保存即可!
皮肤设置
同样还是进入到我们的博客园的后台管理, 然后打开设置
将皮肤主题设置为SimpleMemory 因为这个插件就是基于这个开发的!
然后在代码高亮的选项中找到渲染引擎设置为highlight.js
如图
代码设置
现在就可以来定制我们呢的博客园效果代码了!
在设置选项中找到页面定制CSS代码, 把禁用模板默认CSS勾选上
然后我们就可以去找到下载的SimpleMemory把里面的CSS代码拷贝到这里
也就是说在你下载的Cnblogs-Theme-SimpleMemory-2.zip文件中找到/dist/simpleMemory.css这个文件
如图
把里面的CSS代码全部拷贝到页面定制CSS代码的编辑器中
如图
最后找到博客侧边栏公告,直接复制以下配置代码
默认基础配置如下
<script type="text/javascript">
window.cnblogsConfig = {
info: {
//用户名
name: '极客小俊GeekerJun',
//入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
startDate: '2011-11-17',
//头像 URL 地址
avatar: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png',
},
}
</script>
<!-- 插件文件引入 -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.3/dist/simpleMemory.js" defer></script>
就像这样子:
如图
完成设置
最后保存你就可以预览效果啦!
如图
看是不是很简单呢! 看到这个效果说明我们应用SimpleMemory插件成功了!
关于cnblogsConfig里面还有很多配置参数, 我在接下来的教程中会挨个讲到!
