博客园美化记录


主题方案

整体上使用了大佬

额外配置

本人在原作者的基础上又搜罗了一些插件或脚本,实现了本博客的样式,如图所示均为额外添加的

背景渐变色

音乐播放器

主页花瓣飞舞的效果,点击查看

返回顶部的小猫

配置代码

页面定制css代码


/* 导入整体主题css */
@import "https://files.cnblogs.com/files/blogs/710456/simpleMemory.css";

/* 渐变背景 */
body {
  /* background: linear-gradient(to left bottom,#b2f7ff 0,#b2d1ff 100%); */
  background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1));
}
#home{
  opacity: 0.9;  /*文章页透明度*/
}



/* aplayer播放器缩进 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;  /* 默认情况下缩进左侧66px,只留一点箭头部分 */
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important;  /* 鼠标悬停是左侧缩进归零,完全显示按钮 */
}
/* aplayer播放器缩进 */

博客侧边栏公告代码



<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'aJream', // 用户名
        startDate: '2021-09-17', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
        avatar: 'https://pic.cnblogs.com/avatar/2566822/20210929164658.png', // 用户头像
        blogIcon: 'https://cdn.jsdelivr.net/gh/ajream/ajream.github.io/img/AJ1.png',  //站点图标
      },

      fontIconExtend: "//at.alicdn.com/t/font_2746409_iuah9idc2x.css",


      sidebar: { // 列表数据 ['导航名称', '链接', 'icon']
          navList: [
            ['收藏', 'https://wz.cnblogs.com/my/', 'icon-shoucang'],
            ['个人博客', 'https://ajream.github.io', 'icon-blog'],
            ['Github', 'https://github.com/ajream/', 'icon-github'],
            ['Gitee', 'https://github.com/ajream/', 'icon-gitee2'],
            ['友链', 'https://www.cnblogs.com/ajream/p/15412977.html', 'icon-Link']
            
        ],
        
        // infoBackground: 'https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2128122/o_220319124339_erciyaun52.jpg',    // 个人信息背景
        infoBackground: 'https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2128122/o_220320113540_info2047392.jpg',
      },

      banner: {
        // 主页图片
        home: {
            background: [
              "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.8/dist/images/e58d9f9d0eee6d9b9add.webp",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319123645_erciyaun6.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319123703_erciyaun16.png",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319123538_erciyaun3.png",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2128122/o_220319124420_erciyaun40.png",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2128122/o_220319124452_erciyaun31.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141605_jijianbizhi20220319_02.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141741_jijianbizhi20220319_20.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141626_jijianbizhi20220319_04.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141731_jijianbizhi20220319_14.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141653_jijianbizhi20220319_09.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120439_VuSnkygg.webp",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120451_jijianbizhi20220320_03_2.webp",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120459_jijianbizhi20220320_05_2.webp",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120515_Ma3vSqEl.webp",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120525_jijianbizhi20220320_04.jpg",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120539_jijianbizhi20220320_02_1.webp",
              "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120550_jijianbizhi20220320_01_1.jpg",

              
            ],
        },
        article: {
            background: [

                "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.8/dist/images/6d995b207bae4175ff28.webp",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319123645_erciyaun6.jpg",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319123703_erciyaun16.png",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319123538_erciyaun3.png",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2128122/o_220319124420_erciyaun40.png",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2128122/o_220319124452_erciyaun31.jpg",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141605_jijianbizhi20220319_02.jpg",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141741_jijianbizhi20220319_20.jpg",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141626_jijianbizhi20220319_04.jpg",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141731_jijianbizhi20220319_14.jpg",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220319141653_jijianbizhi20220319_09.jpg",

                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120439_VuSnkygg.webp",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120451_jijianbizhi20220320_03_2.webp",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120459_jijianbizhi20220320_05_2.webp",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120515_Ma3vSqEl.webp",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120525_jijianbizhi20220320_04.jpg",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120539_jijianbizhi20220320_02_1.webp",
                "https://images.cnblogs.com/cnblogs_com/blogs/710456/galleries/2046180/o_220320120550_jijianbizhi20220320_01_1.jpg",
            ],
        },
      },

      links: {
          page: [
            {
              name: 'aJream', // 昵称
              introduction: '我的个人博客', // 简介
              avatar: 'https://ajream.github.io/img/avatar2.jpg', // 头像
              url: 'https://ajream.github.io' // 友链地址
            },
            {
              name: 'BNDong', // 昵称
              introduction: 'IT技术类博客', // 简介
              avatar: 'https://blog.dbnuo.com/images/avatar.gif', // 头像
              url: 'https://www.cnblogs.com/bndong' // 友链地址
            },
            {
              name: '浇筑菜鸟',
              avatar: 'https://gitee.com/ajream/images/raw/master/images/img/uxylxsozub_2022119131{S}308.png1642571399290.png',
              url: 'https://www.cnblogs.com/jzcn/'
            },
            {
              name: 'YJLAugus',
              avatar: 'https://pic.cnblogs.com/avatar/1176586/20211228162343.png',
              url: 'https://www.cnblogs.com/yjlaugus/#/c/subject/category/default.html'
            },
            {
              name: 'Fluid',
              avatar: 'https://hexo.fluid-dev.com/img/avatar.png',
              url: 'https://hexo.fluid-dev.com/'
            },

          ],
        },

      switchDayNight: {
          enable: true,
          auto: {
              enable: true
          }
      },

      //主页动态效果 
      animate: {
        homeBanner: {
          enable: false,
          options: {
            radius: 15,
          }
        },
      },

      //代码栏限制高度
      code: {
        options: {
          line: true,             // 显示行号
          macStyle: true,         //mac风格代码框
          maxHeight: '70vh',
          hljs: {
            theme: 'atom-one-dark', //default/atom-one-dark-reasonable/qtcreator_dark/darkula/xcode(白色good)/mono-blue/monokai-sublime(好看)/atom-one-dark(good)/vs2015(good)
            languages: ['Bash', 'CSS', 'Dockerfile', 'Go', 'HTML', 'HTTP']
          },

        },
        type: 'hljs',
      },

      title: {
        onblur: '>︿<别走,再看看呀',
        onblurTime: 500,   // 失去焦点延时 500ms
        focus: 'q(≧▽≦q)欢迎回来!',
        focusTime: 500,   //获得焦点延时
      },

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

页首HTML代码



<script type="text/javascript" src="https://files.cnblogs.com/files/blogs/710456/returntop.js?t=1647784434"></script>

<script src="https://files.cnblogs.com/files/blogs/710456/yinghua.js?t=1647783220"></script> <script type="text/javascript">//樱花 var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); if(system.win||system.mac||system.xll){//如果是电脑 $.getScript("https://files.cnblogs.com/files/blogs/710456/yinghua.js?t=1647783220"); }else{ //如果是手机 } </script>

页脚HTML代码








<script src="//cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<script src="//cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>





<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("?开心?","?快乐?","?高兴?","?开心?","?快乐?","?开心?","?开心?","?开心?","?开心?","?开心?","?开心?","?开心?");
        var $i = $("").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
<script src="https://blog-static.cnblogs.com/files/Return-blog/xue.js"></script> <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
<script src="https://files.cnblogs.com/files/blogs/710456/loads.js"></script>