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

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

点击跳转到我的博客园

主题美化方案

博客园默认或者官方提供的主题还是不太好看，下面说说我的博客园美化流程。整体上使用了大佬【@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,   // 失去焦点延时 500msfocus: '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>
<!-- 看板娘配置 -->

博客园——打造不一样的个人博客相关推荐

[2009.08.09]博客园北京俱乐部活动暨《博客园精华集：Web标准之道》现场签售通知...
<博客园精华集:Web标准之道>发售啦!!! 无论你是博客园的老人,还是初来乍到,这些人你是否或曾耳闻呢:TerryLee.Anytao.Cat Chen.Anders Liu.鸟食轩.L ...
博客园“图灵杯”第3届博问大赛比赛结果
经过近一个月的激烈角逐,博客园"图灵杯"第三届博问大赛已圆满结束.获奖园友分别是: 一等奖:邀月(奖励图灵图书4本) 二等奖:Kinglee.邢少(奖励图灵图书2本) 三等奖:Gr ...
博客园样式管理总结（个人博客园装修指南）
一.如何自定义博客园的各级标题样式参考博客:https://www.cnblogs.com/maxiaodoubao/p/9854705.html 1.申请博客园JS修改权限按照博客园系统提示申请 ...
Windows Live Writer离线博客工具使用教程(适用于博客园、CSDN、51CTO等等博客)
文章背景写博客不单是一种记录方式,更是一种工作习惯,与朋友一起分享是一件很快乐的事情,以前写博客,我们都会面临博客自带编辑器上各种头疼问题,比如排版.样式.功能局限性等等.但这些阻止不了我写下去的决 ...
博客园----你真的没有没落.感恩博客园。。。
前言拒绝谩骂!~~~~~~欢迎拍砖.!!!我不是博客园的托哦!~我只是一个普普通通的诶提(IT)人而已!~~好吧! 我打从心底的感恩博客园. 大家都知道,这些有一篇帖子引起了大家的关注<即将没 ...
php是什么博客园,PHP 架构之路 - Richards - 博客园
PHP 架构之路 - Richards - 博客园 PHP 架构之路鉴于最近跟小伙伴聊了很多 PHP 架构发展方向的问题, 相关技术整理了一下, 也顺便规划了一下自己的 2019 年. 一. 常用的 ...
博客园定制页面（一）——博客园设置相关参考
一.博客设置相关 1.1.博客园主页设置参考其他大佬的博客设置: 博客园博客美化相关文章目录(非本人整理) 博客园主页CSS元素名汇总(非本人整理) 1.2.Windows Live Writer客 ...
博客园登录页面html,打造自己的博客园页面
刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作.今天不太忙,稍微研究了下博客园的页面定制功能,记录如下. 首先,园子里大都是技 ...
详谈如何定制自己的博客园皮肤
前言最近,有很多博客园的朋友给我留言或私信,询问我的博客背景是如何做的. 不是我敝帚自珍,而是由于内容较多,一一回复实在是太费劲.没有及时答复的朋友,请见谅. 我在这里做一次集中式分享,如果有喜欢的 ...