部落格園SimpleMemory面板的頁面美化--感謝BNDong大佬

阿新 • • 發佈：2020-11-27

1. 前言說明

本部落格的博皮樣式設計者是BNDong大神，在此表示衷心的感謝！為了讓更多人的部落格園更加的美觀大方，本人特此參考設計者BNDong關於部落格樣式的文章，寫了這更加通俗易懂的文章，讓更多喜歡這部落格樣式的人，可以應用此部落格樣式。

2. 入門準備

2.1 安裝配置

本主題需要JS許可權，沒有的請先申請許可權。

2.2 後臺配置

部落格園後臺設定

2.2 選項配置

選項頁面：

2.3 確定使用的版本

選擇版本下載對應的ZIP壓縮包

、

3. 部落格設定

3.1 設定部落格面板

部落格面板：SimpleMemory

3.2 設定頁面定製CSS

這裡拿最新的v1.3.3版本為例子，使用v1.3.3 base.min.css 拷貝此檔案程式碼至頁面定製CSS程式碼文字框處。

3.3 禁用模板預設CSS

選中頁面定製CSS程式碼文字框下面的禁用模板預設CSS。

3.4 設定部落格側邊公告欄

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "userName", // 使用者名稱
        blogAvatar    : "https://xxxx.png", // 使用者頭像
        blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js" defer></script>

　注意：引入的檔案 simpleMemory.min.js 版本需要與配置 window.cnblogsConfig.GhVersions 一致！

3.5 開啟公告控制元件

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

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

4 定製化設定

4.1 基礎資訊設定

blogUser - 使用者暱稱

型別：String
預設值：[預設抓取部落格園使用者名稱]

window.cnblogsConfig = {
    blogUser: 'L-Rui',
}

blogAvatar - 使用者頭像

型別：Url
預設值：""

使用者頭像圖片Url。

window.cnblogsConfig = {
    blogAvatar: 'https://pic.cnblogs.com/avatar/1065454/20161119225202.png',
}

blogStartDate - 入園時間

型別：Date
預設值：2019-01-01

入園時間，年-月-日，入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間。

window.cnblogsConfig = {
    blogStartDate: '2019-01-01',
}

4.2 網站配置

webpageTitleOnblur - 失去焦點標籤文字

型別：String
預設值：(oﾟvﾟ)ノ Hi

當頁面失去焦點，頁面title顯示的文字。

window.cnblogsConfig = {
    webpageTitleOnblur: '(oﾟvﾟ)ノ Hi',
}

webpageTitleOnblurTimeOut - 失去焦點變化延時

型別：Number
預設值：500

當頁面失去焦點，頁面title變化的延時時間，單位毫秒。

版本 >= v1.3.3 後該配置值為 -1 時，當頁面失去焦點，頁面title顯示的文字不會變化。

window.cnblogsConfig = {
    webpageTitleOnblurTimeOut: 500,
}

webpageTitleFocus - 獲取焦點標籤文字

型別：String
預設值：(*´∇｀*) 歡迎回來！

當頁面獲取焦點，頁面title顯示的文字；顯示後，延時恢復原title。

window.cnblogsConfig = {
    webpageTitleFocus: '(*´∇｀*) 歡迎回來！',
}

webpageTitleFocusTimeOut - 獲取焦點變化延時

型別：Number
預設值：1000

當頁面獲取焦點，頁面title變化的延時時間，單位毫秒。

版本 >= v1.3.3 後該配置值為 -1 時，當頁面獲取焦點，頁面title顯示的文字不會變化。

window.cnblogsConfig = {
    webpageTitleFocusTimeOut: 1000,
}

webpageIcon - 網站圖示

型別：Url
預設值：""

網站圖示圖片Url。

window.cnblogsConfig = {
    webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/blog_logo.webp",
}

switchDayNight - 日/夜間模式

版本 >= v1.2.8

型別：Object
預設值：

{
    enable: true,       // 是否開啟日/夜間模式切換按鈕
    auto: {             // 自動切換相關配置
        enable: false,  // 開啟自動切換
        dayHour: 5,     // 日間模式開始時間，整數型，24小時制
        nightHour: 19   // 夜間模式開始時間，整數型，24小時制
    }
}

日/夜間模式配置。頁面使用日/夜間模式優先順序：使用者設定 > 自動切換 > 預設。

window.cnblogsConfig = {
    switchDayNight: {
        enable: true,
        auto: {
            enable: true
        }
    },
}

4.3 選單配置

menuCustomList - 選單資料

型別：Object
相關文件：字型圖示庫
預設值：{}

自定義選單資料，顯示在預設資料下方。

window.cnblogsConfig = {
    menuCustomList: {
        "title1": { // 標題
            "data": [ // 列表資料 ['列表', '連結']
                ['我的部落格1', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格2', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格3', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格4', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格5', 'https://www.cnblogs.com/bndong/'],
            ],
            "icon": "icon-brush_fill" // 配置圖示，參考文件：定製化/字型圖示庫
        },
        "title2": { // 標題
            "data": [ // 列表資料 ['列表', '連結']
                ['我的部落格6', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格7', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格8', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格9', 'https://www.cnblogs.com/bndong/'],
                ['我的部落格10', 'https://www.cnblogs.com/bndong/'],
            ],
            "icon": "icon-brush_fill" // 配置圖示，參考文件：定製化/字型圖示庫
        },
    },
}

menuNavList - 選單導航

版本 >= v1.1.2

型別：Array
預設值：[]

自定義選單導航，顯示在預設導航下方。 icon 支援與定義，要求版本 >= v1.3.2

window.cnblogsConfig = {
    menuNavList: [ // 列表資料 ['導航名稱', '連結', 'icon']
        ['我的部落格1', 'https://www.cnblogs.com/bndong/', 'icon-github'],
        ['我的部落格2', 'https://www.cnblogs.com/bndong/', 'icon-github'],
    ],
}

menuUserInfoBgImg - 選單個人資訊背景圖片

版本 >= v1.1.5

型別：Url
預設值：""

選單個人資訊背景圖片設定。

window.cnblogsConfig = {
    menuUserInfoBgImg: 'https://xxx,jpg',
}

4.4 頁面動效配置

型別：Boolean
預設值：true

是否渲染主頁banner動效。

window.cnblogsConfig = {
    homeTopAnimationRendered: true,
}

型別：Object
預設值：

{
    radius: 15,
    density: 0.2,
    color: 'rgba(255,255,255, .2)', // 顏色設定，“random” 為隨機顏色
    clearOffset: 0.3,
}

主頁banner動效配置。

window.cnblogsConfig = {
    homeTopAnimation: {
         color   : 'random',
    },
}

型別：Boolean
預設值：true

是否渲染文章頁banner動效。

window.cnblogsConfig = {
    essayTopAnimationRendered: true,
}

型別：Object
預設值：

{
    triW : 14,
    triH : 20,
    neighbours : ["side", "top", "bottom"],
    speedTrailAppear : .1,
    speedTrailDisappear : .1,
    speedTriOpen : 1,
    trailMaxLength : 30,
    trailIntervalCreation : 100,
    delayBeforeDisappear : 2,
    colorsRandom: false, // v1.2.4 是否開啟隨機顏色
    colors: [
        '#96EDA6', '#5BC6A9',
        '#38668C', '#374D84',
        '#BED5CB', '#62ADC6',
        '#8EE5DE', '#304E7B'
    ]
}

文章頁banner動效配置。

window.cnblogsConfig = {
    essayTopAnimation: {
        triW : 14,
        triH : 20,
    },
}

bgAnimationRendered - 是否渲染頁面背景動效

型別：Boolean
預設值：true

是否渲染頁面背景動效。

window.cnblogsConfig = {
    bgAnimationRendered: true,
}

backgroundAnimation - 頁面背景動效配置

型別：Object
預設值：

{
    colorSaturation: "60%",
    colorBrightness: "50%",
    colorAlpha: 0.5,
    colorCycleSpeed: 5,
    verticalPosition: "random",
    horizontalSpeed: 200,
    ribbonCount: 3,
    strokeSize: 0,
    parallaxAmount: -0.2,
    animateSections: true
}

頁面背景動效配置。

window.cnblogsConfig = {
    backgroundAnimation: {
        colorSaturation: "60%",
        colorBrightness: "50%",
    },
}

4.5 主頁配置

型別：Array
預設值：

[
    "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
]

主頁banner圖片Url，推薦尺寸>= 1920*1080，支援多張，每次重新整理隨機設定一張。

window.cnblogsConfig = {
    homeTopImg: [
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp",
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
    ],
}

homeBannerText - 主頁banner上的標語

型別：String or Array
預設值：""

主頁banner上的標語，設定此選項會顯示自定義文字，預設為空，自動獲取一句。

1) 設定文字，會固定顯示該文字。

2) 設定陣列，隨機從陣列中獲取一條文字顯示。（版本 >= v1.3.2）

window.cnblogsConfig = {
    homeBannerText: "好好學習，天天向上！",
}

// or

window.cnblogsConfig = {
    homeBannerText: [
        "我是標語一",
        "我是標語二",
        "我是標語三",
        "我是標語四",
    ],
}

homeBannerTextType - 標語獲取源

版本 >= v1.1.3

型別：String
預設值："jinrishici"

主頁 banner 上的標語獲取源，預設為 jinrishici 每次重新整理隨機獲取一句古詩詞。

window.cnblogsConfig = {
    homeBannerTextType: "one",
}

/** 所有可配置項
jinrishici：每次重新整理隨機獲取一句古詩詞。
one：每日獲取一句話
*/

4.6 文章頁配置

型別：Array
預設值：

[
    "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"
]

文章頁banner圖片Url，推薦尺寸>= 1920*600，支援多張，每次重新整理隨機設定一張。

window.cnblogsConfig = {
    essayTopImg: [
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"
    ],
}

essayTitleStyle - 文章內容標題樣式設定

版本 >= v1.3.3

型別：Boolean
預設值："false"

是否設定文章內容標題樣式，預設不設定。

window.cnblogsConfig = {
    essayTitleStyle: true,
}

essaySuffix - 文章字尾配置

型別：Object
預設值：

{
    codeImgUrl   : '', // >= v1.1.5 左側圖片設定，不配置使用 window.cnblogsConfig.blogAvatar
    aboutHtml    : '', // 關於博主，不配置使用預設
    copyrightHtml: '', // 版權宣告，不配置使用預設
    supportHtml  : '', // 聲援博主，不配置使用預設
}

文章字尾配置，不配置使用預設。

window.cnblogsConfig = {
    essaySuffix: {
        aboutHtml: "I am a good person",
    },
}

reward - 打賞

版本 >= v1.2.7

型別：Object
預設值：

{
    enable: false, // 是否開啟打賞功能
    wechatpay: '', // 微信支付二維碼圖片URL
    alipay: '' // 支付寶支付二維碼圖片URL
}

文章打賞按鈕，顯示在頁面右下角。

window.cnblogsConfig = {
    reward: {
        enable: true,
        wechatpay: '//xxxx.png',
    },
}

weChatOfficialAccounts - 公眾號

版本 >= v1.3.2

型別：Url

預設值：""

公眾號二維碼圖片，顯示在頁面右下角。只在文章頁顯示公眾號，首頁不顯示。

window.cnblogsConfig = {
    weChatOfficialAccounts: '//xxxx.png',
}

5 個人配置分享

5.1 css路徑

v1.3.3 base.min.css

5.2 部落格側邊欄公告

<script type="text/javascript">
    // ---- 主頁配置 ----
    window.cnblogsConfig = {
        GhVersions: 'v1.3.3', // 版本
        blogUser: "L-RUI", // 使用者名稱
        blogAvatar: "https://files.cnblogs.com/files/Rui6/blogAvatar2.ico", // 使用者頭像
        //blogStartDate : "2020-04-10",                                                // 入園時間，年-月-日。
        menuUserInfoBgImg: 'https://files.dbnuo.com/wallpaper/menu_bg.gif', //選單個人資訊背景圖片設定。



        // ---- 公眾號圖片配置 ----
        weChatOfficialAccounts: 'https://files.cnblogs.com/files/Rui6/We.ico',

        //自定義選單導航
        menuNavList: [
            ['CSDN', 'https://blog.csdn.net/qq_45061258'],
            ['GitHub', 'https://github.com/L-Rui-G']
        ],


        // ---- 網站配置 ----
        webpageTitleOnblur: "(◍´꒳`◍) Hi, L-Rui", // 當前頁失去焦點，頁面title顯示文字
        webpageTitleOnblurTimeOut: 500, // 當前頁失去焦點，頁面title變化，延時時間，單位毫秒
        webpageTitleFocus: "(*´∇｀*) 歡迎回來！", // 當前頁獲取焦點，頁面title顯示文字，顯示後延時恢復原title
        webpageTitleFocusTimeOut: 1000, // 當前頁獲取焦點，頁面title變化，延時時間，單位毫秒
        webpageIcon: "https://files.cnblogs.com/files/Rui6/blogAvatar2.ico", // 網站圖示


        //打賞設定
        reward: {
            enable: true,
            wechatpay: 'https://images.cnblogs.com/cnblogs_com/Rui6/1848426/t_200916021730weixin.jpg?a=1605605943096',
            alipay: 'https://images.cnblogs.com/cnblogs_com/Rui6/1848426/t_200916021739zhifubao.jpg?a=1605605943096'

        },

        // ---- 主頁配置 ----
        homeTopImg: [ // 主頁圖片Url，推薦尺寸>= 1920*1080，支援多張，每次重新整理隨機設定一張
            "https://img2020.cnblogs.com/blog/1772450/202011/1772450-20201113105542436-475532576.jpg"
        ],
        // ---- 隨筆頁配置 ----
        essayTopImg: [ // 隨筆頁圖片Url，支援多張，每次重新整理隨機設定一張
            "https://img2020.cnblogs.com/blog/1772450/202011/1772450-20201113105542436-475532576.jpg"
        ],

        //日、夜間模式配置。頁面使用日、夜間模式優先順序：使用者設定 > 自動切換 > 預設。
        switchDayNight: {
            enable: true,
            auto: {
                enable: false // 開啟自動切換
            }
        },

        //homeBannerText: "路漫漫其修遠兮，吾將上下而求索",     //主頁banner上的標語，設定此選項會固定顯示文字，預設為空，自動獲取一句
        homeBannerTextType: "one", //每日獲取一句話

        essayCodeHighlightingType: "highlightjs", //使用 highlightjs 外掛渲染程式碼高亮。
        essayCodeHighlighting: "a11y-dark", //高亮的style

        // ---- 頁尾配置 ----
        bottomBlogroll: [ // 友情連結，[[連結名,連結]....]
            ["BING", 'https://cn.bing.com/'],
            ["卡卡動漫", 'http://www.kakadm.com/'],
            ["百度貼吧", 'https://tieba.baidu.com/'],
            ["B站", 'https://www.bilibili.com/'],
            ["部落格園地址", 'https://www.cnblogs.com/Rui6/'],
        ],

        // 頁尾標語
        bottomText: {
            left: "路漫漫其修遠兮", // 圖示左側文字
            right: "吾將上下而求索" // 圖示右側文字
        },

        //文章字尾配置，不配置使用預設。
        essaySuffix: {
            aboutHtml: "程式設計小萌新一名，希望從今天開始慢慢提高，一步步走向技術的高峰！", // 關於博主，不配置使用預設
            copyrightHtml: '', // 版權宣告，不配置使用預設
            supportHtml: '', // 聲援博主，不配置使用預設
        },




    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script>

View Code

5.3 頁尾 HTML 程式碼

<!--   網站統計  -->
<div id="cnzzProtocol"  style="display: none;">
    <span class="id_cnzz_stat_icon" id='cnzz_stat_icon_1279442252'></span>
    <script src='https://v1.cnzz.com/z_stat.php?id=1279442252&online=1&show=line' type='text/javascript'></script>
</div>

<!--   播放器  -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js    
        auto="https://y.qq.com/n/yqq/playlist/7787591166.html"
        fixed="true"

></meting-js>

部落格園SimpleMemory面板的頁面美化--感謝BNDong大佬

1. 前言說明本部落格的博皮樣式設計者是BNDong大神，在此表示衷心的感謝！為了讓更多人的部落格園更加的美觀大方，本人特此參考設計者BNDong關於部落格樣式的文章，寫了這更加通俗易懂的文章，讓更多喜歡這部落格樣式的人，可以應用此部落格樣式。 2. 入門準備 2.1 安裝配置本主題需要JS許可權，

部落格園申請及頁面定製CSS 部落格園定製CSS-黑客帝國背景

一、背景　　剛剛工作滿一年，感覺到工作後在學習方面和之前還是有些不一樣的：在校會有系統的整理歸納基礎知識和逐步學習的一個過程，最後考試進行比較全面的知識掌握程度檢測；而在工作上學習的內容很大程度上取決於你參與的專案所應用或者即將應用的技術，很少會有檢測你學習進度的過程，更看重的是你能不能滿足需求或解決問題。

部落格園自定義頁面風格設計後續篇(頁面設計模式及程式碼高亮滑鼠點選效果升級)

前言在之前所寫過的部落格園自定義頁面風格設計篇中，我們已經說明了其中兩種風格的頁面設計，滑鼠圖案的修改，公告欄的設定，背景音樂的製作，關於CSS以及用Canvas和requestAnimFrame做動畫特效，在本文中我們將教大家制作當前簡約的頁面製作方法。只要你們有需求，我會盡量幫助到大家，在此感謝各

一套簡約漂亮的響應式部落格園主題面板

一、背景　　最近在自己部落格園逛的時候，總會有一個感覺，真是太醜了，然而又覺得自己暫時抽不出太多的時間來搭建自己的部落格系統，上網一搜才發現，原來我們可以自定義部落格的佈局以及樣式的，那我就在網上找到了一個哥們的自定義Hexo經典主題Ligt的CSS檔案，然後根據自己的審美及需要來做改動後上傳以此來使自己的

基於部落格園SimpleMemory樣式的博皮設定

前言: 本部落格的博皮樣式設計者是BNDong大神，在此表示衷心的感謝！為了讓更多人的部落格園更加的美觀大方，本人特此參考設計者BNDong關於部落格樣式的文章，寫了這更加通俗易懂的文章，讓更多喜歡這部落格樣式的人，可以應用此部落格樣式。使用前準備本主題需要部落格側邊欄公告的JS許可權，沒有的請先申請

基於部落格園SimpleMemory的部落格樣式設定

部落格園美化程式碼備份

#Header1_HeaderTitle { font-family: "華文行楷"; font-size: 62px; font-weight: bold; padding-top:15px; padding-bottom:5px; padding-left:20px; padding-right:0p

部落格園美化手記——CSS Javascript Html

寫在前面：出自（https://www.cnblogs.com/ECJTUACM-873284962/p/7628894.html#autoid-0-3-0），只是覺得寫得比較好，幫忙轉一下qwq。目錄 ①擁有自己的CSS程式碼 ②修改滑鼠圖案 ③公告欄的設定關於背景音樂 ④關於

個人部落格園樣式、背景及細節美化過程

主頁美化：主要參考嘻哈燒餅的美化，在TA的基礎上增加了對主頁背景及色調的調整原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html 修改部落格園背景的程式碼如下（在原帖使用的css檔案中修改）： body { color: #000

部落格園---部落格美化彙總

轉載自：https://www.cnblogs.com/WhiteTears/p/8824544.html 1、申請js許可權直接在設定裡點選申請，稽核較慢且通過率較低。因此可以向[email protected]發郵件，簡單說明理由，一般很快就能得到回覆了。

部落格園美化筆記

1.每日一言 P.S : 來自LOJ 在側邊欄加入以下css程式碼即可 <meta charset="utf-8"/> <h2><B>一言（ヒトコト）</B></h2> <div

我的部落格園美化

越來越喜歡部落格園了 _(:3」∠)_ 在加入部落格園的前一個月，我都在進行前端html和css的學習現發現部落格園對使用者開放高度的個人頁面定製，讓我很是驚喜通過參考大佬們美化的主頁，我逐漸瞭解了部落格園的網頁結構，於是也動了折騰的心思我不喜歡花裡胡哨，追求簡單實用，希望我的美化主頁CSS能對

美化你的部落格園！

偶爾見到別人的部落格側邊欄有一些很有意思的flash外掛，也想加入到自己部落格裡面，這裡來大概講一下~ 一、支援js程式碼首先要在部落格設定 >開啟部落格側邊欄公告的js程式碼支援，提交稽核後很快就會通過，如圖：二、新增flash外掛

我的部落格園css模板美化的經驗分享

作為一個搞CS的人，如果你只是想找個地方發部落格，那麼部落格園還是個不錯的平臺。雖然現在的自建部落格工具多的不得了，動態的有WordPress、Ghost，靜態的有hexo、jekyll等等；雖然對於一個碼農而言搗鼓這些東西也算不上太難，不過終歸是要浪費時間的。所以本著一切從簡的原則，我也很支援從部落格園這樣

html頁面和jsp頁面的區別(轉載於部落格園：shenhf 2017-12-01 11:53)

html頁面和jsp頁面的區別 html頁面：　　html頁面是靜態頁面，可以使用html+css+js實現頁面的各種效果，單純使用html佈局出來的頁面是設定好的頁面，可以使用本地瀏覽器開啟。同時搭配使用ajax實現資料互動效果的頁面需要放到伺服器上開啟。　　jsp頁面是Java

Jupyter-Notebook版的部落格園美化

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, detai

一個（偽）MaterialDesign風格的部落格園面板

面板長什麼樣，不用我說，相信各位點進來的看官都能看得一清二楚。有關其他細節呢，也歡迎各位在我部落格裡逛逛，幫忙挑挑刺，提提建議。由於水平有限，暫沒能用CSS處理部落格園的程式碼高亮字型，實在是有些遺憾。不過後期可以通過引入JS解決。使用步驟：把裡面的css程式碼複製，到部落格園後臺-設定，貼上到

部落格園的自定義面板

公用*/ body { font-size:15px; padding:0; margin:0; font-family:"微軟雅黑","宋體",Arial; background:#205424 url('http://mat1.gtimg.com/www/mb/th

部落格園面板-我的部落格園面板設定教程

一、前言　　好的部落格面板能吸引更多的訪問量，也可以使博主更有動力更新部落格。今天看到一個博主的部落格非常漂亮，突發奇想也打扮了一下自己的部落格，雖然差距還有不小，也記錄一下操作方法供大家參考。二、操作 1.左上角“fork me on github綵帶”

美化部落格園大全

前言：用了兩天的時間把我的部落格園好好規劃了一下，也來寫篇隨筆教一下大家怎麼定義一個屬於自己的部落格園，我將會把我部落格園的所有內容展現給大家（很大方的吧）首先要明白，部落格園如何自定義樣式，在部落格園的設定裡，面板我選擇的是SimpleMemory，我的樣式是基於這個面板來的，當然你選擇別的面板也可以用

部落格園SimpleMemory面板的頁面美化--感謝BNDong大佬

1. 前言說明

2. 入門準備

2.1 安裝配置

2.2 後臺配置

部落格園後臺設定

2.2 選項配置

2.3 確定使用的版本

3. 部落格設定

3.1 設定部落格面板

3.2 設定頁面定製CSS

3.3 禁用模板預設CSS

3.4 設定部落格側邊公告欄

3.5 開啟公告控制元件

4 定製化設定

4.1 基礎資訊設定

blogUser - 使用者暱稱

blogAvatar - 使用者頭像

blogStartDate - 入園時間

4.2 網站配置

webpageTitleOnblur - 失去焦點標籤文字

webpageTitleOnblurTimeOut - 失去焦點變化延時

webpageTitleFocus - 獲取焦點標籤文字

webpageTitleFocusTimeOut - 獲取焦點變化延時

webpageIcon - 網站圖示

switchDayNight - 日/夜間模式

4.3 選單配置

menuCustomList - 選單資料

menuNavList - 選單導航

menuUserInfoBgImg - 選單個人資訊背景圖片

4.4 頁面動效配置

homeTopAnimationRendered - 是否渲染主頁banner動效

homeTopAnimation - 主頁banner動效配置

essayTopAnimationRendered - 是否渲染文章頁banner動效

essayTopAnimation - 文章頁banner動效配置

bgAnimationRendered - 是否渲染頁面背景動效

backgroundAnimation - 頁面背景動效配置

4.5 主頁配置

homeTopImg - 主頁banner圖片

homeBannerText - 主頁banner上的標語

homeBannerTextType - 標語獲取源

4.6 文章頁配置

essayTopImg - 文章頁banner圖片

essayTitleStyle - 文章內容標題樣式設定

essaySuffix - 文章字尾配置

reward - 打賞

weChatOfficialAccounts - 公眾號

5 個人配置分享

5.1 css路徑

5.2 部落格側邊欄公告

5.3 頁尾 HTML 程式碼

相關推薦