1500字范文 > cute-cnblogs 自定义博客园样式美化二期来啦~

cute-cnblogs 自定义博客园样式美化二期来啦~

时间：2023-03-01 20:27:06

说明
cute-cnblogs 可爱的博客园样式美化、自定义博客园样式二期样式已经编写完毕了，如果说一期样式给人的感觉是简洁清爽的小婴儿的话，那么二期样式就是一个有自己小个性（花样）的小朋友了~
与一期一样，需要文件的可以来 github ，喜欢我写的样式可以帮我点个 star 喔 ღゝ◡╹)ノ♡
（PS：有什么问题也可以留言到 github issues 中喔~）
好了，让我们撸起袖子开始更换二期样式吧~

博客示例

ღゝ◡╹)ノ♡ 麋鹿鲁哟的博客园

介绍

可爱的博客园样式美化、自定义博客园样式 ღゝ◡╹)ノ♡

📖 本样式以简约可爱为核心，美化博客园的显示效果，增加自定义导航；🍧 基于博客园主题“SimpleMemory”进行的样式修改；🍓 阅读目录导航；🌴 支持响应式；

功能

一期功能

🍎 顶部背景点点动效随鼠标而动🍊 导航栏自定义🍒 页面诗意诗句模块🍌 看板娘-猫(ฅ´ω`ฅ) （自行决定是否添加，因为这个有些影响加载速度）🍑 音乐-网易云（自行决定是否添加）🍍~~上吊的猫（PS：回到顶部）~~（已用其余按钮代替此功能）🍉 底部跳动的鱼<・)))><<🍇 点击页面跳动的小豆子~~及可爱的文字~~（自行决定是否添加可爱文字的点击）🍋 评论增加OωO聊天表情🍅 页面不同的导航背景及人物背景

二期增加功能

🍐 侧边栏显示🌱 侧边栏公告栏及个人信息显示📚 阅读目录（标题 h1 > h2 > h3 写了三级目录）☁️ 主题皮肤切换（浅白、暗黑、阅读）🎍 仿主播点赞功能点击推荐❄️ 赞赏模块功能

模版选定

博客皮肤选定：博客园Custom标准模板（与一期不同喔）

使用方法

基本操作

请按照顺序进行操作喔~

首先记得申请JS权限

其次博客皮肤选择Custom

在此需要获取数据（不然点击头像的关注会失败）

找一个没有登陆的浏览器访问自己的博客园，F12弹出窗口，找到 +加关注，复制follow括号里的内容，暂且先存在一个地方

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-69gz1R6B-1592465392494)(/cnblogs_com/miluluyo/1765646/o_17014038info.jpg)]

勾选禁用模板默认CSS

创建一个新随笔（这里使用选项中的TinyMCE(推荐)来编写的） —— “友链”；（注意，此处已与一期不同）点击 “编辑 HTML 源代码” 插入以下代码，修改自己的文本内容后，点击更新；只勾选高级选项中的 “发布”、“允许评论”;

<p style="text-align: center;">欢迎来到我的友链小屋</p><div class="friendsbox"><div id="app"><h6 style="text-align: center; color: #2daebf;">展示本站所有友情站点，排列不分先后，均匀打乱算法随机渲染的喔！</h6><div class="unionbox-box" style="display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1.5rem; margin-top: 1.5rem;"> </div><hr style="position: relative; margin: 1rem 0; border: 1px dashed #9eabb3; width: calc(100%); height: 0;" /><h2 style="text-align: center;">友链信息</h2><h5 style="text-align: left; line-height: 30px;">博客名称：<a href="javascript:void(0)">麋鹿鲁哟</a><br />博客网址：<a href="javascript:void(0)">/miluluyo/</a><br />博客头像：<a href="javascript:void(0)">/avatar/1273193/0806180831.png</a><br />博客介绍：<a href="javascript:void(0)">大道至简，知易行难。</a></h5><h2 style="text-align: center;">join us</h2><h5 style="text-align: center; color: #2daebf;">如需友链，请添加微信（s978761）告知，格式如下</h5><table class="table friendstable" style="margin: 0 auto;"><tbody><tr><th><strong>字段</strong></th><th><strong>字义</strong></th></tr></tbody></table></div></div>

最后分别复制以下区域代码，并根据参数更改数据（PS：路径可进行更改也可不更改，我觉得更改后速度会快一点，自行down文件上传到博客园文件中，并更改引入路径，文件都在 github 中，喜欢记得给我个star喔~）

页面定制CSS代码

复制 https://blog-/files/miluluyo/cute-cnblogs2.css 的文件内容放到页面定制CSS代码区域

博客侧边栏公告

参数说明

页首Html代码

页脚Html代码

参数说明

更换顶部背景图

当前框架使用了一张图片，也可以自己进行更换成随机图片API

在css样式中

#blogTitle{background:url(/cnblogs_com/miluluyo/1764887/o_1406472117.jpg) center center / cover no-repeat #222;overflow:hidden;width:100%;height:40vh;max-height:40vh;box-shadow:0 1px 2px rgba(150,150,150,.7); /*搜索这个更换 background: url() 里的链接即可*/