博客园美化样式

 写在最前

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

 界面美化来源

我的首页界面美化均通过博客园大佬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>

至此差不多就配置好了，接下来可以做一些自己想要的修改。

 个性化修改问题

个性化修改主要是针对于博客侧边栏公告中的配置项进行修改，以及音乐播放器中的播放列表获取等。
关于配置项配置方式，在这里都有说明，就不再重复叙述了，这里主要是针对于修改的过程中遇到的一些问题描述一下

 图片想用自己本地的怎么办

 在修改一些关于图片的地方，我们都需要提供图片的链接，然而一些喜欢的图片已经保存在本地但是无法获取其URL怎么办。

我建议使用QQ空间上传图片，QQ空间可以上传原图，对于一些高清图片最好不过了，博客园的相册不可上传2M以上的图片，没有办法。

在空间上传图片之后点击原图便会跳转至图片界面，此时复制其URL即可使用，不过此博客园样式建议使用https的链接，但问题不大。

  

 想要更改播放器的播放列表

 播放器的播放列表对网易云音乐和QQ音乐都有支持，我是用的是网易云音乐，比较简单，在网页版云音乐切换到你喜欢的歌单界面，查看其url便可知道该歌单的ID。

此时修改页脚HTML代码中播放器部分 class="aplayer" 的div中的data-id属性值即可。至于QQ音乐，好像只支持单曲。。没试过，不了解。

如何配置一些细节样式

首先如果你觉得作者提供的api配置不够多，一些细节的地方想要修改却修改不到的话，唯一的办法就是把整个项目的源码下载下来，在修改完成之后上传为自己的项目，并使用自己的地址。

下载项目源码

点击前往Gitlab下载项目源代码，选择要下载的分支版本号

选择版本后点击Code，选择 DownloadZip,下载整个项目至本地

修改源码 

 下载项目之后，在编辑器中导入项目，以Webstorm为例,以下为导入成功后的项目目录

 

此时就可以开始修改源代码了

比如还想要修改尾部的某个地方，可以在浏览器打开该界面之后按F12，打开浏览器的调试工具

 点击①处，然后鼠标选择②处，就可以跳出③处的结果，如图可见，该元素有对应的id值，拿到这个id之后去项目里搜索这个id对应的样式设置

在项目中搜索themeInfo 后发现在 base.js中有设置，前往查看修改即可

 如下图设置方式，将该代码注释掉即可不显示此div

之后如果还有想要修改的地方，同样的方式修改就可以了，接下来就是比较重要的，就是设置使用自己的项目代码

上传代码至Github

上传至Github的方式这里就不多描述了，这里有个博客介绍的也还可以，按照说明操作即可  https://blog.csdn.net/qq_36759224/article/details/86936453

到这一步就接近成功了，只要测试能直接访问到你的文件，就可以继续下一步了

修改博客侧边公告设置

前往博客网设置界面，在此处修改相关信息，将 GhVersion和GhUserName修改为上一步中的你的版本号和用户名即可

 然后再将这个js的加载路径也修改为你自己的就可以了，此时就大功告成了，保存之后查看一下效果就可以了

  写在最后

2020-3-2 ，这是我第一次在博客园中写博客，虽然经验不足，语言表达欠缺，但我已经很用心了，希望浏览到此文章的每个人可以寻找到想要解决的问题的答案，也祝大家有一个非常漂亮的博客园首页！
希望疫情早日过去！祝愿大家都健健康康！