博客园SimpleMemory主题美化

前言

在接触博客园之前，我曾尝试过多种博客系统，包括HEXO和CSDN等，但是HEXO博客的搭建和维护过程相当麻烦，上传博客、美化主题等过程都相当不便，因此发表几篇文章就没有再使用。而CSDN，虽然它发布博客十分的方便（尤其是支持图片自动上传并转换为超链接），但是CSDN的博客主题可定制化水平很低，而且个人认为CSDN界面太过花哨，一点都不简洁，因此一段时间后也放弃了它。

后来，我在博客园发现了一个博客，它的样式整洁又漂亮，极大的吸引了我的注意，从此便一发不可收拾的喜欢上了这个主题。在搭建好我自己的博客并使用一段时间之后，我发现博客园的各项功能都极大的满足了我理想中对博客系统的期望，方便的上传服务、简介的界面、友好的论坛氛围以及极高的可定制化水平都深深吸引了我。

在此，我要对博客园团队表示深深的感谢，感谢你们提供如此完美的博客平台，让我们每个人都能有一个属于自己的“小世界“。

另外，我还要对BNDong及其团队表示感谢，感谢你们提供这么美丽的博客主题，让人爱不释手。

正文

1. 安装配置

本文为v2版本的安装配置教程，请核对使用版本！完整文档请参考Document (bndong.github.io)

1.1 关于博客园后台

进入管理后台：管理后台

1.1.1 设置

设置页面：

本主题当前页面所涉及的配置有：

• 博客皮肤
• 代码高亮
• 页面定制CSS代码
• 禁用模板默认CSS
• 博客侧边栏公告
• 页脚Html代码

1.1.2 选项

选项页面：

本主题当前页面所涉及的配置有：

• 控件显示设置/公告 #86

1.2 获取需要使用的版本

进入主题仓库：GitHub

切换版本：

1.3 博客设置

1.3.1 设置博客皮肤

博客皮肤：SimpleMemory

1.3.2 设置代码高亮

不要勾选显示行号！

1.3.3 设置页面定制CSS代码

CSS代码位置：/dist/simpleMemory.css 拷贝此文件代码至页面定制CSS代码文本框处。

注意：此处无需下载压缩包，在Github仓库中找到该文件并复制CSS代码即可。我在下面也将给出我自己的博客配置，见2.1，喜欢的朋友可以直接拷贝。

1.3.4 禁用模板默认CSS

选中页面定制CSS代码文本框下面的禁用模板默认CSS。

1.3.5 设置博客侧边栏公告

在侧边栏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>

详细配置参考相关文档。

1.3.6 开启公告控件

博客设置 --> 控件显示设置 --> 勾选公告

配置完成保存即可成功应用博皮！

2. 个性化设置

主题个性化配置的各项内容已经在配置项 - Document (bndong.github.io)中予以详细展示，在此我不做过多解释。

下面我只给出，我的博客的基本配置，除了根据配置项添加了几处功能之外，我还对CSS代码进行了些许修改，主要调整了博客的字体格式和字体大小。

2.1 页面定制css代码

此代码我也放在了我的Github上，https://github.com/xiaotong-sun/my-code/blob/master/SimpleMemory_My.css

点击查看代码，如果喜欢直接复制即可，注意要禁用模板css

 

2.2 博客侧边栏公告

 

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        blogIcon: ' ', //请自己添加一个图片链接，如果不需要的话可以删掉
        name: 'UserName', // 用户名
        startDate: '2000-00-00', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: ' ', // 用户头像，请自己添加一个图片链接
      },
      banner: {
        home: {
            title: [
                '每一个不曾起舞的日子，都是对生命的辜负。',
                '公主死去了，屠龙的少年还在燃烧',
                '当你真心渴望追求某种事物的话，整个宇宙都会联合起来帮你完成。', //此处内容可以自行添加或更改
            ],
            background: [
                "https://xiaotong-sun.oss-cn-beijing.aliyuncs.com/bokeyuan/wallhaven-wqve97.png",
                "https://xiaotong-sun.oss-cn-beijing.aliyuncs.com/bokeyuan/wallhaven-z8dg9y.png",
            ],
        },
        article: {
            background: [
                "https://xiaotong-sun.oss-cn-beijing.aliyuncs.com/bokeyuan/wallhaven-wqve97.png",
                "https://xiaotong-sun.oss-cn-beijing.aliyuncs.com/bokeyuan/wallhaven-z8dg9y.png",
            ],
        },
    },
    loading: {
         rebound: {
             tension: 16,
         },
         spinner: {
             id: 'spinner',
             radius: 90,
         }
    },
    progressBar: {
         color   : '#F08080',
    },
    rtMenu: {
        downScrollDom: '#blog_post_info_block',
    },
    animate: {
        homeBanner: {
        enable: false, //这是背景动画，如果需要可以改成true，但是会消耗电脑资源
        options: {
            radius: 15,
            }   
        },
        background: {
            enable: false, //这是背景动画，如果需要可以改成true，但是会消耗电脑资源
        },
    },
    code: {
        options: {
        macStyle: true,
        line: true,
        },
    },
    links: { //友链设置，具体要求请务必查看主题文档 https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/Customization/config?id=page-%e5%8f%8b%e9%93%be%e9%a1%b5
        page: [
            {
                name: 'BNDong', // 昵称
                introduction: 'IT技术类博客', // 简介
                avatar: 'https://blog.dbnuo.com/images/avatar.gif', // 头像
                url: 'https://blog.dbnuo.com' // 友链地址
            },
        ],
    },

    sidebar: { // 列表数据 ['导航名称', '链接', 'icon']
        navList: [
            ['友链', 'url', 'icon-pengyoufill'],
            ['GitHub', 'url', 'icon-github'],
            ['博客园', 'https://www.cnblogs.com/', 'icon-cnblogs'],
        ],
        titleMsg: '欢迎来到我的世界~',
        infoBackground: 'url', //请自己添加一个图片链接
        customList: {
            "我的": { // 标题
                "data": [ // 列表数据 ['列表', '链接']
                    ['日记', 'url'],
                    ['收藏', 'https://wz.cnblogs.com/'],
                    ['写随笔', 'https://i.cnblogs.com/posts/edit'],
                    ['写文章', 'https://i.cnblogs.com/articles/edit'],
                    ['写日记', 'https://i.cnblogs.com/diaries/edit'],
                ],
                "icon": "icon-shoucang" // 配置图标，参考文档：定制化/字体图标库
                },
            },
        },
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

2.3 页首HTML代码

 

<!--鼠标点击效果-->
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

3. 我的博客样式展览

通过以上的操作，我们将得到如下博客样式。由于我的博客样式可能在之后有所调整，呈现的内容会与本教程不相符，此时请参考如下图片所示的样式来决定自己是否喜欢。