博客园自定义样式 SimpleMemory

基础设置

注意，需要先申请JS权限!

博客皮肤选择 SimpleMemory
代码高亮中不要勾选显示行号
将 /dist/simpleMemory.css 中的CSS代码位置，拷贝至页面定制CSS代码文本框处
勾选禁用模板默认CSS
在博客侧边栏公告中输入自定义配置

自定义 css

参考：博客园使用 highlight.js 对代码进行高亮
SimpleMemory 提供的 /dist/simpleMemory.css

.cnblogs-markdown pre,#cnblogs_post_body pre{white-space: pre; word-wrap} /*控制代码不换行*/
.hljs{tab-size: 4;} /*控制TAB代码缩进的宽度是4个空格*/

.menu-wrap{width:320px !important;transform:translate3d(-320px,0,0) !important;} .show-menu .menu-wrap{transform:translateZ(0) !important;} /*修改左侧栏的宽度*/ 
#menuWrap > div.optiscroll-content > nav{padding-left:5px !important; padding-right:5px !important;} /*修改左侧栏的左右内边距*/ 
.m-icon-list a, #sb-topview > div > ul{padding:5px 0% 0 !important;} /*修改左侧栏item的宽度*/ 
#sb-topview > div > ul > li > a{font-size: 1.3rem !important;} /*修改左侧栏阅读排行列表文字大小*/ 
.m-list-title>span{width:70px !important; text-align:left !important; left:40% !important; margin-left:0px !important;} /*左侧栏每个栏目标题文字的位置*/ 

#m-nav-list > li:nth-child(3){display:none !important;} /*隐藏左侧栏的订阅项*/ 
#menuWrap > div.optiscroll-content > nav > div:nth-child(5){display:none !important;} /*隐藏左侧栏的找找看*/ 

#articleDirectory{width:320px !important; right:0 !important;} #articleDirectory.articleDirectoryFixed{max-height: 100vh !important;} /*修改右侧目录宽高、位置*/ 
#dayNightSwitch .onOff{position:fixed !important; width:40px !important; top:10px !important; right:5px !important;} /*修改夜间模式按钮的宽高、位置*/ 
#rightMenuHome, #rightBuryit{display:none !important;} /*隐藏右侧工具栏里的首页、反对按钮*/
#blog_post_info{display:none !important;} /*隐藏底部发布时间上面的那一排推荐、关注、收藏*/ 

.commentbox_footer{display:none !important;} /*隐藏评论框下面的自动补全工具栏*/ 
#comment_form_container .comment_textarea{min-height:120px !important;} div.commentform textarea{height:120px !important;} /*修改评论框的高度*/ 
#commentbox_opt > a{display:none !important;} /*隐藏提交评论右侧的退出按钮*/ 
#comment_form_container > p:nth-child(7){font-size:0px !important;} /*隐藏提交评论下面的快捷方式提示*/ 
#mainContent{padding:0 0 0px !important;}  #comment_form_container p{ margin-bottom:0px !important;} /*减少提交评论下面的空白区域高度*/ 
#EntryTag{display:none !important;} /*隐藏标签*/

#under_post_card1, #under_post_card2, #cnblogs_ch{display:none !important;} /*隐藏底部推荐的文章*/ 
#footerStyle1{display:none !important;} /*隐藏底部的一张图片*/ 

#home{width:70%;max-width:1100px;background-color:rgba(255,255,255,.9);padding:0 20px 30px;box-shadow:0 0 20px 10px rgba(220,220,220,.3)} /*修改内容区域宽度*/

.footer-t1{min-height:90px !important;margin:0px 0 0 !important;} /*修改底部高度，必须放到最后*/

自定义配置

<script type="text/javascript">
    //文档地址 https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/Customization/config
    window.cnblogsConfig = {
        info: { //基础信息
            name: '白乾涛', //用户名，默认抓取博客园用户名
            startDate: '2015-08-08', //入园时间，年-月-日
            avatar: 'https://pic.cnblogs.com/avatar/795730/20210320205609.png', //用户头像
            blogIcon: 'https://images.cnblogs.com/cnblogs_com/baiqiantao/2050000/o_211023100116_android.png', //网站图标
        },

        sidebar: { //侧边栏
            _infoBackground: 'https://files.dbnuo.com/wallpaper/menu_bg.gif', //侧边栏个人信息背景图片
            navList: [ //自定义菜单导航，显示在默认导航下方
                ['GitHub', 'https://github.com/baiqiantao', 'icon-github'],
            ],
            customList: { //自定义菜单数据，显示在默认数据上方。菜单数量不受限制
                "推荐文章": { //菜单标题
                    "data": [//列表数据 ['列表', '链接']
                        ['自定义 AS Gradle plugin', 'https://www.cnblogs.com/baiqiantao/p/12657397.html'],
                        ['ThreadLocal 原理 源码分析', 'https://www.cnblogs.com/baiqiantao/p/7257326.html'],
                        ['强引用 软引用 弱引用 引用队列', 'https://www.cnblogs.com/baiqiantao/p/5430896.html'],
                        ['Android 事件分发机制', 'https://www.cnblogs.com/baiqiantao/p/10176672.html'],
                        ['Android Handler 详解', 'https://www.cnblogs.com/baiqiantao/p/6179579.html'],
                    ],
                    "icon": "icon-brush_fill" //配置图标，参考文档：定制化/字体图标库
                }
            },
        },

        banner: { //banner图
            home: { //主页banner图片，支持多张，每次刷新随机设置一张
                background: [
                    "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",
                    "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"
                ],

                _titleSource: 'jinrishici', //标语获取源(one代表从下面数组中获取一条)，默认为jinrishici，随机获取一句古诗词
                title: [ //主页banner标语，设置此选项会随机从数组中获取一条文字显示，不设置默认每次刷新随机获取一句古诗词
                    '每一个不曾起舞的日子，都是对生命的辜负。',
                    '世界上最昂贵的是------时间！',
                    '以终为始，别忘了当初为什么出发！',
                ],
            },
            article: { //文章页banner图片，每次刷新随机设置一张
                background: [
                    "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",
                    "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"
                ],
            },
        },

        links: { //友情链接
            footer: [ //页脚友链
                ['白乾涛的博客', 'https://www.cnblogs.com/baiqiantao/'],
                ['白乾涛的GitHub', 'https://github.com/baiqiantao'],
            ],
            _page: [ //友链页，需要在页面源码中添加 <input id="linkListFlg" type="hidden" />
                {
                    name: 'BNDong', // 昵称
                    introduction: 'IT技术类博客', // 简介
                    avatar: 'https://blog.dbnuo.com/images/avatar.gif', // 头像
                    url: 'https://blog.dbnuo.com' // 友链地址
                },
            ],
        },

        articleDirectory: { //文章右侧的目录
            position: 'right', //用于设置文章目录显示在文章的左侧还是右侧，配置项：right、left
            minBodyWeight: 1400, //文章目录在屏幕宽度到多少像素及以内时开始隐藏
            autoWidthScroll: false, //文章目录中标题过长时候是否显示横向滚动条
        },

        articleSuffix: { //文章后缀
            imgUrl: 'https://pic.cnblogs.com/avatar/795730/20210320205609.png', //文章后缀左侧图片
            aboutHtml: "十年 Android 开发老鸟，Base 深圳！人生过半，初心未改；三十未立，以终为始！", //支持HTML代码
            copyrightHtml: "本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处！", 
            supportHtml: "如果您觉得文章对您有帮助，可以点击页面右下角的喜欢、关注、赞赏图标。",
        },

        code: { //代码
            type: 'hljs', //使用何种方式渲染代码：cnblogs(使用博客园默认代码高亮样式)，hljs(使用 Highlighting 插件渲染代码高亮样式)
            options: { //渲染配置
                hljs: { //Highlighting 插件样式配置
                    theme: 'darcula', //代码高亮主题，default、idea、googlecode、darcula、tomorrow-night
                    languages: ['Java', 'XML', 'JavaScript', 'Markdown', 'Json', 'Bash', 'C', 'kotlin'] //语言识别范围
                    // 支持语言 https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
                },
                //maxHeight: '70vh', //代码框高度限制，例如：70vh、70%
                line: true, //是否渲染代码行号，如果博客园添加代码时勾选显示行号并同时开启此配置，会出现双行号的现象
                macStyle: true, //mac风格代码框样式
            },
        },

        switchDayNight: { //日/夜间模式配置
            enable: true,       //是否开启日/夜间模式切换按钮
            nightMode: false,   // 强制夜间模式
            auto: {             //自动切换相关配置
                enable: true,  //开启自动切换
                dayHour: 8,     //日间模式开始时间，整数型，24小时制
                nightHour: 22   //夜间模式开始时间，整数型，24小时制
            }
        },

        rtMenu: { //右下角菜单
            qrCode: 'https://images.cnblogs.com/cnblogs_com/baiqiantao/2050000/o_211023092644_wx.jpg', //二维码图片
            reward: { //赞赏
                _alipay: 'https://images.cnblogs.com/cnblogs_com/baiqiantao/2050000/o_211023094346_zfbskm.jpg', // 支付宝收款码
                wechatpay: 'https://images.cnblogs.com/cnblogs_com/baiqiantao/2050000/o_211023091939_wxzsewm.png', // 微信收款码
            },
            downScrollDom: '#blog_post_info_block', //跳至底部位置定义，配置为 JQuery 选择器
        },

        title: { //页面标签
            onblur: '白乾涛', //当页面失去焦点，页面title显示的文字
            onblurTime: 500, //当页面失去焦点，页面title变化的延时时间。值为 -1 时，不会变化
            focus: '欢迎访问白乾涛的博客',//当页面获取焦点，页面title显示的文字；显示后，延时恢复原title
            focusTime: 1000,//当页面获取焦点，页面title变化的延时时间。值为 -1 时，不会变化
        },

        footer: { //页脚
            style: 1, //页脚样式，可选 1 或 2
            text: { //页脚标语
                left: '以终为始', //页脚标语左侧文字
                right: '勿忘初心',
                iconFont: { //字体图标，默认为空
                    icon: "icon-xl",
                    color: "red",
                    fontSize: "16px"
                }
            },
        },

        animate: {//动效，动效会消耗GPU，所有动效默认配置为关闭
            homeBanner: { // 主页banner动效
                enable: false, // 是否开启动效
                options: {
                    radius: 15,
                    density: 0.2,
                    color: 'rgba(255,255,255, .2)', // 颜色设置，random 为随机颜色
                    clearOffset: 0.3
                }
            },
            articleTitle: { //文章页标题动效
                enable: false,
            },
            articleBanner: { //文章页banner动效
                enable: true,
            },
            background: { //背景动效
                enable: false,
                options: {
                    colorSaturation: "60%",
                    colorBrightness: "50%",
                    colorAlpha: 0.5,
                    colorCycleSpeed: 5,
                    verticalPosition: "random",
                    horizontalSpeed: 200,
                    ribbonCount: 3,
                    strokeSize: 0,
                    parallaxAmount: -0.2,
                    animateSections: true
                }
            },
            bannerImages: { //banner背景图自动切换动效
                enable: false,
                options: {
                    itemNum: 5, // 图片拆分成几列
                    current: 0, // 初始图片的下标，如果为负数则为随机
                    sort: 1, // 1 代表每次向下加载一个图片，-1 代表每次向上加载一个图片
                    time: 30000 // 每次切换间隔时间，单位：毫秒
                }

            },
            backgroundMouse: { //背景动效，颜色比较浅不影响阅读，鼠标移动有简单动偏移动画
                enable: false,
            },
            mouse: { //跟随鼠标动效，不会隐藏原鼠标，如果想隐藏原鼠标可以自行添加css样式 html {cursor: none;}
                enable: false,
                options: {
                    size: 8, // 中心圆点的大小，单位 px
                    sizeF: 36 // 外部边框的大小，单位 px
                }
            },
        },

        loading: { //页面加载loading，使用开源项目：claudiocalautti/spring-loader
            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,
            }
        },

        progressBar: { //顶部进度条
            id: 'top-progress-bar', // 请勿修改该值
            color: '#77b6ff',
            height: '2px',
            duration: 0.2,
        },

        _consoleList: [], //控制台输出
        _cnzz: "123456", // 网站统计，cnzz：网站ID。如果需要本功能，请首先去 CNZZ 配置网站的统计，然后将网站ID添加到配置中
    }

</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.8/dist/simpleMemory.js"
        defer></script>

其他

可选的代码高亮主题

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

添加看板娘

参考

建议把以下四个文件文件上传到博客园的文件中

waifu.css：在页面的位置以及大小
- waifu.css 是放左面的
- waifu_right.css 是放右边的
waifu-tips.js：各种提示语
live2d.min.js：一些点击之后的动作
flat-ui.min.css：右面的选项，不需要可以不配置

然后把以下代码(原文中的代码有问题)中的复制到博客侧边栏公告区域即可，注意 需要先申请JS权限!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/baiqiantao/waifu.css"/>
<link rel="stylesheet" type="text/css" href=" https://blog-static.cnblogs.com/files/baiqiantao/flat-ui.min.css"/> 
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/baiqiantao/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/baiqiantao/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>