博客园美化样式

写在最前

作为一个新手入园，看到别人家的园子好看极了，于是乎我就开始了美化首页之旅，如果你也喜欢我的界面样式风格的话，欢迎一起使用！话不多说，以下是我的一些美化过程~

界面美化来源

我的首页界面美化均通过博客园大佬BNDong的文章《关于本博客皮肤样式》指导完成，当然我的文章并不只是搬运加推荐而已，接下来我还会介绍关于我在搬运使用过程中遇到的一些问题及解决方式，希望能够帮助到第一次修改博客园样式的一些朋友。这是大佬的首页样式，给大家先预览下。

我的美化过程

首先我们需要有JS权限，然后切换至博客园的管理界面，进行样式修改。在下面我会直接贴出我的相关样式代码，如果懒得按照大佬的文章一步一步实现自定义界面的话，可将我贴出的代码粘贴过去即可。

点击博客园管理界面的设置

选择博客皮肤为 SimpleMemory

在②页面定制CSS代码处贴上以下CSS代码，代码来源GitHub

请自行前往GitHub复制css样式代码，代码过长，在文章中展示容易卡，点击跳转

然后勾选③处的禁用模版默认CSS
在博客侧边栏公告添加以下代码

暂时不需要用到的我已经注释掉，大家也可以根据需求添加配置项，配置方式点这里，此项配置需要注意的是需要在选项界面勾选"公告"一项，即代码下方的示意图

 <script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.2.4', // 版本
        blogUser      : "lngrid ln grid", // 用户名
        blogAvatar    : "http://r.photo.store.qq.com/psc?/V10lqr6k12fA6e/gliYV*h0f2f2HjcOdYSYvUMzXh*KATNPwBO2nOicEFzhH9d2on8GwcM58jVfeEvJmwd5Y3SaKplkT7sFrvDqNKzN*iwNUtpBDtq4NBOjJ08!/r", // 用户头像
        blogStartDate : "2019-12-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间

    webpageTitleOnblur: "(◍´꒳`◍) Hi", // 当前页失去焦点，页面title显示文字
        webpageTitleOnblurTimeOut: 500, // 当前页失去焦点，页面title变化，延时时间，单位毫秒
         webpageTitleFocus: "(*´∇｀*) Hello ", // 当前页获取焦点，页面title显示文字，显示后延时恢复原title
         webpageTitleFocusTimeOut: 1000, // 当前页获取焦点，页面title变化，延时时间，单位毫秒
         webpageIcon: "https://r.photo.store.qq.com/psc?/V10lqr6k12fA6e/gliYV*h0f2f2HjcOdYSYvd3j5GVWWKq12SkTeqDcXXWyKhkxyH4OZNUoBjwvp5xpywInUBy9Ypt.IM4D*0kEF7rp*9SqT7RgcBTZZk25Hms!/r", // 网站图标

   menuUserInfoBgImg: 'https://r.photo.store.qq.com/psc?/V10lqr6k479rqc/gliYV*h0f2f2HjcOdYSYvd8fTR7CokimHZLCng6D9C.2gMF04Uz8aSqPoCOHdyVy7Cx0hnkzI6KIVToMpcoW0r53uLJy73XmcMdUwEVnnro!/r',   //菜单个人信息背景图
         footerStyle:1,  //页脚样式
         homeBannerTextType: "jinrishici",  //主页 banner 上的标语获取源，默认为 jinrishici 每次刷新随机获取一句古诗词
         // ---- 主页配置 ----
    homeTopImg: [ // 主页图片Url，推荐尺寸>= 1920*1080，支持多张，每次刷新随机设置一张
             "https://r.photo.store.qq.com/psc?/V10lqr6k12fA6e/gliYV*h0f2f2HjcOdYSYveqxD7ELX3ygKOFsF9cymBcjLYnImFkJ9WkXjYzBkxaXLV8XZw78HR.jyi2oEE*RDABB*h5eERGugAM*pbwI.ME!/r"
         ],
         homeBannerText: "", // 主页头图上的标语，设置此选项会固定显示文字，默认为空，自动获取一句。

    // ---- 随笔页配置 ----
   essayTopImg: [ // 随笔页图片Url，支持多张，每次刷新随机设置一张
             "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-569548.png"
         ],
          essayCodeHighlightingType: 'cnblogs', // 代码主题插件类型：cnblogs || highlightjs || prettify
          essayCodeHighlighting: 'cnblogs', // 代码高亮主题，具体主题参考文档
     essaySuffix: {codeImgUrl   : '', // >= v1.1.5 左侧图片设置，不配置使用 window.cnblogsConfig.blogAvatar
         aboutHtml    : '', // 关于博主，不配置使用默认
         copyrightHtml: '', // 版权声明，不配置使用默认
         supportHtml  : '',  // 声援博主，不配置使用默认
     },

        // ---- 页脚配置 ----
        /* bottomBlogroll: [ // 友情链接，[[链接名,链接]....]
            ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
            ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
            ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
            ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
            ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ],
      */
        bottomText: { // 页脚标语
                icon: "❤️", // 图标
                    left: "「今でもあなたは私の光。」", // 图标左侧文字
                    right: "如今你依旧是我的光。" // 图标右侧文字
            },

         // ---- 控制台输出 ----
         consoleList: [
                 ['lngird CNBlogs', 'https://www.cnblogs.com/ingrid'],
                 ['lngrid Email', 'leonan0500@foxmail.com']
            ],
           themeAuthor: true, // 是否显示主题作者
            menuCustomList: {
               "文章": { // 标题
                   "data": [ // 列表数据 ['列表', '链接']
                                 ['待上架', 'https://www.cnblogs.com/ingrid/'],
                            ],
                           "icon": "icon-brush_fill" // 配置图标，参考文档：定制化/字体图标库
                    },
             },
    }
 </script>
 <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.2.4/src/script/simpleMemory.min.js"></script>

页脚HTML代码部分添加以下代码

页首HTML不需要进行设置，这个代码是包含左下角的音乐播放器及右下角的相关菜单的，关于音乐播放器的详细设置，请查看这里，不过我也会在稍候进行一些基本的讲解

<!-- 滚动进度 -->
<div id="bottomProgressBar"></div>

<!-- 音乐播放器 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-id="2859089940" data-lrctype="0" data-server="netease" data-type="playlist"
     data-fixed="true" data-listfolded="true"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

<!-- 右下角菜单 -->
<div id="rightMenu"></div>