手摸手教你設置部落格園自定義皮膚

• 2022 年 3 月 31 日
• 筆記
• 自定義皮膚

在文章的開始要先感謝Simple Memory的作者BNDong分享的程式碼，我的部落格也是在這個部落格的下進行優化。

官方安裝文檔：Simple Memory 安裝與使用

大家可以先點開我的部落格看一下，看看風格是否喜歡。

感興趣的同學可以按照下面的步驟來開始設置自己的部落格園皮膚了，首先要確定部落格園開通了JS許可權。

基本設置

在這裡設置部落格的標題和皮膚，確定JS許可權已開通，部落格皮膚一定要選擇SimpleMemory

頁面訂製 CSS 程式碼

將simpleMemory.css裡面的內容複製進去，然後要把禁用摸板默認css勾選上，否則複製的css程式碼不會生效。

頁腳 HTML 程式碼

將下面的程式碼複製進去

<!--程式碼複製-->
<script src="//cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--主題-->
<script src="//blog-static.cnblogs.com/files/gshang/gshang.bilibili.big.2020.02.27.4.js" ></script>
<!--scrollTo-->
<script src="//cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
<!--owo表情-->
<script src="//blog-static.cnblogs.com/files/gshang/gshang.owo.2020.01.05.1.js"></script>
<link rel="stylesheet" href="//blog-static.cnblogs.com/files/gshang/gshang.OwO.3.css" />
<!-- import Vue.js -->
<script src="//cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="//blog-static.cnblogs.com/files/gshang/notiflix-2.0.0.min.css">
<!-- 引入組件庫 -->
<script src="//blog-static.cnblogs.com/files/gshang/notiflix-2.0.0.min.js"></script>

部落格側邊欄公告

這裡的設置就很重要，有很多項配置可以按照自己的喜好來設置，所有配置項請參考文檔，下面是我自己的一些配置，喜歡的同學可以直接複製使用，只需要稍微改一下部落格的個人資訊即可。

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'Mr Revees', // 用戶名
        startDate: '2020-08-07', // 入園時間，年-月-日。入園時間查看方法：滑鼠停留園齡時間上，會顯示入園時間
        avatar: '//cdn.jsdelivr.net/gh/Lizuoyang/[email protected]/avatar/avatar.jpg', // 用戶頭像
      },
      sidebar: {
        infoBackground: '//cdn.jsdelivr.net/gh/Lizuoyang/[email protected]/images/user_info_bg.jpg',
        titleMsg: '歡迎訪問本部落格~',
      },
      banner: {
        home: {
            background: [
                "//api.btstu.cn/sjbz/?lx=dongman",
            ],
            title: '誰終將聲震人間，必長久身自緘默。誰終將點燃閃電，必長久如雲漂泊。',
        },
      },
      footer: {
        style: 2,
        text: {
          left: '好好學習',
          right: '天天向上',
        },
      },
      rtMenu: {
        
      },
      switchDayNight: {
          enable: true,       // 是否開啟日/夜間模式切換按鈕
          nightMode: false,   // 強制夜間模式 （版本 >= v2.0.6）
          auto: {             // 自動切換相關配置
              enable: true,  // 開啟自動切換
              dayHour: 5,     // 日間模式開始時間，整數型，24小時制
              nightHour: 19   // 夜間模式開始時間，整數型，24小時制
          }
      },
      animate: {
        homeBanner: {
          enable: true,
          options: {
            radius: 15,
          }
        },
        bannerImages: {
          enable: false,
        },
        backgroundMouse: {
          enable: true,
        },
        articleBanner: {
          enable: true,
        },
      }
    }
</script>
<script src="//cdn.jsdelivr.net/gh/BNDong/[email protected]/dist/simpleMemory.js" defer></script>

大功告成，恭喜大家配置好自己心儀的部落格，趕緊使用起來吧！