部落格園自定義皮膚工具推薦:awescnb

丿似锦發表於2024-08-08

簡介

awescnb是一個用於部落格園（Cnblogs）的自定義皮膚和功能增強外掛。它允許使用者透過簡單的配置來自定義其部落格的外觀和增加一些額外的功能。下面是對awescnb的簡要介紹：
功能特點：
自定義皮膚：使用者可以選擇不同的皮膚主題，包括背景顏色、字型樣式等，以個性化他們的部落格頁面。
擴充套件功能：除了皮膚自定義外，還可以新增一些實用功能，如導航條、自定義選單、社交圖示等。
外部 CSS 和 JavaScript：允許使用者引入外部CSS檔案來自定義樣式，以及引入JavaScript指令碼來新增動態效果。
響應式設計：確保部落格在不同裝置上都能良好顯示。

效果展示

這裡以geek皮膚為例

官方文件

  • 安裝皮膚
  • 皮膚列表
  • 配置列表
  • 參考配置
  • 常見問題

使用教程

1.個人部落格首頁 -> 管理 -> 設定

2.部落格皮膚為Custom

3.申請js許可權

理由可以為：適度美化部落格

4.頁面定製 CSS程式碼

  • 勾選禁用模板預設CSS

  • 複製程式碼到頁面定製 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;}}

5.頁首 HTML 程式碼

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

6.頁尾 HTML 程式碼

js許可權需開通，參見上述第3步

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
  const config = {
    theme: {
      name: 'geek',
      avatar: 'https://pic.cnblogs.com/avatar/1289898/20240731144914.png',
      headerBackground: 'https://img2024.cnblogs.com/blog/1289898/202408/1289898-20240807172815249-1939370043.png'
    },
    // 評論輸入框表情
    emoji: {
      enable: true,
    },
    // 個性簽名
    signature: {
      enable: true,
      contents: ["技術之海一望無際， 記憶長流永無止境"],
    },
    links: [
        {
          name: 'CSDN',
          link: 'https://blog.csdn.net/zk_tww',
        },
        {
            name: '皮膚配置',
            link: 'https://www.yuque.com/awescnb',
        },
    ],
  }
  $.awesCnb(config)
</script>

1.這裡選擇的皮膚為geek
2.頭像avatar連結獲取：

部落格管理右上角暱稱 -> 進入個人主頁

右鍵頭像 -> 複製圖片地址

3.背景圖headerBackground設定：開啟新隨筆(建議Markdown) -> 上傳圖片 -> 獲取圖片連結

7.儲存

常見問題

1.文章目錄無法正常展示

標題需使用正確標題格式，文章編輯建議採用Markdown編輯器

2.關注數、粉絲數等未正常展示

管理 -> 選項 -> 側邊欄控制元件
勾選公告

3.每頁展示最後一行無法鋪滿

管理 -> 選項
首頁與RSS每頁顯示選擇3的倍數，如:15

4.部分配置項無法生效

請前往官方皮膚列表檢視所需皮膚是否支援該配置

結束

相關文章