zoukankan      html  css  js  c++  java
  • 主题配置

    配置项

    你可以配置在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变化的延时时间,单位毫秒。

    window.cnblogsConfig = {
        webpageTitleOnblurTimeOut: 500,
    }
    

    webpageTitleFocus - 获取焦点标签文字

    • 类型:String
    • 默认值:(*´∇`*) 欢迎回来!

    当页面获取焦点,页面title显示的文字;显示后,延时恢复原title。

    window.cnblogsConfig = {
        webpageTitleFocus: '(*´∇`*) 欢迎回来!',
    }
    

    webpageTitleFocusTimeOut - 获取焦点变化延时

    • 类型:Number
    • 默认值:1000

    当页面获取焦点,页面title变化的延时时间,单位毫秒。

    window.cnblogsConfig = {
        webpageTitleFocusTimeOut: 1000,
    }
    

    webpageIcon - 网站图标

    • 类型:Url
    • 默认值:""

    网站图标图片Url。

    window.cnblogsConfig = {
        webpageIcon: "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/webp/blog_logo.webp",
    }
    

    字体图标扩展

    fontIconExtend - 字体图标库扩展

    字体图标库扩展Css的Url。

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

    菜单配置

    自定义菜单数据,显示在默认数据下方。

    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" // 配置图标,参考文档:定制化/字体图标库
            },
        },
    }
    

    ?> 版本 >= v1.1.2

    • 类型:Array
    • 默认值:[]

    自定义菜单导航,显示在默认导航下方。

    window.cnblogsConfig = {
        menuNavList: [ // 列表数据 ['导航名称', '链接']
            ['我的博客1', 'https://www.cnblogs.com/bndong/'],
            ['我的博客2', 'https://www.cnblogs.com/bndong/'],
        ],
    }
    

    ?> 版本 >= 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://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/webp/home_top_bg.webp"
    ]
    

    主页banner图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张。

    window.cnblogsConfig = {
        homeTopImg: [
            "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/webp/home_top_bg.webp",
            "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/webp/home_top_bg.webp"
        ],
    }
    

    homeBannerText - 主页banner上的标语

    • 类型:String
    • 默认值:""

    主页banner上的标语,设置此选项会固定显示文字,默认为空,自动获取一句。

    window.cnblogsConfig = {
        homeBannerText: "好好学习,天天向上!",
    }
    

    homeBannerTextType - 标语获取源

    ?> 版本 >= v1.1.3

    • 类型:String
    • 默认值:"jinrishici"

    主页 banner 上的标语获取源,默认为 jinrishici 每次刷新随机获取一句古诗词。

    window.cnblogsConfig = {
        homeBannerTextType: "one",
    }
    
    /** 所有可配置项
    jinrishici:每次刷新随机获取一句古诗词。
    one:每日获取一句话
    */
    

    文章页配置

    essayTopImg - 文章页banner图片

    • 类型:Array
    • 默认值:
    [
        "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/webp/nothome_top_bg.webp"
    ]
    

    文章页banner图片Url,推荐尺寸>= 1920*600,支持多张,每次刷新随机设置一张。

    window.cnblogsConfig = {
        essayTopImg: [
            "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/webp/nothome_top_bg.webp",
            "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/webp/nothome_top_bg.webp"
        ],
    }
    

    essaySuffix - 文章后缀配置

    • 类型:Object
    • 默认值:
    {
        codeImgUrl   : '', // >= v1.1.5 左侧图片设置,不配置使用 window.cnblogsConfig.blogAvatar
        aboutHtml    : '', // 关于博主,不配置使用默认
        copyrightHtml: '', // 版权声明,不配置使用默认
        supportHtml  : '',  // 声援博主,不配置使用默认
    }
    

    文章后缀配置,不配置使用默认。

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

    代码高亮配置

    使用博客园默认高亮

    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
    */
    

    使用 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: "❤️",
        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'],
        ],
    }
    
  • 相关阅读:
    Net基础篇_学习笔记_第十二天_面向对象继承(命名空间 、值类型和引用类型)
    Net基础篇_学习笔记_第十一天_面向对象(练习)
    js判断客户端是pc还是移动端
    swoole_table
    Master Reactor Manager Worker TaskWorker(Task)
    阻塞,非阻塞,同步,异步
    进程,线程与协程
    swoole 安装与简单应用
    laravel 简单应用 redis
    ubuntu 设置固定IP
  • 原文地址:https://www.cnblogs.com/Dean0731/p/12403326.html
Copyright © 2011-2022 走看看