在文章的开始要先感谢Simple Memory的作者BNDong分享的代码,我的博客也是在这个博客的下进行优化。

官方安装文档:Simple Memory 安装与使用

大家可以先点开我的博客看一下,看看风格是否喜欢。

感兴趣的同学可以按照下面的步骤来开始设置自己的博客园皮肤了,首先要确定博客园开通了JS权限。

基本设置

在这里设置博客的标题和皮肤,确定JS权限已开通,博客皮肤一定要选择SimpleMemory

页面定制 CSS 代码

将simpleMemory.css里面的内容复制进去,然后要把禁用摸板默认css勾选上,否则复制的css代码不会生效。

页脚 HTML 代码

将下面的代码复制进去

<!--代码复制--><script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script><!--主题--><script src="https://blog-static.cnblogs.com/files/gshang/gshang.bilibili.big.2020.02.27.4.js" ></script><!--scrollTo--><script src="https://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script><!--owo表情--><script src="https://blog-static.cnblogs.com/files/gshang/gshang.owo.2020.01.05.1.js"></script><link rel="stylesheet" href="https://blog-static.cnblogs.com/files/gshang/gshang.OwO.3.css" /><!-- import Vue.js --><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://blog-static.cnblogs.com/files/gshang/notiflix-2.0.0.min.css"><!-- 引入组件库 --><script src="https://blog-static.cnblogs.com/files/gshang/notiflix-2.0.0.min.js"></script>

博客侧边栏公告

这里的设置就很重要,有很多项配置可以按照自己的喜好来设置,所有配置项请参考文档,下面是我自己的一些配置,喜欢的同学可以直接复制使用,只需要稍微改一下博客的个人信息即可。

<script type="text/javascript">    window.cnblogsConfig = {      info: {        name: 'Mr Revees', // 用户名        startDate: '2020-08-07', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间        avatar: 'https://cdn.jsdelivr.net/gh/Lizuoyang/mycdn@1.0/avatar/avatar.jpg', // 用户头像      },      sidebar: {        infoBackground: 'https://cdn.jsdelivr.net/gh/Lizuoyang/mycdn@1.0.1/images/user_info_bg.jpg',        titleMsg: '欢迎访问本博客~',      },      banner: {        home: {            background: [                "http://api.btstu.cn/sjbz/?lx=dongman",            ],            title: '谁终将声震人间,必长久身自缄默。谁终将点燃闪电,必长久如云漂泊。',        },      },      footer: {        style: 2,        text: {          left: '好好学习',          right: '天天向上',        },      },      rtMenu: {              },      switchDayNight: {          enable: true,       // 是否开启日/夜间模式切换按钮          nightMode: false,   // 强制夜间模式 (版本 >= v2.0.6)          auto: {             // 自动切换相关配置              enable: true,  // 开启自动切换              dayHour: 5,     // 日间模式开始时间,整数型,24小时制              nightHour: 19   // 夜间模式开始时间,整数型,24小时制          }      },      animate: {        homeBanner: {          enable: true,          options: {            radius: 15,          }        },        bannerImages: {          enable: false,        },        backgroundMouse: {          enable: true,        },        articleBanner: {          enable: true,        },      }    }</script><script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

大功告成,恭喜大家配置好自己心仪的博客,赶紧使用起来吧!