02、博客园主题布置

　　开始使用博客园，是两年多前的事了，不过最近才开始认真研究起来..

　　关于其过于朴素的初始界面，很早之前我就想要美化一下了，但是发现技术不行，虽然目前仍然不行，不过起码可以借助大佬的手，哈哈哈~

　　弄了好几天了，可能是我比较菜吧，不过大佬很强，话不多说，正文开始：

~前戏

　　了解了一下云图床，弄了一个iconfont仓库

~简述

　　本主题建立在SimpleMemory之上，读者想要读懂代码，可以通过作者大佬的文档来一步一步构建（挺有意思的过程，有时间可以更加深入的研究一下），下面是我的一些简单布置；

~CSS代码

　　将本css代码复制到博客园后台即可；

~侧边栏公告

　　（这里按照文档一步一步来即可，强烈推荐自己捯饬一遍）

<script type="text/javascript">
    window.cnblogsConfig = {
//我擅自加的后面有！
        code: {
            type: 'hljs',//使用Highting插件渲染代码高亮
            theme: 'atom-one-dark-reasonable',
            // languages: ['Bash','CSS', 'Dockerfile', 'Go', 'HTML', 'XML', 'HTTP'],
            // 代码主题
            options: {
                line: true,
                //与博客园的添加行号配置是不兼容的
                macStyle: true,
                //mac风格代码框!
                fontSize: 20,
                //字体大小!
            },
        },
        //文章目录设置!
        articleDirectory: {
            position: 'left',
            minBodyWeight: 1400,
            autoWidthScroll: true,
        },
        //文章后缀设置!
        articleSuffix: {
            imgUrl: 'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221217051656_coffee_book_glasses_140830_1280x1024.jpg',
            //文章后缀图片，默认是info.avatar
            aboutHtml: "喜爱编程、酷爱游戏、热爱生活的菜鸟一枚"
        },
        
        info: {
            name: 'Dancing by Heart', // 用户名
            startDate: '2022-12-11',
            avatar: 'https://pic.imgdb.cn/item/639923d0b1fccdcd36911292.jpg', // 用户头像
            blogIcon: 'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214013356_Cache_-63862eb72dfc2404..jpg',
        },

        //动态效果设置
        animate: {
            homeBanner: {
                enable: true,
                options: {
                    radius: 15,
                }
            },
            articleTitle: {
                enable: true,
            },
            articleBanner: {
                enable: true,
            },
            background: {
                enable: true,   
            },
            bannerImages: {
                enable: true,
            },
            backgroundMouse: {
                enable: true,
            },
            mouse: {
                enable: true, // 是否开启
                options: {
                    size: 8, // 中心圆点的大小，单位 px
                    sizeF: 30 // 外部边框的大小，单位 px
                }
            }
        },
        
        //这里可能有版本问题，比如背景图，题目>=2.1
        sidebar: { // 列表数据 ['导航名称', '链接', 'icon']
            titleMsg: '客官，里边儿请~',
            navList: [
                ['GitHub', 'https://github.com/tailsofmonster?tab=repositories', 'icon-github'],
                ['Gitee', 'https://gitee.com/', 'icon-gitee'],
                ['CSDN', 'https://edu.csdn.net/?spm=1000.2115.3001.4482/', 'icon-csdn1'],
                ['QQ邮箱', 'https://mail.qq.com/cgi-bin/frame_html?sid=z7m1-EhHL70gTHUW&r=87a36e98fcf5caa8a8fce0c94c73985a&lang=zh', 'icon-youxiang'],
                ['leetcode', 'https://leetcode.cn/problemset/all/', 'icon-leetcode'],
            ],
            infoBackground: 'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221217065209_origami_ships_space_129546_1920x1080.jpg',
        },

        banner: {
            home: {
                //主页图片
                background: [
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214011724_boat_couple_stars_129520_1920x1080.jpg',
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214011755_chinese_lanterns_sky1920x1080.jpg',
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214011803_city_vector_panorama_119914_1920x1080.jpg',
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221216010945_silhouette_starry_sky_pillars_134464_1920x1080.jpg',
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214011849_silhouette_starry_sky_shooting_1920x1080.jpg',
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214010043_a26f66658e014e06aa70e2753742bef3.jpg',
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214011815_hourglass_clock_night_181153_1920x1080.jpg',
                    'https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221216011003_girl_kitten_flower_141058_1920x1080.jpg','https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221214020821_5cd3a33d148bd.jpg',
                ],
                //标语，数组中选择一个
                title: [
                    "悟已往之不谏,知来者之可追",
                    "逆境和磨难是套上一层轻纱的梦想",
                    "贵有恒，何必三更起五更眠。最无益，只怕一日曝十日寒",
                    "竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生",
                    "万物皆有裂缝，那是光照进来的地方",
                    "海到无边天作岸，山登绝顶我为峰",
                    "雄关漫道真如铁，而今迈步从头越",
                    "逝者如斯夫，不舍昼夜",
                    "盛年不重来，一日难再晨；及时当勉励，岁月不待人",
                    "做你自己，因为别人都有人做了",
                ],
                //每日诗词(meirishici)、每日获取一句话(one);
                //这里会被标语给挤掉，二的其一
                titleSource: 'meirishici',
            },
            article: {
                //文章页头图
                background: [
                    "https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221216011421_pattern_frosty_frost_134125_1920x1080.jpg",
                    "https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221216011824_garlands_decoration_christmas_122221_1920x1080.jpg",
                    "https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221216012416_silhouette_art_sky_129925_1920x1080.jpg",
                    "https://images.cnblogs.com/cnblogs_com/blogs/739345/galleries/2254747/o_221216012639_autumn_drawing_walking_82963_1920x1080.jpg"
                ],
            },
        },
        loading: {
            rebound: {
                tension: 16,
            },
            spinner: {
                id: 'spinner',
                radius: 90,
            }
        },

        //顶部进度条!
        progressBar: {
         color   : '#700013',
         height  : '2px',
        },

        //tag失去焦点事件!
        title: {
            onblur: '┻━┻︵╰(｀∇′)╯︵┻━┻', 
            onblurTime: 200,
            focus: '｟❛◡❛ॣॣ｠.･｡╟╢ᎯƤƤᎽ.･｡',
            focusTime: 1500,
        },

        footer: {
            style: 1,
            text:{
                left:  "利欲趋人万火牛",
                right: "江湖浪迹一沙鸥",
                iconFont: {
                    icon: "icon-xl",
                    color: "#540011",
                    fontSize: "20px",
                }
            }
        },
        //日夜间切换按钮
        switchDayNight: {
            enable: true,
            auto: {
                enable: true,
            }
        },
    }
</script>
<!-- 这里切换版本号 -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.2/dist/simpleMemory.js" defer></script>
<script src="https://files.cnblogs.com/files/cainiao-chuanqi/mouse-click.js">
</script>

~页首HTML代码

<!--<meta http-equiv="x-dns-prefetch-control" content="on">-->
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://at.alicdn.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://static.cnblogs.com/">
<link rel="dns-prefetch" href="https://images2018.cnblogs.com/">
<link rel="dns-prefetch" href="https://v2.jinrishici.com/"><!--今日诗词-->
<!-- jsdelivr加载资源 -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" as="script">
<!--Simple memory美化工具-->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3828080_hr92axxqnyn.css">
<!--我的iconfont图标库,需要变为https才可以-->
<!--每次crue仓库都需要更新链接的...-->
<script type="text/javascript" src="https://files.cnblogs.com/files/blogs/739345/etx01.js?t=1670901818"></script>
<!--自己写的;按钮收缩;-->