博客美化教程——simpleMemory

参考教程

博客园美化教程，就是当前博主使用的样式🥰。
simpleMemory的官方仓库
仓库中css样式的位置
入门配置
具体配置项

具体流程

申请JS权限

打开位置：点击跳转，找到JS权限一栏

在图中位置，申请权限，申请内容如下：

尊敬的博客园管理员：
您好，我希望用JS美化下我的博客页面，麻烦通过下我的JS权限申请。
感谢您的帮助。

申请成果会给你发邮件，我是晚上收到邮件通知的。

一些简单设置

1. 与上面同样的页面，找到以下位置，选择皮肤为【simpleMemory】
2. 代码高亮栏目，设置如下，字体随意
   

设置侧边栏

基本代码，参考以下两个文档

• 1. simpleMemory的官方仓库
• 2. 仓库中css样式的位置

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'xxx', // 用户名
        startDate: '2024-10-21', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: 'https://xx.png', // 用户头像
      }
    }
</script>
<!-- 插件文件引入 -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.7/dist/simpleMemory.js" defer></script>

注意：如果你使用的不是v2.1.7版本，那么插件文件中的BNDong/Cnblogs-Theme-SimpleMemory@v2.1.7需要换成你自己的版本号，那么如何选择版本呢？

选择样式版本，首先打开一个仓库中css样式的位置，然后自己更换版本如下图

切换版本后将simpleMemory.css的代码重新粘贴，粘贴在下一个环节，同时在本环节中的插件链接中更改版本号。

页面定制css代码

首先勾选禁用模板默认CSS。

然后将上面找到的对应版本的simpleMemory.css的代码粘贴过来。此时就完成了。

其他配置

个性化配置

如果你想个性化配置比如博客背景图等内容，参考链接：具体配置项。

博主的配置格式如下

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'xx', // 用户名
        startDate: '2024-10-21', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: 'https://xx.png', // 用户头像
        blogIcon: 'https://xx.png', // 网站图标
      },
      banner: { // 顶部
        home: {
            background: [
                "https://xx.png", // 个人主页背景图
            ],
        },
      },
      sidebar: { // 侧边栏
        infoBackground: 'https://xx.jpg', // 侧边栏背景图
        titleMsg: '我是idle_life，欢迎访问本博客！',
        // 下拉菜单
        // customList: { 
        //   "title1": { // 标题
        //       "data": [ // 列表数据 ['列表', '链接']
        //           ['我的博客1', 'https://xx'],
        //           ['我的博客2', 'https://xx'],
        //       ]
        //   },
        // },
        navList: [
            ['GitHub', 'https://xx/', 'icon-github'],
            ['B站', 'https://xx', 'icon-bilibili'],
            ['Cnblogs', 'https://xx', 'icon-cnblogs'],
        ],
      },
      rtMenu: { // 右下角菜单
        downScrollDom: '#blog_post_info_block', // 跳至底部位置定义
      },
      switchDayNight: { // 是否开启日夜切换
          enable: false,
      },
    }
</script>
<!-- 插件文件引入 -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.7/dist/simpleMemory.js" defer></script>

相册

图片更换的话，可以在博客园的相册上上传自己的图片，然后将链接换上去就可以了，防止别的网站的图片会被删除。
相册位置：点击跳转 设置相册

侧边栏的控件

点击跳转 编辑侧边栏控件