一款簡單的程序員博客園皮膚

一款簡單幹淨的博客園主題，代碼 Github 地址：cnblog-theme-simpcode，示例博客：noobgod。

1、準備

在開始以前，必需要確保你已經申請了博客園 JS 權限，具體申請過程就不詳細介紹了，讀者自行網上搜索，很簡單的。

本皮膚若是常常逛博客的讀者應該很熟悉，不少博主都在使用。最原始的皮膚主人也無從考證了。這個皮膚是博主本身整理調整出來的，並添加了一些易用的功能例如目錄，代碼高亮等。

2、開始

博客皮膚默認選擇SimpleMermory

3、頁面定製CSS代碼

page.css，將裏面的內容 Copy 到 頁面定製css代碼 框中，同時將選項禁用模板默認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 圖片路徑修改成讀者本身的就能夠了。

4、博客側邊欄公告

側邊欄公告是針對側邊的公告欄進行個性化定製的，在這裏能夠將本身的微信公衆號、我的博客、瀏覽量等相關信息發佈在上面。

具體的css 代碼是 sideBar.html，將裏面的內容 Copy 進代碼框中便可。固然代碼中的信息是博主個人，因此須要大家自行替換下。

5、頁首Html代碼

頁首代碼我這裏沒有添加不少額外的功能，只添加了一個 Github的絲帶連接，就是右上角的Github圖片，點擊以後跳轉博主的Github。

對應的代碼是 pageHeading.html，一樣讀者須要執行替換成本身的Github 連接。

6、頁腳Html代碼

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

讀者能夠直接將代碼複製過去使用，也能夠將其中涉及到的兩個 js 文件上傳到本身的博客文件中，而後替換成本身的。

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

7、後記

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