博客園主題/博客園美化的一種方法（超小白向，超詳細！）

衆所周知博客園默認博客界面，有點8好看，我做爲一個超級挑剔的外貌協會（我也許適合搞前端？）查了三天資料，終於簡單的美化成了本身能夠接受的樣子。javascript

爲了美化成我這個樣子，咱們要準備: JS權限（這個太容易百度到了我不介紹了） github資源：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory 該資源的配置(很是簡單實用)：http://doc.dbnuo.org/cnblogs-theme-docs/v1.1.0/#/Docs/GettingStarted/installhtml

github使用方式就是點擊你網頁右邊偏上的綠色按鈕[Clone or download]（全屏幕就這一個綠色按鈕別說你找不到），而後下載zip而且解壓，而後按照我上面的第二個連接，入門部分的操做便可。把CSS輸入，側邊欄JS輸入以後，博客已經變得很是好看了。可是，這都是模板，沒有你自定義的功能，咱們繼續看第二個連接，在入門的下方有配置項這一系列自定義選項，今天重點就在這裏詳細介紹一下如何使用（我之後忘了也能夠看看）前端

你們都在側邊欄HTML代碼中輸入了java

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用戶名
        blogAvatar    : "https://xxxx.png", // 用戶頭像
        blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.1.4/src/script/simpleMemory.min.js"></script>

各位跟我同樣不會html的老哥們，要注意到，每一行（好比GhVersions : 'v1.1.4', ）都以","結尾，這樣下面的內容才能夠繼續連着寫。若是不加","，那麼後面寫的內容都不會看做輸入，還會報錯致使修改無效！好比咱們要在git

window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用戶名
        blogAvatar    : "https://xxxx.png", // 用戶頭像
        blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間
    }

裏面添加主頁圖片即——homeTopImg - 主頁banner圖片（在第二個連接，定製化，配置項） homeTopImg - 主頁banner圖片下面的代碼是github

window.cnblogsConfig = {
    homeTopImg: [
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg"
    ]
}

具體想替換的圖片就用博客園上傳圖片文件的url來替換上面的url（注意博客園只支持bmp格式圖片，要先轉一下圖片樣式）咱們把這兩個功能合併成字體

window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用戶名
        blogAvatar    : "https://xxxx.png", // 用戶頭像
        blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間


        homeTopImg: [
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg"
        //注意這裏最後一行沒有「,」了，若是想繼續添加其餘功能，好比字體高亮，須要在這裏加","
    ]
}

咱們再添加字體高亮url

window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用戶名
        blogAvatar    : "https://xxxx.png", // 用戶頭像
        blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間

        //我是修改主頁背景的代碼
        homeTopImg: [
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",//這裏我手動添加了「,」
        
        //我是字體高亮的代碼（a11y-dark能夠換成下面灰色字體的其餘種類）
        essayCodeHighlighting: "a11y-dark"
        //注意這裏最後一行沒有「,」了，若是想繼續添加其餘功能，須要在這裏加","
    ]
}

點擊保存便可在主頁享受美化後的博客了！你們能夠嘗試下其餘功能。.net