碼上歡樂
相關內容    簡體    繁體

博客園主題SimpleMemory詳細配置項

本文轉載自   查看原文   2020-12-08 08:57   510    隨筆

配置項

你可以配置在window.cnblogsConfig里。

!> Url 類型的配置，請盡量配置支持 Https 的地址！

示例

例如我原配置為：

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.2.2',
        blogUser      : "userName",
        blogAvatar    : "https://xxxx.png",
        blogStartDate : "2016-11-17",
    }
<script>

我需要新增關於主頁圖片的配置：homeTopImg

新增配置為：

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.2.2',
        blogUser      : "userName",
        blogAvatar    : "https://xxxx.png",
        blogStartDate : "2016-11-17",
        homeTopImg    : [
            "https://x1.jpg",
            "https://x2.jpg",
            "https://x3.jpg",
        ],
    }
<script>

?> JavaScript 對象是被命名值的容器。值以名稱:值對的方式來書寫（名稱和值由冒號分隔）。

主題倉庫配置

用於設置樣式文件加載源的配置。

GhUserName - GitHub用戶

  • 類型：String
  • 默認值：BNDong

GitHub用戶名(不是昵稱)，注意大小寫。

window.cnblogsConfig = {
    GhUserName: 'BNDong',
}

GhRepositories - GitHub倉庫

  • 類型：String
  • 默認值：Cnblogs-Theme-SimpleMemory

GitHub主題倉庫名稱。

window.cnblogsConfig = {
    GhRepositories: 'Cnblogs-Theme-SimpleMemory',
}

GhVersions - 主題版本

  • 類型：String
  • 默認值：v1.1.2

GitHub發布版本或提交哈希值，根據版本加載代碼。

window.cnblogsConfig = {
    GhVersions: 'v1.1.2',
    // or
    GhVersions: 'd2c2e52cfef...38998f0e', // 全哈希值，不要使用七位的部分哈希值
}

!> 不推薦使用哈希值加載代碼；使用哈希值要明確使用的哈希值所在的大版本中，保證設置的兼容性！

基礎信息配置

blogUser - 用戶昵稱

  • 類型：String
  • 默認值：[默認抓取博客園用戶名]

用戶昵稱。

window.cnblogsConfig = {
    blogUser: 'BNDong',
}

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',
}

網站配置

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
        }
    },
}

字體圖標擴展

fontIconExtend - 字體圖標庫擴展

字體圖標庫擴展Css的Url。

window.cnblogsConfig = {
    fontIconExtend: "//at.alicdn.com/t/font_xxxxxxxxxx.css",
}

菜單配置

menuCustomList - 菜單數據

自定義菜單數據，顯示在默認數據下方。

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',
}

進度條配置

progressBar

  • 類型：Object
  • 默認值：
{
    id      : 'top-progress-bar', // 請勿修改該值
    color   : '#77b6ff',
    height  : '2px',
    duration: 0.2,
}

進度條配置，顯示在頁面頂部。

window.cnblogsConfig = {
    progressBar: {
         color   : '#77b6ff',
    },
}

Loading配置

loading

  • 類型：Object
  • 相關文檔：Loading
  • 默認值：
{
    rebound: {
        tension: 16,
        friction: 5,
    },
    spinner: {
        id: 'spinner',
        radius: 90,
        sides: 3,
        depth: 4,
        colors: {
            background: '#f0f0f0',
            stroke: '#272633',
            base: null,
            child: '#272633',
        },
        alwaysForward: true, // When false the spring will reverse normally.
        restAt: 0.5,         // A number from 0.1 to 0.9 || null for full rotation
        renderBase: false,
    }
}

頁面加載loading。

window.cnblogsConfig = {
    loading: {
         rebound: {
             tension: 16,
         },
         spinner: {
             id: 'spinner',
             radius: 90,
         }
    },
}

頁面動效配置

homeTopAnimationRendered - 是否渲染主頁banner動效

  • 類型：Boolean
  • 默認值：true

是否渲染主頁banner動效。

window.cnblogsConfig = {
    homeTopAnimationRendered: true,
}

homeTopAnimation - 主頁banner動效配置

  • 類型：Object
  • 默認值：
{
    radius: 15,
    density: 0.2,
    color: 'rgba(255,255,255, .2)', // 顏色設置，“random” 為隨機顏色
    clearOffset: 0.3,
}

主頁banner動效配置。

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

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

  • 類型：Boolean
  • 默認值：true

是否渲染文章頁banner動效。

window.cnblogsConfig = {
    essayTopAnimationRendered: true,
}

essayTopAnimation - 文章頁banner動效配置

  • 類型：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%",
    },
}

主頁配置

homeTopImg - 主頁banner圖片

  • 類型：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：每日獲取一句話
*/

文章頁配置

essayTopImg - 文章頁banner圖片

  • 類型：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',
}

代碼相關配置

codeMaxHeight - 限制代碼框高度

?> 版本 >= v1.2.5

  • 類型：Boolean
  • 默認值："false"

限制代碼框的最大高度；如開啟，代碼框高度不會超過頁面可視區域的70%，隱藏部分通過滾動的方式查看。

window.cnblogsConfig = {
    codeMaxHeight: true,
}

codeLineNumber - 代碼行號渲染

?> 版本 >= v1.3.0

  • 類型：Boolean
  • 默認值："false"

是否渲染代碼行號，如開啟會在代碼框左側增加行號顯示，默認不開啟。
不與博客園行號渲染兼容，如果博客園添加代碼時勾選顯示行號並同時開啟此配置，會出現雙行號的現象。大家自己權衡使用此配置。

window.cnblogsConfig = {
    codeLineNumber: true,
}

essayCode - 代碼框統一樣式設置

?> 版本 >= v1.2.9

  • 類型：Object
  • 默認值：
{
    fontFamily: "'Ubuntu Mono',monospace", // 代碼框字體
    fontSize: "14px" // 代碼框字體大小
}

代碼框統一樣式設置，目前只有字體設置，看需求后續可能會增加配置項。

window.cnblogsConfig = {
    essayCode: {
        fontSize: "16px",
    },
}

使用博客園默認代碼樣式

essayCodeHighlightingType

  • 類型：String
  • 默認值："cnblogs"

使用博客園代碼高亮樣式，介意加載速度的可以使用此配置。

window.cnblogsConfig = {
    essayCodeHighlightingType: "cnblogs",
}

essayCodeHighlighting

  • 類型：String
  • 默認值：""

當使用博客園代碼高亮樣式時，此配置不會對渲染產生影響。

使用 highlightjs 渲染代碼

essayCodeHighlightingType

  • 類型：String
  • 默認值："cnblogs"

使用 highlightjs 插件渲染代碼高亮。

window.cnblogsConfig = {
    essayCodeHighlightingType: "highlightjs",
}

essayCodeHighlighting

  • 類型：String
  • 默認值：""

highlightjs 代碼高亮主題：demo

window.cnblogsConfig = {
    essayCodeHighlighting: "a11y-dark",
}

/** 所有可配置項
default、a11y-dark、a11y-light、agate、an-old-hope、androidstudio、arduino-light、arta、ascetic
、atelier-cave-dark、atelier-cave-light、atelier-dune-dark、atelier-dune-light、atelier-estuary-dark
、atelier-estuary-light、atelier-forest-dark、atelier-forest-light、atelier-heath-dark
、atelier-heath-light、atelier-lakeside-dark、atelier-lakeside-light、atelier-plateau-dark、atelier-plateau-light
、atelier-savanna-dark、atelier-savanna-light、atelier-seaside-dark、atelier-seaside-light
、atelier-sulphurpool-dark、atelier-sulphurpool-light、atom-one-dark-reasonable、atom-one-dark、atom-one-light
、brown-paper、codepen-embed、color-brewer、darcula、dark、darkula、docco、dracula、far
、foundation、github-gist、github、gml、googlecode、grayscale、gruvbox-dark、gruvbox-light、hopscotch
、hybrid、idea、ir-black、isbl-editor-dark、isbl-editor-light、kimbie.dark、kimbie.light、lightfair
、magula、mono-blue、monokai-sublime、monokai、nord、obsidian、ocean、paraiso-dark、paraiso-light、pojoaque
、purebasic、qtcreator_dark、qtcreator_light、railscasts、rainbow、routeros、school-book、shades-of-purple
、solarized-dark、solarized-light、sunburst、tomorrow-night-blue、tomorrow-night-bright
、tomorrow-night-eighties、tomorrow-night、tomorrow、vs、vs2015、xcode、xt256、zenburn
*/

essayCodeLanguages

  • 類型：Array
  • 默認值：[]

?> 版本 >= v1.3.3

使用 highlightjs 插件渲染代碼高亮時，限制自動識別語言時的語言范圍。

支持配置的語言：Languages

window.cnblogsConfig = {
    essayCodeLanguages: [
        "G-Code",
        "PHP",
        "python",
        "SQL",
    ],
}

使用 prettify 渲染代碼

essayCodeHighlightingType

  • 類型：String
  • 默認值："cnblogs"

使用prettify插件渲染代碼高亮。

window.cnblogsConfig = {
    essayCodeHighlightingType: "prettify",
}

essayCodeHighlighting

  • 類型：String
  • 默認值：""

prettify 代碼高亮主題（需梯子訪問）：demo

window.cnblogsConfig = {
    essayCodeHighlighting: "obsidian",
}

/** 所有可配置項
prettify、desert、sunburst、obsidian、doxy
*/

頁腳配置

footerStyle - 頁腳樣式

?> 版本 >= v1.1.8

  • 類型：Int
  • 默認值：2

頁腳樣式：

footerStyle: 1

footer_01

footerStyle: 2

footer_02

window.cnblogsConfig = {
    footerStyle: 1,
}

bottomBlogroll - 友情鏈接

  • 類型：Array
  • 默認值：[]

友情鏈接。

window.cnblogsConfig = {
    bottomBlogroll: [ // 友情鏈接，[[鏈接名,鏈接]....]
        ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
    ],
}

bottomText - 頁腳標語

  • 類型：Object
  • 默認值：
{
    icon: "❤️",   // v1.3.0 已廢棄該配置
    iconFont: {  // v1.3.0 新增配置
        icon:  "icon-xl", // iconfont 圖標名稱
        color: "red",     // 圖標顏色
        fontSize: "16px"  // 圖標大小
    },
    left : "",
    right: ""
}

頁腳標語。

?> v1.1.4 版本之前不配置使用默認標語，v1.1.4 版本及以后不配置不會顯示。

window.cnblogsConfig = {
    bottomText: {
        left : "好好學習",
        right: "天天向上",
    },
}

控制台輸出

consoleList

  • 類型：Array
  • 默認值：[]

控制台輸出。

window.cnblogsConfig = {
    consoleList: [
         ['BNDong CNBlogs', 'https://www.cnblogs.com/bndong'],
         ['BNDong GitHub', 'https://github.com/BNDong'],
         ['BNDong Email', 'dbuo@foxmail.com'],
    ],
}

廣告

advertising

?> 版本 >= v1.3.0

  • 類型：Boolean
  • 默認值：true

是否顯示博客園廣告。

window.cnblogsConfig = {
    advertising: true,
}

版本映射

isVersionMapping

?> 版本 >= v1.2.6

  • 類型：Boolean
  • 相關文檔：版本映射
  • 默認值：false

是否開啟版本映射，默認關閉。

window.cnblogsConfig = {
    isVersionMapping: true,
}


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 博客園SimpleMemory主題美化 自定義博客園cnblog主題樣式Ⅱ（SimpleMemory） SimpleMemory博客園皮膚 博客園主題 Silence的配置 博客園主題 博客園主題 博客園主題/博客園美化的一種方法（超小白向，超詳細！） 博客園主題美化 博客園主題修改 博客園主題共享
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM