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

Mr_Revees發表於2022-03-31

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

官方安裝文件:Simple Memory 安裝與使用

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

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

基本設定

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

頁面定製 CSS 程式碼

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

頁尾 HTML 程式碼

將下面的程式碼複製進去

<!--程式碼複製-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--主題-->
<script src="https://blog-static.cnblogs.com/files/gshang/gshang.bilibili.big.2020.02.27.4.js" ></script>
<!--scrollTo-->
<script src="https://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
<!--owo表情-->
<script src="https://blog-static.cnblogs.com/files/gshang/gshang.owo.2020.01.05.1.js"></script>
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/gshang/gshang.OwO.3.css" />
<!-- import Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/gshang/notiflix-2.0.0.min.css">
<!-- 引入元件庫 -->
<script src="https://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: 'https://cdn.jsdelivr.net/gh/Lizuoyang/mycdn@1.0/avatar/avatar.jpg', // 使用者頭像
      },
      sidebar: {
        infoBackground: 'https://cdn.jsdelivr.net/gh/Lizuoyang/mycdn@1.0.1/images/user_info_bg.jpg',
        titleMsg: '歡迎訪問本部落格~',
      },
      banner: {
        home: {
            background: [
                "http://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="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

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

相關文章