博客園美化教程

前言：

沒啥時間寫博客，不過最進將博客美化了一遍現在，選了好幾款不錯的主題，感覺都很喜歡，選擇困難癥犯了，決定寫一個完整詳細的教程，將幾款博客都試一遍，現在先介紹這款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/[email protected]/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了，暫時就這些吧，后面有時間會在補充些樣式整改的教程，有哪里不夠詳細不懂的也可以問我…

標籤：JavaScript

上一篇：前端設計模式——職責鏈模式

下一篇：第129篇:JS模塊化開發