一款簡單幹淨的部落格園主題，程式碼 Github 地址：cnblog-theme-simpcode，示例部落格：https://www.cnblogs.com/noobgod/。

一、準備

在開始之前，必須要確保你已經申請了部落格園 JS 許可權，具體申請過程就不詳細介紹了，讀者自行網上搜索，很簡單的。

本面板如果經常逛部落格的讀者應該很熟悉，很多博主都在使用。最原始的面板主人也無從考證了。這個面板是博主自己整理調整出來的，並添加了一些易用的功能例如目錄，程式碼高亮等。

二、開始

部落格面板預設選擇SimpleMermory

三、頁面定製CSS程式碼

page.css，將裡面的內容 Copy 到 頁面定製css程式碼

如果需要修改部落格上面的那個頭像，可定位到如下css 程式碼進行修改：

#header::before {
    background-image: url(//images.cnblogs.com/cnblogs_com/noobgod/1307057/o_20190602-13474.jpg);
    background-size: contain;
    border: 0 solid #fff;
    border-radius: 150px;
    box-shadow: 0 -1px 12px -4px #000;
    content: " ";
    display: block;
    height: 150px;
    margin-bottom: 20px;
    margin-left: 50%;
    position: relative;
    transform: translate3d(-50%, 50%, 0px);
    width: 150px;
}
 

將程式碼中 background-image 的 url 圖片路徑修改為讀者自己的就可以了。

四、部落格側邊欄公告

側邊欄公告是針對側邊的公告欄進行個性化定製的，在這裡可以將自己的微信公眾號、個人部落格、瀏覽量等相關資訊釋出在上面。

具體的css 程式碼是 sideBar.html，將裡面的內容 Copy 進程式碼框中即可。當然程式碼中的資訊是博主我的，所以需要你們自行替換下。

五、頁首Html程式碼

頁首程式碼我這裡沒有新增很多額外的功能，只添加了一個 Github的絲帶連結，就是右上角的Github圖片，點選之後跳轉博主的Github。

對應的程式碼是 pageHeading.html

六、頁尾Html程式碼

頁尾的內容主要涉及到兩個，一個是博文中圖片的點選放大效果，一個是博文的目錄效果。對應的程式碼是pageFoot.html.

讀者可以直接將程式碼複製過去使用，也可以將其中涉及到的兩個 js 檔案上傳到自己的部落格檔案中，然後替換成自己的。

其中：jajian.catalog.js 和 jajian.catalog.css 是文章目錄的 js 檔案和 css 檔案。
img.enlarge.js是博文圖片點選放大的 js 檔案。

七、後記

更多的功能定製可參考 美化你的部落格 | 來看這篇指導教程，喜歡的讀者不妨點解個 star 和收藏，後面會不定期更新