部落格園個人部落格申請教程，附自定義漂亮主頁樣式【詳細教程--2024】

LogicYarn發表於2024-08-14

最近在自定義部落格園主題頁面樣式時，遇到一些問題。所以決定寫下此文作為第一篇部落格。
完整主頁效果圖如下（點選右側目錄可以快速跳轉）：

一、申請開通個人部落格

1.1 註冊賬號（步驟略）

1.2 申請寫部落格許可權

在註冊完部落格園賬號後，在首頁右上角點選 -> 我的部落格

點選後，會出現如下圖所示：

按照要求填寫申請理由（例如記錄個人技術成長，學習筆記記錄等），其他資訊據實填寫，然後點選提交

接下來請耐心等待，幾分鐘到半天左右會稽核透過，並出現如下介面：

1.3 稽核透過，開通部落格

點選 ->立即開通部落格

填寫部落格地址字尾（皮膚先隨便選一個），然後點選 -> 註冊 即可：
PS：園子還是很地道的，地址字尾每半年可以更換一次，所以不用太擔心名字起不好

1.4 註冊完成，進入部落格

在註冊完成頁點選對應連結，或在部落格園首頁點選 -> 寫隨筆 ， 即可開始撰寫博文。

二、自定義漂亮部落格主頁樣式

在1.3中選擇的已經有部落格園皮膚，但是部落格園自帶皮膚比較古老，可能不是很符合個人需求。所以我們需要自定義設定一個好看的皮膚，

**在首頁點選，寫隨筆按鈕後，進入此頁面，然後我們點選 ->設定

會有如下介面出現：

2.1 申請js許可權

設定美觀且自定義更強的主頁樣式需要js程式碼的支援，在下圖所示位置點選申請js許可權（理由填“適度美化部落格”等）：

幾分鐘便可稽核完成，在這個過程中，繼續進行下面步驟即可。

2.2 開始自定義

2.2.1 設定部落格皮膚，和程式碼高亮樣式

如下設定部落格皮膚為 Custom， 程式碼高亮按照個人審美設定即可：

2.2.2 設定 【頁面定製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;}}

2.2.3 設定 【頁首 HTML】

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

2.2.4 設定 【頁尾 HTML 程式碼】 （需要 js 許可權開通才能使用）

基本配置：

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {      
    theme: {
      name: 'geek',    //name: 設定部落格主題為 geek ，其他主題請參考`https://www.yuque.com/awescnb/user/kyi19z`
      // 在這裡新增自定義配置
      // 當前為全部使用預設配置
    },
  }
  $.awesCnb(opts)
</script>

如果想要類似博主一樣的完整效果，請參考如下完整程式碼按需修改：

點選檢視程式碼 
 <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
 const opts = {
    theme: {
      name: 'geek',     //name: 設定部落格主題的名稱為 geek
      url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
      log: true,        //是否在控制檯顯示日誌資訊，true 表示啟用
      avatar: "https://ts1.cn.mm.bing.net/th/id/R-C.ed60eef82da5f4430340dc2fed171473?rik=hs40Z24PyoNhMQ&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f11%2f30%2f1583303259241451.jpg&ehk=HQ%2bAxhBxQJPB6gQYX1z4ucXMUz%2bQkdj4I1aTt%2fE%2f7Yk%3d&risl=&pid=ImgRaw&r=0", //部落格的頭像圖片 URL
      headerBackground:
        "https://www.2008php.com/2022_Website_appreciate/2022-01-05/20220105101407.jpg",        //部落格頭部背景圖片的 URL
    },
    highLight: {
      enable: true,
    },
    lineNumbers: {
      enable: true,
    },
    github: {       //是否啟用 GitHub 連結，false 表示禁用
      enable: true,
      url: "https://blog.csdn.net/LogicYarn?spm=1000.2115.3001.5343",
    },
    click: {        //啟用滑鼠點選特效
      enable: true,
    },
    emoji: {
      enable: true,
    },
    darkMode: {     //啟用黑暗模式。
      enable: true,
      autoDark: true,
      autoLight: false,
    },
    signature: {
      enable: true,
      contents: [
        "<b>慾望以提升熱忱，毅力以磨平高山！</b>",
        "我們登上的並非我們所選擇的舞臺，演出並非我們所選擇的劇本。-- 愛比克泰德 (古羅馬哲學家) 。",
        "<b>開頭很簡單，最難的是堅持。</b>",
        "<b>如果你只做能力範圍之內的事，你就永遠不會有進步!</b>",
        "<b>💡 有理想，但不妄想， 💭 有希望，但不奢望， 🐬 有作為，但不妄為。</b>",
      ],
    },
    postSignature: {
      enable: true,
      enableLicense: true,
      content: ['署名-非商業性使用-相同方式共享 4.0 國際', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
    },
    links: {                      //友鏈列表，包含名稱和連結。
      enable: false,
      value: [
        {
          name: "🍞 CSDN主頁",
          link: "https://blog.csdn.net/LogicYarn?spm=1000.2115.3001.5343",
        }
      ],
    },
  };
  $.awesCnb(opts);
</script>

本文至此完畢！歡迎點贊評論哦！

參考：
Github專案theme-geek
在部落格園中安裝皮膚

相關文章