寫好博客園筆記，或許你還差一個精緻主題

近兩年沒有整理髮布筆記到博客園，偶然逛園子發現好看的主題，再次重拾鍵盤，敲出點點滴滴。

給你們展現設置後的主界面：

也可點擊查看個人博客參考：https://www.cnblogs.com/luwenqing/

 

主題倉庫地址：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

自定義配置文檔地址：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/Customization/config

 

 

以下爲配置博客主題全過程：

主要涉及的配置模塊有：

• 博客皮膚選定

• 頁面定製CSS代碼

• 博客園側邊欄公欄

 

 

主題倉庫下載

下載github優秀的開源項目，無奈國內訪問下載速度賊慢，利用百度找到一種簡便的解決方案，經過國內代碼託管平臺 --- 碼雲，導入並下載github源代碼。

導入github源代碼至碼雲

默認大家都已經註冊登陸，那我就從導入倉庫開始，先複製github主題倉庫連接，打開碼雲，以下操做：

 

將碼雲倉庫的代碼下載到本地

進入到倉庫導入的項目下，點擊下載zip包便可。

 

 

博客皮膚選定

選擇博客皮膚： SimleMemorry

 

 

頁面定製CSS代碼

CSS代碼位置下載源碼的 /src/style/base.min.css，拷貝此文件內容至頁面定製CSS代碼文本框處。勾選「禁用模板默認CSS」

能夠自定義修改CSS樣式，修改能夠參考 /src/style/base.css文件。

 

 

博客園側邊欄公欄

 側邊欄須要先申請JS編寫權限，由博客園管理員贊成後方可以使用。

 在側邊欄設置如下代碼：

 1 <script type="text/javascript">
 2     window.cnblogsConfig = {
 3         GhVersions    : 'v1.2.3', // 版本
 4         blogUser      : "L的我的博客", // 用戶名
 5         blogAvatar    : "https:xxx.jpg", // 用戶頭像
 6         blogStartDate : "2018-03-12", // 入園時間。入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間
 7         homeTopImg    : ["https:xxx.jpg",], //主頁背景圖
 8         homeBannerTextType: "one", // 主頁副標題 - 每日隨機獲取一句話
 9         codeLineNumber: true, // 代碼顯示行號
10         footerStyle: 2, //設置頁腳樣式 - 1和2
11         bottomText: {left : "好好學習",right: "每天向上", } // 設置頁腳標題
12 ​
13 }
14 </script>
15 <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.2.3/src/script/simpleMemory.min.js"></script>

 

用戶頭像：能夠將圖片放在碼雲倉庫，獲取查看照片地址。因爲本人前端不精，其餘的優化可參考自定義配置文件進行更改，各位大佬自行發揮。

高質量圖片網站推薦，用於更換頭像、背景圖片：

Life of Pix

Unsplash

Pixabay

Pexels

visualhunt

Gratisography

StreetWill

IM FREE

FancyCrave

 

 

如何將圖片上傳至碼雲倉庫

1. 建立git倉庫

 

2. 將文件夾初始化成git可管理的倉庫

   桌面新建空文件夾，將圖片放置在文件夾內，空白處右鍵選擇GitBash Here，進入git命令行界面

1 git config user.name      查詢當前登陸的git用戶名  
2 git config user.email     查詢當前登陸的帳戶郵箱
3 git init   　　　　　　　　 將文件夾初始化成git可管理的倉庫
4 git status 　　　　　　　　 查看當前狀態

 

3. 將文件添加並提交到倉

1 git add .    　　　　　　　　將該目錄全部的文件添加到倉庫，注意點前面有空格
2 git commit -am "提交信息"   提交到倉庫

 

 4. 上傳圖片至碼雲倉庫

1 git remote add origin 倉庫地址   添加圖片到倉庫 （複製碼雲倉庫的地址）
2 git push -u origin master       將本地倉庫推送到遠程倉庫

完成後刷新一下就能看到上傳的圖片了，上傳後複製圖片的連接放置在博客園側邊欄代碼設置裏面就能夠了。

新建的遠程的倉庫的空的，因此須要加上-u參數，若遠程倉庫有內容後，下次再從本地庫上傳內容的時候只需下面這樣就能夠了：$ git push origin master。