部落格園美化顯示效果效果

歆布發表於2022-03-27

關於部落格園後臺

  • 首先進入後臺管理頁面，點選設定，進入設定頁面

 

  • 選項頁面

 

 

  •  進入GitHub，切換版本：

 

 

  • 設定部落格皮膚：SimpleMemory

 

 

  •  設定程式碼高亮（不要勾選顯示行號！！！）

 

 

 

  •  設定頁面定製CSS程式碼：

CSS程式碼位置在GitHub中：/dist/simpleMemory.css   拷貝此檔案程式碼至頁面定製css程式碼文字框處（選中頁面定製css程式碼文字框下面的禁用模板預設css）

 

 

  •  設定部落格側邊欄公告：

在側邊欄HTML程式碼中設定一下程式碼：

部落格園美化顯示效果效果 
 1 <script type="text/javascript">
 2     window.cnblogsConfig = {
 3       info: {
 4         name: 'userName', // 使用者名稱
 5         startDate: '2021-01-01', // 入園時間，年-月-日。入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間
 6         avatar: 'http://xxxx.png', // 使用者頭像
 7       },
 8     }
 9 </script>
10 <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>
View Code

詳細配置參考相關文件

  • 開啟公告控制元件

部落格設定 --> 控制元件顯示設定 --> 勾選公告

配置完成儲存即可成功應用博皮！

------------------------------------------------------------------------------------------------------------------------分割線-------------------------------------------------------------------------------------------------------------------------------------------------

關於上文的詳細配置文件，補充幾點：

主頁圖片配置：

 

 

 

 

  •  等很多地方寫著這樣連線的（"https://x1.jpg"），這裡的連結是你想要新增的圖片的連結，不可以是本地的圖片或者是某個網站的圖片。然後我找了很久的圖片的網站，比如：百度相簿、網頁的圖片等，右鍵圖片點選“在新的選項頁開啟”，然後複製新的網頁連結，這是不可以的！！！這個辦法行不通！！！這是我的想法是找一個圖片連結生成器，但是很快我就發現，那些免費的連結生成器都是有時間限制的，只有使用付費連結生成器或者是在某個雲伺服器上才可以每次重新整理時訪問，你可以理解成每次開啟或者重新整理你的主頁，都通過訪問這些網站來顯示圖片。 這是我發現的一個圖片網站，上面的圖片很漂亮，它的圖片連結可用而且圖片種類很豐富。
  • 具體做法是，選擇一個喜歡的圖片點開，然後右鍵圖片點選“在新的選項頁開啟”，在新的網頁複製網頁連結。最後粘到上面的那些地方就好啦~

     

     

  • 在複製文件中的程式碼時，一定不要更改它的格式，正常複製一段程式碼，換行復制下一行程式碼就好了！
  • 分割線前都是參考的這兩位大佬的配置和所述：

  • BNDong

  • 老官童鞋gogoの小號

感謝兩位大佬提供的開原始碼，以及分享的兩個連結（①和②） 鄙人頓首佩服

 

相關文章