一款簡單的程式設計師部落格園面板
一款簡單幹淨的部落格園主題,程式碼 Github 地址:cnblog-theme-simpcode,示例部落格:https://www.cnblogs.com/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
六、頁尾Html程式碼
頁尾的內容主要涉及到兩個,一個是博文中圖片的點選放大效果,一個是博文的目錄效果。對應的程式碼是pageFoot.html
.
讀者可以直接將程式碼複製過去使用,也可以將其中涉及到的兩個 js 檔案上傳到自己的部落格檔案中,然後替換成自己的。
其中:jajian.catalog.js
和 jajian.catalog.css
是文章目錄的 js 檔案和 css 檔案。
img.enlarge.js
是博文圖片點選放大的 js 檔案。
七、後記
更多的功能定製可參考 美化你的部落格 | 來看這篇指導教程,喜歡的讀者不妨點解個 star
和收藏,後面會不定期更新