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里面还有很多配置参数, 我在接下来的教程中会挨个讲到!