博客园——打造不一样的个人博客

[小G]

已于 2022-03-28 16:36:24 修改

阅读量2.7k

点赞数 9

文章标签：博客园

于 2022-03-28 13:21:53 首次发布

本文链接：https://blog.csdn.net/m0_46079750/article/details/123792886

版权

最近跑去博客园写文章了，一个原因是觉得博客园阅读体验更好，阅读时没有太多的干扰，可以定制主题界面，给人感觉更加舒适。这是我在博客园的博客首页。

点击跳转到我的博客园

在这里插入图片描述

主题美化方案

博客园默认或者官方提供的主题还是不太好看，下面说说我的博客园美化流程。整体上使用了大佬【@BNDogn】的方案，可以【点击前往查看教程】

其它配置

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

【看板娘】

【背景渐变色】

【音乐播放器】

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

【返回顶部的小猫】

配置代码

页面定制css代码

渐变背景可以【去这个网站】获取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{
  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代码


<!-- 悬挂的喵-返回顶部 -->
<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 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>
<!-- 樱花特效 -->

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

页脚HTML代码

<!--   网站统计  -->
<div id="cnzzProtocol"  style="display: none;">
    <span class="id_cnzz_stat_icon" id='cnzz_stat_icon_1279442252'></span>
    <script src='//v1.cnzz.com/z_stat.php?id=1279442252&online=1&show=line' type='text/javascript'></script>
</div>

<!--   音乐播放器  -->
<!-- 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音乐歌单链接-->
<!-- auto="//music.163.com/?from=infinity#/playlist?id=6925236447" 网易云歌单链接 -->
<!-- autoplay="true"  自动播放-->
<meting-js    
    auto="//music.163.com/#/my/m/music/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": 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>
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>

<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"></script>  
<!-- 看板娘配置 -->