部落格園美化-Awescnb主題

最爱喝开水發表於2024-11-03

本文主要記錄安裝Awescnb皮膚的安裝過程，以及我做的配置，作為備份。

一、安裝皮膚

安裝超級簡單，根據官方文件，一分鐘就搞定。

image-20241103165911405

首頁HTML：

<div id="loading"><div class="loader-inner"></div></div>

頁面定製CSS：

#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}

頁尾HTML程式碼：

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
  const config = {
    // 預設啟用皮膚 'reacg'
    // 在這裡新增自定義配置
    // 當前為全部使用預設配置
  }
  $.awesCnb(config)
</script>

點選儲存就配置好了。

二、更換其他皮膚

在官方文件中，找到喜歡的皮膚，將程式碼複製到【頁尾HTML程式碼】中。

image-20241103170107855

三、自定義配置

參考官方文件進行自定義配置。

image-20241103200349637

配置過程中，我發現，需要將【頁尾HTML程式碼】中的const config部分刪除，不然會與側邊欄公告中的程式碼產生重疊，導致配置不生效。實際上，就算將整個也叫HTML內容刪除也是可以的，

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
將下面這部分刪除
<script>
  const config = {
    // 預設啟用皮膚 'reacg'
    // 在這裡新增自定義配置
    // 當前為全部使用預設配置
  }
  $.awesCnb(config)
</script>

按照官方文件，說是需要再側邊公告欄中修改程式碼進行自定義配置。

我的【部落格側邊公告欄】的程式碼

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {
    // 基本配置
    theme: {
      //這裡快速切換主題
      //name: 'reacg',
      name: 'geek',

      color: '#020202',
      // 頭像圖片連結
      avatar: 'https://pic.cnblogs.com/avatar/3258066/20241103172203.png',
      //頭部背景圖（reacg無法使用）
      headerBackground: 'https://images.cnblogs.com/cnblogs_com/blogs/800087/galleries/2348135/o_240729141120_34_1K.webp',
      //網站圖示(無法使用)
      favicon: 'https://images.cnblogs.com/cnblogs_com/blogs/800087/galleries/2348135/t_240416131922_%E9%A3%8E.png',
    },
    //個性簽名（reacg中顯示在右側頭像下面）
    signature: {
      enable: true,
      contents: [
        "歡迎來到 <b style='color:#ff6b81'>我的部落格</b>.",
        "<b>O(∩_∩)O哈哈~</b>",
      ],
    },
    //自定義連結（reacg顯示在底部頁尾geek則是顯示在左側）
    links: [
      {
        name: '我的個人部落格',
        link: 'https://www.lchuang.top',
      },
    ],
    //背景圖片
    bodyBackground: {
      enable: true,
      //圖片連結
      value: 'https://images.cnblogs.com/cnblogs_com/blogs/800087/galleries/2348135/t_240729141120_34_1K.webp',
      //背景顏色
      // value:'#E5EEF7',
      // 內容透明度
      opacity: 0.85,
      // 背景圖片是否重複
      repeat: false,
    },
    //深色模式（reacg預設就有，geek需要新增了才有）
    darkMode: {
      enable: true,
      autoDark: false,
      autoLight: false
    },
    //碼雲（reacg顯示在頂部導航欄,geek無法使用）
    gitee: {
      enable: true,
      color: '#C71D23',
      url: 'https://gitee.com/chuang_code_0',
    },
    //音樂播放器（reacg中預設開啟，所以在這關閉一下）
    //在沒有關閉播放器之前,reacg主題，每次進入部落格，瀏覽器標籤旁邊都會轉圈圈轉很長時間，但是頁面已經載入出來了，估計就是在載入這個播放器相關資源
    musicPlayer: {
      enable: false,
    },


    //圖表(geek中無法顯示)(目前用不到，但是比較好看，就先留著)
    //   charts: {
    //     enable: true,
    //     labels: [
    //       'Vue',
    //       'React',
    //       'Flutter',
    //       'Java',
    //       'NodeJs',
    //       'TypeScript',
    //       'CSS',
    //     ],
    //     datasets: [
    //       {
    //         label: 'My First Chart',
    //         data: [65, 59, 90, 81, 56, 55, 40],
    //         fill: true,
    //         backgroundColor: 'rgba(255, 99, 132, 0.2)',
    //         borderColor: 'rgb(255, 99, 132)',
    //         pointBackgroundColor: 'rgb(255, 99, 132)',
    //         pointBorderColor: '#fff',
    //         pointHoverBackgroundColor: '#fff',
    //         pointHoverBorderColor: 'rgb(255, 99, 132)',
    //       },
    //       {
    //         label: 'My Second Dataset',
    //         data: [28, 48, 40, 19, 96, 27, 100],
    //         fill: true,
    //         backgroundColor: 'rgba(54, 162, 235, 0.2)',
    //         borderColor: 'rgb(54, 162, 235)',
    //         pointBackgroundColor: 'rgb(54, 162, 235)',
    //         pointBorderColor: '#fff',
    //         pointHoverBackgroundColor: '#fff',
    //         pointHoverBorderColor: 'rgb(54, 162, 235)',
    //       },
    //      ],
    // },
  }
  $.awesCnb(opts)
</script>

實際上，可以把頁尾HTML中的所有程式碼都刪除的，頁尾中最重要的就是下面這個

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js">

而在側邊公告欄中也引用了一個js檔案，我覺得它們就是同一個檔案

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>

後面嘗試了之後，發現，將自定義的程式碼放在頁尾中，公告欄程式碼為空；或者反過來，頁尾為空，將自定義程式碼放在公告欄中，結果都是一樣的。

相關文章