部落格園美化教程

部落格園美化教程

前言：

沒啥時間寫部落格，不過最進將部落格美化了一遍現在，選了好幾款不錯的主題，感覺都很喜歡，選擇困難症犯了，決定寫一個完整詳細的教程，將幾款部落格都試一遍，現在先介紹這款SimpleMemory部落格主題的效果美化教程吧，接下來開始我們的教程p

一、後臺設定

點選“管理 > 設定 > 基本設定 > 程式碼高亮”

選擇指定的模板主題，這裡我們選擇的是SimpleMemory主題，然後我們在開通js許可權，申請很快的一天內就能申請成功，給一個合理的理由的就行了

將程式碼高亮度種的顯示行不勾選

禁止模板定製css設定，把他勾上

二、主題部署

• 安裝主題

首先安裝部署，選擇主題的版本，這裡提供的是最新版的，需要那個版本可以自己區作者GitHub上選一個版本

這裡我提供的是最新版本的程式碼，將以下程式碼貼上到“部落格側邊欄公告”裡面去；根據備註的資訊將自己的資訊修改進去

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'userName', // 使用者名稱
        startDate: '2021-01-01', // 入園時間，年-月-日。入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間
        avatar: 'http://xxxx.png', // 使用者頭像
      },
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.2/dist/simpleMemory.js" defer></script>

然後將css的程式碼複製貼上到後臺的“頁面定製css程式碼”中

開啟連結按住Ctrl+A全選然後Ctrl+C複製（也可以直接去作者GitHub上面複製）：http://aw.nndx.ml/simpleMemory.css

這樣就基本部署好了，作者的文件也寫的很詳細，也可以參考作者的文件去配置；

效果如圖：

• 版本更新切換

主題js檔案切換版本，作者給出了兩種方式：

• • 第一種，就是直接跟換檔案連結的方式，使用的是這個檔案，如下圖：

；

• • 第二種，是直接修改連結隨機碼連結的形式，這個我們可以看作者的GitHub專案種，如下圖；

這個檔案就是隨機碼的主題檔案，如果作者又更新主題，我們想在第一時間也更新主題的時候可以看更新後的主題檔案的隨機碼，然後直接在本地的檔案連結裡修改就可以了；

三、主題配置

• 基本配置

這裡我麼而已直接參考作者的文件來操作，如圖：

這些配置，可以自定義配置，我就不多詳細介紹了，新增的位置就是之前複製到側邊欄的那個程式碼裡面，可以看我的程式碼示例：

window.cnblogsConfig = {
   info: {
     name: 'Awiki', // 使用者名稱
     startDate: '2022-05-30', // 入園時間，年-月-日。入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間
     avatar: 'https://pic.imgdb.cn/item/6404d09ff144a0100724573d.jpg', // 使用者頭像
     blogIcon: 'https://pic.imgdb.cn/item/64046420f144a0100778705a.webp', //網站圖示
   },
   progressBar: { //頂部進度條
     color: '#FF0000',
   },
   sidebar: {
     infoBackground: 'https://www.hlapi.cn/api/sjmm1', //側邊欄背景圖
   },
   banner: { //背景圖
     home: {
       background: [ //首頁頂部背景圖
         "https://www.hlapi.cn/api/ecy3",
       ],
       titleSource: 'jinrishici', //每日古詩詞"one"每日一句
     },
     article: { //文章頂部背景圖
       background: [
         "https://www.hlapi.cn/api/ecy3",
       ],
     },
   },
}

?友情提示：上面的程式碼是我自己的程式碼配置例項，僅供參考，我加了備註，不能直接複製去用哦，因為資訊都跟我一樣的?

我頂部背景圖和側邊欄背景圖用的都是隨機桌布，就是沒重新整理一次一張新圖，有需要的也可以拿去用；

隨機二次元桌布（橫屏PC）：https://www.hlapi.cn/api/ecy3

隨機美女桌布（豎屏）：https://www.hlapi.cn/api/sjmm1

如圖：

• Loading載入圖示

在這裡順便講一下loading圖示的更換，專案地址：https://github.com/claudiocalautti/spring-loaders.git

1、clone一下拉去專案，然後本地檢視效果，開啟檔案

如圖：可以直接開啟index.html6檔案直接檢視9款樣式，開啟index.html可以檢視6個樣式的全屏載入效果

2、選擇一個樣式，開啟程式碼，複製選框中這一部分的程式碼

3、複製到側邊欄

加入到loading中，記住：他們都是在window.cnblogsConfig = {}括號裡面的

loading: { //載入動畫
     rebound: {
					tension: 10,
					friction: 7
				},
				spinner: {
					id: 'spinner',
					radius: 160,
					sides: 8,
					depth: 6,
					colors: {
						background: '#181818',
						stroke: '#D23232',
						base: null,
						child: '#181818'
					},
					alwaysForward: true, // When false the spring will reverse normally.
					restAt: null, // A number from 0.1 to 0.9 || null for full rotation
					renderBase: false
				}
   },

四、最後的小題

最後還有一個問題，我之前發現這個主題在移動端的螢幕自適應有問題，就是兩端無法完全貼邊，在這裡給出我的解決方案，在css中加入

#home,#main{
    padding: 0 !important;
}

ok了，暫時就這些吧，後面有時間會在補充些樣式整改的教程，有哪裡不夠詳細不懂的也可以問我…