博客园Simple Memory皮肤设置

博客园Simple Memory皮肤设置

文章说明

本文写于编程小白开通博客园不久后，根据大佬之前的文章分享想设置自己的博客园主页皮肤，美化博客园的显示效果，提高个人使用体验。

皮肤看个人审美喜好，代码均取自大佬分享，着重记录说明本人在配置过程中遇到的问题以及解决方案

界面效果展示

配置过程

1. 申请JS权限

进入博客园后台，在设置页界面申请（审核通过一般很快）

一定要先申请JS权限！否则后面的配置将无法显示，有可能遇到界面一片空白的情况。

2. 页面定制CSS代码

我拷贝的大佬的代码，具体路径如下：

GitHub项目地址：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

1. 选择需要使用的版本

   Tags选择v1.3.4

• 遇到问题: 由于我开通博客园时间较晚，网上搜集到的资料基本都是20年以前的，还没有v2.版本，找到的大多数资料均未显示这一步，导致我刚开始连CSS代码都找不到。

代码路径：src/style/base.min.css

版本1.3.0至1.3.4均包含有base.min.css，v2.以后则没有base.min.css了。我选择了最新版。

2. 复制代码到"页面定制CSS代码"处,然后勾选"禁用模板默认CSS"

   必须要勾选禁用模板默认。

3. 设置博客皮肤

   选择SimpleMemory

4. 设置代码高亮

   渲染引擎：highlight.js

   显示行号：取消勾选！

   主题样式：cnblogs

3. 设置博客侧边栏公告

1. 设置侧边栏HTML代码

   <script type="text/javascript">
       window.cnblogsConfig = {
         info: {
           name: 'userName', // 用户名
           startDate: '2021-01-01', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
           avatar: 'http://xxxx.png', // 用户头像
         },
       }
   </script>
   <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>
   

   用户头像的图片地址可在主页内鼠标放在头像图片上右键选择复制图片链接获取。

   注意：插件版本号我直接引用了作者最新文章中的2.1.0版本，不同版本侧边栏配置效果不同，可根据个人喜好自行尝试配置。

• 遇到问题: 在尝试不同侧边栏插件JS包时有的版本会出现bug，由于网上教程多为20年以前的版本，我遇到的问题也没有查到具体解决方案，我就直接选用了最新版本的插件。

一定要记得保存修改！

2. 开启公告栏控件

   在博客后台进入“选项”页面，在“侧边栏控件”下一定要把“公告”选项勾选。

3. 保存修改，进入“我的博客”查看效果