一款簡單干凈的博客園主題,代碼 Github 地址:cnblog-theme-simpcode,示例博客:noobgod。
一、准備
在開始之前,必須要確保你已經申請了博客園 JS 權限,具體申請過程就不詳細介紹了,讀者自行網上搜索,很簡單的。
本皮膚如果經常逛博客的讀者應該很熟悉,很多博主都在使用。最原始的皮膚主人也無從考證了。這個皮膚是博主自己整理調整出來的,並添加了一些易用的功能例如目錄,代碼高亮等。
二、開始
博客皮膚默認選擇SimpleMermory
三、頁面定制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 圖片路徑修改為讀者自己的就可以了。
四、博客側邊欄公告
側邊欄公告是針對側邊的公告欄進行個性化定制的,在這里可以將自己的微信公眾號、個人博客、瀏覽量等相關信息發布在上面。
具體的css 代碼是 sideBar.html
,將里面的內容 Copy 進代碼框中即可。當然代碼中的信息是博主我的,所以需要你們自行替換下。
五、頁首Html代碼
頁首代碼我這里沒有添加很多額外的功能,只添加了一個 Github的絲帶鏈接,就是右上角的Github圖片,點擊之后跳轉博主的Github。
對應的代碼是 pageHeading.html
,同樣讀者需要執行替換成自己的Github 鏈接。
六、頁腳Html代碼
頁腳的內容主要涉及到兩個,一個是博文中圖片的點擊放大效果,一個是博文的目錄效果。對應的代碼是pageFoot.html
.
讀者可以直接將代碼復制過去使用,也可以將其中涉及到的兩個 js 文件上傳到自己的博客文件中,然后替換成自己的。
其中:jajian.catalog.js
和 jajian.catalog.css
是文章目錄的 js 文件和 css 文件。
img.enlarge.js
是博文圖片點擊放大的 js 文件。
七、后記
更多的功能定制可參考 美化你的博客 | 來看這篇指導教程,喜歡的讀者不妨點解個 star
和收藏,后面會不定期更新。