开始使用博客园，是两年多前的事了，不过最近才开始认真研究起来..
关于其过于朴素的初始界面，很早之前我就想要美化一下了，但是发现技术不行，虽然目前任然不行，不过起码可以借助大佬的手，哈哈哈~
弄了好几天了，可能是我比较菜吧，不过大佬很强，话不多说，正文开始：
~前戏
了解了一下云图床，弄了一个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/[email protected]/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="/i/i/?n=18&i="> <link rel="dns-prefetch" href="https://v2.jinrishici.com/"><!--今日诗词--> <!-- jsdelivr加载资源 --> <link rel="preload" href="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/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> <!--自己写的;按钮收缩;-->
~页脚HTML代码
原样将文件复制到页脚即可
标签：02,布置,博客园,galleries,jpg,2254747,https,com,cnblogs From： https://www.cnblogs.com/vegechick/p/16990861.html