寫在最前

作為一個新手入園，看到別人家的園子好看極了，於是乎我就開始了美化首頁之旅，如果你也喜歡我的界面樣式風格的話，歡迎一起使用！話不多說，以下是我的一些美化過程~

界面美化來源

我的首頁界面美化均通過博客園大佬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>