博客园美化记录

主题方案

整体上使用了大佬@BNDogn的方案，可以点击前往查看教程

其它配置

注意：
配置中用到的插件都放到Gitee了，需要的自取：https://gitee.com/ajream/cnblogs_plugs

本人在原作者的基础上又搜罗了一些插件或脚本，实现了本博客的样式，如图所示为博客看板娘（看下文的页脚配置代码）。

image image

背景渐变色（看下文的css代码和页脚配置代码）

image

音乐播放器（看下文的css代码和页脚配置代码）

image

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

返回顶部的小猫（看下文的页首HTML代码）

image

配置代码

页面定制css代码

渐变背景可以去这个网站获取css代码

/* 导入整体主题文件 */
/* @import "https://files.cnblogs.com/files/blogs/710456/simpleMemory.css"; */
/* 渐变背景 网站https://c.runoob.com/more/gradients/#AzurLane */

@import "https://files.cnblogs.com/files/blogs/710456/simpleMemory2.1.0.css";

#home{
  background-color: rgba(255,255,255,0.7);  /*文章页透明度*/
}
/* 文章右侧目录 */
#articleDirectory ul {
    background-color: #97acd22e; 
}

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

博客侧边栏公告代码

<!-- <input id="linkListFlg" type="hidden" /> -->

<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代码

（根据个人需要把对应部分的注释取消即可）

<!--页首HTML-->

<!-- 悬挂的喵-返回顶部 -->
<!-- <script type="text/javascript" src="https://files.cnblogs.com/files/blogs/710456/returntop.js?t=1647784434"></script>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/blogs/710456/returntop.css?t=1647784440" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div> -->
<!-- 悬挂的喵-返回顶部 -->

<!-- 哔哩哔哩-返回顶部 -->
<!-- <script type="text/javascript" src="https://files.cnblogs.com/files/blogs/710456/return_top_bilibili.js?t=1651729900"></script>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/blogs/710456/return_top_bilibili.css?t=1651729907" />
<div class="back-to-top"></div> -->
<!-- 哔哩哔哩-返回顶部 -->

<!-- 樱花特效 https://files.cnblogs.com/files/blogs/710456/yinghua.js?t=1647827004-->
<!-- 叶子1  https://files.cnblogs.com/files/blogs/710456/leaf.js?t=1648024948 -->
<!-- 叶子2  https://files.cnblogs.com/files/blogs/710456/leaf2.js?t=1648026921 -->
<!-- <script src="https://files.cnblogs.com/files/blogs/710456/plant.js?t=1648031083"></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/plant.js?t=1648031083");
    }else{ //如果是手机  
    } 
</script> -->
<!-- 樱花特效 -->

<!-- 背景黑色线条 -->
<!-- <script src="https://files.cnblogs.com/files/blogs/710456/xiantiao.js?t=1647783507"></script> -->
<!-- 背景黑色线条 -->

页脚HTML代码

<!-- 主页背景色【夜间-白天】模式切换 -->
<script type="text/javascript">
function changeBg(mybtn, mybg){
    if(mybtn.className.search('daySwitch') != -1){
        var mybg = document.querySelector(".skin-simplememory");
        mybg.style.backgroundImage = 'linear-gradient(to left, #c2b5f5, #96bced)'; // 设置白天渐变背景色
    } else {
        mybg.style.removeProperty('background-image');
    }
}
window.addEventListener('load', function(){
    var mybtn = document.querySelector('.onOff');
    var mybg = document.querySelector(".skin-simplememory");
    var mybtnWrap =  document.querySelector('.generalWrapper');
    changeBg(mybtn, mybg);
    mybtnWrap.onclick = function(){
        var mybg = document.querySelector(".skin-simplememory");
        changeBg(mybtn, mybg);
        // console.log(mybtn.className);
    }
})
</script>
<!-- 主页背景色 -->

<!--   音乐播放器  -->
<!-- require APlayer -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="//cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="//cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<!-- auto="//y.qq.com/n/ryqq/playlist/8133710813.html"    qq音乐歌单链接 -->
<!-- //music.163.com/#/my/m/music/playlist?id=6925236447  网易云 -->
<!-- auto="//music.163.com/?from=infinity#/playlist?id=6925236447" 网易云歌单链接 -->
<!-- autoplay="true"  自动播放-->
<meting-js    
    auto="//music.163.com/?from=infinity#/playlist?id=6925236447"
    fixed="true"
    preload="auto"
></meting-js>
<!--   音乐播放器  -->

<!-- 鼠标特效  -->
<script type="text/javascript">
// var a_idx = 0;
// jQuery(document).ready(function($) {
//     $("body").click(function(e) {
//         var a = new Array("❤开心❤","❤快乐❤","❤高兴❤", "❤愉快❤");
//         var $i = $("<span></span>").text(a[a_idx]);
//         a_idx = (a_idx + 1) % a.length;
//         var x = e.pageX,
//         y = e.pageY;
//         $i.css({
//             "z-index": 999999,
//             "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>
<canvas width="1366" height="520" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<!-- 页脚雪花 -->

<!-- 看板娘配置 -->
<!-- font-awesome图标加载 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">  
<!-- 文件加载 -->
<script src="https://files.cnblogs.com/files/blogs/710456/loads.js?t=1655211043"></script>  
<!-- 看板娘配置 -->

其它

配置中用到的插件（js、css文件等）都放到Gitee了，需要的自取：https://gitee.com/ajream/cnblogs_plugs

posted @ 2022-03-20 22:47  aJream  阅读(178)  评论(0)  编辑  收藏  举报