自定义博客园样式

前行必备

•选项设置

　　一定要勾选公告，其他可根据需要自行设置；

　　

• 博客皮肤

　　

页面定制CSS

•默认代码配置　　

　　设置页面定制的CSS代码：将 base.min.css 代码拷贝至页面定制CSS代码文本框处。

　　

　　并禁用模板默认CSS;

•为页面添加一张背景图

　　独立于 base.min.css 之外，添加如下代码：

　　

代码
#home {
    opacity: 0.95;
    background-color: rgba(245, 245, 245, 0.9);
}
/*添加背景图片*/
body 
{
    background: rgba(12, 100, 129,1) url('https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210129051848v2-795f68ea7d1692dc91546ace95208bb4.jpg') 
    fixed no-repeat;
    background-position: 60% 5%; 
    background-size: cover;
}
　　opacity : 设置不透明度

　　背景图片根据个人喜好更改即可；

博客侧边公告栏

•前题

　　开通 js 权限；

•侧边栏HTML代码

<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/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

　　注意：引入的文件 simpleMemory.min.js 版本需要与配置 window.cnblogsConfig.GhVersions 一致（可手动更改）。

定制化侧边栏

•声明

　　以下配置的内容，直接添加到window.cnblogsConfig = {} 中；

•基础信息配置

blogUser - 用户昵称

类型：String

默认值：[默认抓取博客园用户名]
window.cnblogsConfig = {
    blogUser: 'Hyacinth',
}
blogAvatar - 用户头像

类型：Url

默认值：""
window.cnblogsConfig = {
    blogAvatar: 'https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210128142821img.jpg',
}
blogStartDate - 入园时间

类型：Date

默认值：2019-01-01

　　入园时间，年-月-日，入园时间查看方法：鼠标停留园龄时间上，会显示入园时间。
window.cnblogsConfig = {
    blogStartDate: '2019-01-01',
}
　　将这些基础信息整合到 window.cnblogsConfig = {} 中的效果就是：
window.cnblogsConfig =
{
    GhVersions    : 'v1.3.3', // 版本
    blogUser      : "Hyacinth", // 用户名
    blogAvatar    : "https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210128142821img.jpg", // 用户头像
    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: -1,
}
webpageTitleFocus - 获取焦点标签文字

类型：String

默认值：(*´∇｀*) 欢迎回来！

　　当页面获取焦点，页面title显示的文字；显示后，延时恢复原title。
window.cnblogsConfig = {
    webpageTitleFocus: '(*´∇｀*) 欢迎回来！',
}
webpageTitleFocusTimeOut - 获取焦点变化延时

类型：Number

默认值：1000

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

　　版本 >= v1.3.3 后该配置值为 -1 时，当页面获取焦点，页面title显示的文字不会变化。
window.cnblogsConfig = {
    webpageTitleFocusTimeOut: -1,
}
webpageIcon - 网站图标

类型：Url

默认值：" "
window.cnblogsConfig = {
    webpageIcon: "https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210131030950resizeApi.png",
}
　　效果展示：

　　　　

switchDayNight - 日/夜间模式

类型：Object

默认值：
window.cnblogsConfig = 
{
    //日/夜间模式配置
    switchDayNight: {
        enable: true,       // 是否开启日/夜间模式切换按钮
        auto: {             // 自动切换相关配置
            enable: false,  // 开启自动切换
            dayHour: 5,     // 日间模式开始时间，整数型，24小时制
            nightHour: 19   // 夜间模式开始时间，整数型，24小时制
        }
    },
}
　　这个配置指的是页面右上角的按钮：

　　　　

　　页面使用日/夜间模式优先级：用户设置 > 自动切换 > 默认。

•菜单配置

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 - 菜单导航

类型：Array
默认值：[]

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

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

　　icon-gihub 可更换为其他样式，具体参考字体图标库；

　　把你想更换的图标的名字替换到 icon-github 即可；

menuUserInfoBgImg - 菜单个人信息背景图片

类型：Url
默认值：""

window.cnblogsConfig = {
    menuUserInfoBgImg: 'https://files.dbnuo.com/wallpaper/menu_bg.gif',
}

　　从别人的博客上扒拉过来的动图，效果如下：　　

　　如果你有好的资源，欢迎评论区留下，定当感激不尽！

•主页配置

类型：Array
默认值：

window.cnblogsConfig = {
    homeTopImg:
    [
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-dgojvj.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-13mk9v.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-ne7lr8.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-oxvkxp.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-k9p8l6.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-96w8e8.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-47ldq9.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-83w372.webp"
    ],
}

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

homeBannerTextType - 标语获取源

类型：String
默认值："jinrishici"

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

　　效果展示图：

　　当然你也可以自定义标语，格式如下：

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

　　每次刷新，会随机从数组中获取一条文字显示。

　　二者择其一设置即可；

•文章页配置

类型：Array

window.cnblogsConfig = {
    //文章页banner图片Url，推荐尺寸>= 1920*600，支持多张，每次刷新随机设置一张。
    essayTopImg:
    [
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-4d38m0.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-wyomo6.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-j5y525.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-r2yjg1.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-ym56zg.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-yml8wd.webp",
        "https://files.dbnuo.com/wallpaper/wallhaven-wymo2p.webp"
    ],
}

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

essayTitleStyle - 文章内容标题样式设置

类型：Boolean
默认值："false"

window.cnblogsConfig = {
    essayTitleStyle: false,
}

　　是否设置文章内容标题样式，默认不设置。

essaySuffix - 文章后缀配置

类型：Object

essaySuffix: 
{
    //左侧图片设置
    codeImgUrl   : 'https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210128142821img.jpg', 
    aboutHtml    : '努力学习技术的小白~~~', // 关于博主，不配置使用默认
    copyrightHtml: '', // 版权声明，不配置使用默认
    supportHtml  : '', // 声援博主，不配置使用默认
},

　　效果展示：

reward - 打赏

类型：Object

window.cnblogsConfig = {
    reward: {
        enable: true, // 是否开启打赏功能
        wechatpay: 'https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210205081332wechat.jpg', // 微信支付二维码图片URL
        alipay: 'https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210205081353qq_pic_merged_1612512740286.jpg' // 支付宝支付二维码图片URL
    },
}

　　文章打赏按钮，显示在页面右下角，记得换上你自己的呦~~~

weChatOfficialAccounts - 公众号

类型：Url
默认值：""

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

　　公众号二维码图片，显示在页面右下角。只在文章页显示公众号，首页不显示。

•代码相关配置

codeMaxHeight - 限制代码框高度

类型：Boolean

默认值："false"
window.cnblogsConfig = {
    codeMaxHeight: true,
}
限制代码框的最大高度；如开启，代码框高度不会超过页面可视区域的70%，隐藏部分通过滚动的方式查看。

codeLineNumber - 代码行号渲染

类型：Boolean

默认值："false"
window.cnblogsConfig = {
    codeLineNumber: true,
}
　　是否渲染代码行号，如开启会在代码框左侧增加行号显示，默认不开启。

　　不与博客园行号渲染兼容，如果博客园添加代码时勾选显示行号并同时开启此配置，会出现双行号的现象。

essayCode - 代码框统一样式设置

类型：Object
window.cnblogsConfig = {
        essayCode: //代码框统一样式设置，目前只有字体设置
        {
            fontFamily: "Ubuntu Mono',monospace", // 代码框字体
            fontSize: "14px" // 代码框字体大小
        },
}
essayCodeHighlightingType

类型：String

默认值："cnblogs"
window.cnblogsConfig = {
    //代码高亮样式
    //cnblogs : 使用博客园代码高亮样式
    essayCodeHighlightingType: "cnblogs",
}
　　使用博客园代码高亮样式，介意加载速度的可以使用此配置。

•页脚配置

footerStyle - 页脚样式

类型：Int

默认值：2
window.cnblogsConfig = {
    //页脚配置
    footerStyle: 1,//页脚样式，可选值：1 和 2
}
　　footerStyle: 1 对应样式：

　　　　

　　footerStyle: 2 对应样式：

　　　　

　　当然你也可以自定义样式；

　　鄙人不才，通过 PS 设计了一张透明的矢量图；

　　如何使用呢？

　　将上述 base.min.css 文件通过 Visual Studio Code 或 Notepad++ 打开；

　　按住 ctrl+F 检索关键字：footer-image，找到下面这段代码：

　　 footer-image{background:url(https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/footer.webp)

　　用浏览器打开这个 url，你会发现，这就是 footerStyle:1 对应的图片；

　　接着检索关键字：footer-background .foreground，找到下面这段代码：

　　 footer-background .foreground{background-repeat:repeat-x!important;background:url(https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/foreground.webp)

　　同样打开这个 url，你会发现，这就是 footerStyle:2 对应的图片；

　　那么，聪明的你是不是知道该如何做了？

　　没错，把我们自定义的矢量图上传到网上，然后将该矢量图的 url 替换掉上面的 url 即可；

　　因为我侧边公告栏的 footerStyle:1 配置为 1，所以，我将自制的透明矢量图的 url 替换掉检索到的第一个 url；

　　这样，我的页脚样式就变成透明的了；

　　最后，将更改后的 base.min.css 代码粘到页面定制 CSS 代码中就行了；

•_EOF_

　　其实，在文章结尾还有一个 _EOF_：

　　　　

　　是不是不太明显？

　　那么，如何让他明显一点呢？

　　同样的方式，按住 ctrl+F 检索关键字：eof，找到下面这段代码：

　　 essaySuffix-eof{font-weight:700;font-size:16px;text-align:center;color:#ddd;text-indent:0}

　　将上述代码中的 color:#ddd 改成 color:#000000 即可；

　　最后，将更改后的 base.min.css 代码粘到页面定制 CSS 代码中就行了；

　　修改后的效果：

　　　　

　　是不是明显多了；

•进度条配置

　　进度条配置，显示在页面顶部。

window.cnblogsConfig = {
    progressBar://显示在页面顶部。
    {
        id      : 'top-progress-bar', // 请勿修改该值
        color   : '#77b6ff',
        height  : '3px',
        duration: 0.2,
    },
}

•广告

advertising

类型：Boolean

默认值：true
window.cnblogsConfig = {
    advertising: false,
}
　　是否显示博客园广告.

其他配置

•声明

　　以下配置独立于上面的 <script> ；

　　

•鼠标点击特效

烟花特效

<!-- 鼠标点击烟花特效 -->
<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

爱心特效

<!-- 为页面添加爱心特效 -->
<script type="text/javascript">
    (function(window,document,undefined){
        var hearts = [];
        window.requestAnimationFrame = (function(){
            return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
             window.oRequestAnimationFrame ||
             window.msRequestAnimationFrame ||
             function (callback){
                 setTimeout(callback,1000/60);
             }
        })();
        init();
        function init(){
            css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }
        function gameloop(){
            for(var i=0;i<hearts.length;i++){
                if(hearts[i].alpha <=0){
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i,1);
                    continue;
                 }
                 hearts[i].y--;
                 hearts[i].scale += 0.004;
                 hearts[i].alpha -= 0.013;
                 hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }
        function attachEvent(){
            var old = typeof window.onclick==="function" && window.onclick;
            window.onclick = function(event){
                old && old();
                createHeart(event);
            }
        }
        function createHeart(event){
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el : d,
                x : event.clientX - 5,
                y : event.clientY - 5,
                scale : 1,
                alpha : 1,
                color : randomColor()
            });
            document.body.appendChild(d);
        }
        function css(css){
            var style = document.createElement("style");
            style.type="text/css";
            try{
                style.appendChild(document.createTextNode(css));
            }
            catch(ex){
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }
        function randomColor(){
            return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
        }
    })(window,document);
</script>

•L2Dwidget添加动漫人物

小萝莉

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
            "model": {
            //jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
            },
            "display": {
            "position": "left", //小萝莉的表现位置
            "width": 100,  //小萝莉的宽度
            "height": 200, //小萝莉的高度
            "hOffset": 0,//左右左右，-100 : 向左调整，100 : 向右调整，position 变为 right 时，调整方向刚好相反
            "vOffset": 0//上下调整，-100 : 向下调整，100 : 向上调整
            },
            "mobile": {
            "show": true,
            "scale": 0.5
            },
            "react": {
            "opacityDefault": 0.50,
            "opacityOnHover": 0.2
            }
            });
</script>

一直可爱滴猫

<script type="text/javascript">
    L2Dwidget.init({
        "model": {
           jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",<!--设置黑猫的上下左右位置-->
            "width": 130,
            "height": 300,
            "hOffset": 0,
            "vOffset": -175
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault":0.85,<!--设置透明度-->
            "opacityOnHover": 0.2
        }
    });
    </script>

　　这只黑猫有问题，一会有一会没有，可能抓老鼠去了........

我的侧边栏配置

<script type="text/javascript">
    window.cnblogsConfig =
    {

        //基础信息配置
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "Hyacinth", // 用户名
        blogAvatar    : "https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210128142821img.jpg", // 用户头像
        blogStartDate : "2019-01-01", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间

        //网站配置
        webpageTitleOnblur: '(oﾟvﾟ)ノ Hi',//当页面失去焦点，页面title显示的文字 
        webpageTitleOnblurTimeOut: -1,//当页面失去焦点，页面title变化的延时时间，单位毫秒。
        webpageTitleFocus: '(*´∇｀*) 欢迎回来！',//当页面获取焦点，页面title显示的文字；显示后，延时恢复原title
        webpageTitleFocusTimeOut: -1,//当页面获取焦点，页面title变化的延时时间，单位毫秒。
        webpageIcon: "https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210131030950resizeApi.png",//网站图标图片Url
        switchDayNight: 
        {
            //日/夜间模式配置
            enable: true,       // 是否开启日/夜间模式切换按钮
            auto: {             // 自动切换相关配置
                enable: false,  // 开启自动切换
                dayHour: 5,     // 日间模式开始时间，整数型，24小时制
                nightHour: 19   // 夜间模式开始时间，整数型，24小时制
            }
        },

        //菜单配置
        menuNavList://自定义菜单导航，显示在默认导航下方。 icon 支持与定义
        [
            // 列表数据 ['导航名称', '链接', 'icon']
            ['ACM', 'https://www.cnblogs.com/violet-acmer/', 'icon-select_fill'],
            ['Link', 'https://www.cnblogs.com/hyacinthLJP/articles/11411252.html', 'icon-like_fill'],
            ['New Essay', 'https://i.cnblogs.com/posts/edit', 'icon-brush_fill'],
        ],

        menuCustomList: 
        {
            "置顶文章": // 标题
            { 
                "data": // 列表数据 ['列表', '链接']
                [ 
                    ['通过《第一行代码》学习 Android 开发', 'https://www.cnblogs.com/hyacinthLJP/p/14340623.html'],
                    ['Java 学习', 'https://www.cnblogs.com/hyacinthLJP/p/14262889.html'],
                ],
                "icon": "icon-brush_fill" // 配置图标，参考文档：定制化/字体图标库
            },
        },
        
        menuUserInfoBgImg: 'https://files.dbnuo.com/wallpaper/menu_bg.gif',//菜单个人信息背景图片设置

        //主页配置
        homeTopImg://主页banner图片
        [
            "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-dgojvj.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-13mk9v.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-ne7lr8.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-oxvkxp.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-k9p8l6.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-96w8e8.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-47ldq9.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-83w372.webp"
        ],
        homeBannerTextType: "one",//每日获取一句话

        //文章页配置
        essayTopImg://文章页banner图片Url，推荐尺寸>= 1920*600，支持多张，每次刷新随机设置一张。
        [
            "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-4d38m0.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-wyomo6.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-j5y525.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-r2yjg1.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-ym56zg.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-yml8wd.webp",
            "https://files.dbnuo.com/wallpaper/wallhaven-wymo2p.webp"
        ],
        essayTitleStyle: false,//是否设置文章内容标题样式，默认不设置
        reward: //打赏设置
        {
            enable: true, // 是否开启打赏功能
            wechatpay: 'https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210205081332wechat.jpg', // 微信支付二维码图片URL
            alipay: 'https://images.cnblogs.com/cnblogs_com/hyacinthLJP/1531892/o_210205081353qq_pic_merged_1612512740286.jpg' // 支付宝支付二维码图片URL
        },

        //代码相关配置
        codeMaxHeight: true,//限制代码框的最大高度,代码框高度不会超过页面可视区域的70%，隐藏部分通过滚动的方式查看
        //是否渲染代码行号，如开启会在代码框左侧增加行号显示
        //不与博客园行号渲染兼容，如果博客园添加代码时勾选显示行号并同时开启此配置，会出现双行号的现象
        codeLineNumber: true,
        essayCode: //代码框统一样式设置，目前只有字体设置
        {
            fontFamily: "'Ubuntu Mono',monospace", // 代码框字体
            fontSize: "14px" // 代码框字体大小
        },
        //代码高亮样式
        //cnblogs : 使用博客园代码高亮样式
        essayCodeHighlightingType: "cnblogs",

        //页脚配置
        footerStyle: 1,//页脚样式，可选值：1 和 2

        //进度条配置
        progressBar://显示在页面顶部。
        {
            id      : 'top-progress-bar', // 请勿修改该值
            color   : '#77b6ff',
            height  : '3px',
            duration: 0.2,
        },

        //广告
        advertising: false, //是否显示博客园广告。

        //其他设置
        homeTopAnimationRendered: true,//是否渲染主页banner动效。
        homeTopAnimation: {//主页banner动效配置。
            color   : 'random',
        },
        essayTopAnimationRendered: true,//是否渲染文章页banner动效。
        essayTopAnimation: {//文章页banner动效配置。
            triW : 14,
            triH : 20,
        },
        bgAnimationRendered: true,//是否渲染页面背景动效
        backgroundAnimation: {//页面背景动效配置。
            colorSaturation: "60%",
            colorBrightness: "50%",
        },

    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

<!-- 鼠标点击烟花特效 -->
<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

<!-- 一直可爱滴猫 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
           jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",<!--设置黑猫的上下左右位置-->
            "width": 130,
            "height": 300,
            "hOffset": 0,
            "vOffset": -175,
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault":0.85,<!--设置透明度-->
            "opacityOnHover": 0.2
        }
    });
</script>

声明　　

　　本博客的博皮样式设计者是 BNDong 大神，在此表示衷心的感谢！

　　其他配置请参考：【链接地址】

posted @ 2021-02-05 14:04 MElephant 阅读(645) 评论(0) 编辑收藏举报

刷新页面返回顶部

Hello the world!

自定义博客园样式

前行必备

•选项设置

• 博客皮肤

页面定制CSS

•默认代码配置

•为页面添加一张背景图

代码

博客侧边公告栏

•前题

•侧边栏HTML代码

定制化侧边栏

•声明

•基础信息配置

blogUser - 用户昵称

blogAvatar - 用户头像

blogStartDate - 入园时间

•网站配置

webpageTitleOnblur - 失去焦点标签文字

webpageTitleOnblurTimeOut - 失去焦点变化延时

webpageTitleFocus - 获取焦点标签文字

webpageTitleFocusTimeOut - 获取焦点变化延时

webpageIcon - 网站图标

switchDayNight - 日/夜间模式

•菜单配置

menuCustomList - 菜单数据

menuNavList - 菜单导航

menuUserInfoBgImg - 菜单个人信息背景图片

•主页配置

homeTopImg - 主页banner图片

homeBannerTextType - 标语获取源

•文章页配置

essayTopImg - 文章页banner图片

essayTitleStyle - 文章内容标题样式设置

essaySuffix - 文章后缀配置

reward - 打赏

weChatOfficialAccounts - 公众号

•代码相关配置

codeMaxHeight - 限制代码框高度

codeLineNumber - 代码行号渲染

essayCode - 代码框统一样式设置

essayCodeHighlightingType

•页脚配置

footerStyle - 页脚样式

•_EOF_