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

说明

cute-cnblogs 可爱的博客园样式美化、自定义博客园样式 二期样式已经编写完毕了，如果说 一期样式 给人的感觉是简洁清爽的小婴儿的话，那么 二期样式 就是一个有自己小个性（花样）的小朋友了~

与一期一样，需要文件的可以来 github ，喜欢我写的样式可以帮我点个 star 喔 ?ゝ??)ノ?

（PS：有什么问题也可以留言到 github issues 中喔~）

好了，让我们撸起袖子开始更换二期样式吧~

博客示例

?ゝ??)ノ? 麋鹿鲁哟的博客园

介绍

可爱的博客园样式美化、自定义博客园样式 ?ゝ??)ノ?

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

功能

一期功能

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

二期增加功能

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

模版选定

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

使用方法

基本操作

请按照顺序进行操作喔~

• 首先记得申请JS权限

• 其次博客皮肤选择 Custom

• 在此需要获取数据（不然点击头像的关注会失败）
  找一个没有登陆的浏览器访问自己的博客园，F12弹出窗口，找到 +加关注，复制follow括号里的内容，暂且先存在一个地方
  

• 勾选禁用模板默认CSS

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

欢迎来到我的友链小屋


展示本站所有友情站点，排列不分先后，均匀打乱算法随机渲染的喔！
 

友链信息
博客名称：麋鹿鲁哟
博客网址：https://www.cnblogs.com/miluluyo/
博客头像：https://pic.cnblogs.com/avatar/1273193/20190806180831.png
博客介绍：大道至简，知易行难。
join us
如需友链，请添加微信（d978761）告知，格式如下


字段
字义

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

页面定制CSS代码

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

博客侧边栏公告

参数说明

页首Html代码

页脚Html代码

参数说明

名称	类型	默认值/实例	描述
Youself	字符串	https://www.cnblogs.com/miluluyo/	个人博客园首链接
custom	数组	[{ name:'首页', link:'https://www.cnblogs.com/miluluyo/', istarget:false },{ name:'联系', link:'https://msg.cnblogs.com/send/%E9%BA%8B%E9%B9%BF%E9%B2%81%E5%93%9F', istarget:true },{ name:'技能树', link:'https://miluluyo.github.io/', istarget:true },{ name:'留言板', link:'https://www.cnblogs.com/miluluyo/p/11578505.html', istarget:false },{ name:'相册', link:'https://www.cnblogs.com/miluluyo/gallery.html', istarget:false },{ name:'友链', link:'https://www.cnblogs.com/miluluyo/p/11633791.html', istarget:false },{ name:'维护', link:'https://www.cnblogs.com/miluluyo/p/12092009.html', istarget:false },{ name:'投喂', link:'https://www.cnblogs.com/miluluyo/p/gratuity.html', istarget:false },{ name:'管理', link:'https://i.cnblogs.com/', istarget:true }]	导航信息 name 导航名 link 导航链接 istarget true跳转到新页面上，false当前页面打开
resume	对象	{ "name":"麋鹿鲁哟", "link":"https://www.cnblogs.com/miluluyo/", "headurl":"https://images.cnblogs.com/cnblogs_com/ elkyo/1558759/o_o_my.jpg", "introduction":"大道至简，知易行难。" }	自己的友链信息 name 导航名 link 导航链接 headurl 头像 introduction 语录
unionbox	数组	[{ "name":"麋鹿鲁哟", "introduction":"生活是没有标准答案的。", "url":"https://www.cnblogs.com/miluluyo", "headurl":"https://images.cnblogs.com/cnblogs_com/ elkyo/1558759/o_o_my.jpg" },{ "name":"麋鹿鲁哟的技能树", "introduction":"大道至简，知易行难。", "url":"https://miluluyo.github.io/", "headurl":"https://images.cnblogs.com/cnblogs_com/ elkyo/1558759/o_o_my.jpg" }]	友链数组 name 昵称 introduction 标语 url 链接地址 headurl 头像地址
clicktext	数组	[{ field: 'name', literal: '昵称', },{ field: 'introduction', literal: '标语', },{ field: 'url', literal: '链接地址', },{ field: 'headurl', literal: '头像地址', }]	友链表格头信息，这项可以忽略掉
logoimg	字符串	'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519070633f12.png'	浏览器顶部小图标
cuteicon	数组	['icon-caomei','icon-boluo','icon-huolongguo','icon-chengzi','icon-hamigua','icon-lizhi','icon-mangguo','icon-liulian','icon-lizi','icon-lanmei','icon-longyan','icon-shanzhu','icon-pingguo','icon-mihoutao','icon-niuyouguo','icon-xigua','icon-putao','icon-xiangjiao','icon-ningmeng','icon-yingtao','icon-taozi','icon-shiliu','icon-ximei','icon-shizi']	文章页面标题前的图标，此处图标我只放入了一些水果的icon，不过可以自己引入文件进行修改名字添加自己想加的，本框架有扩展的icon，文件在 github 中的 icon 文件夹内，可以下载去查看
gratuity	字符串	' 要请我喝奶茶吗 (づ??????)づ 微信扫码 支付宝扫码 留下一句你觉得很励志与美的话给我吧~  GO '	赞赏按钮焦点显示赞赏内容，内容可自行更改
isGratuity	布尔值	true	默认true，若true则显示此按钮，false则不显示

更换顶部背景图

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

在css样式中

 #blogTitle{background:url(https://images.cnblogs.com/cnblogs_com/miluluyo/1764887/o_20051406472117.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() 里的链接 即可*/

最后

更多内容请查看
（PS：可以使用番外篇里的随机图片API喔~）

请吃糖

如果您喜欢这里，感觉对你有帮助，并且有多余的软妹币的话，不妨投喂一颗糖喔~

<(?????)> 谢谢老板~

微信扫码

支付宝扫码

赞赏的时候，留下一句你觉得很励志与美的话给我吧~

（也可以加一个博客园给我喔，会添加在名字的旁边喔~点击可以跳转~ 例如：

为了响应大家的号召，方便大家技术交流，之前建立了一个微信群，如果大家有需要可以关注公众号，发送“加群”即可～本群是一个纯交流学习工作的群，不准发布广告、营销相关的信息！

公众号：麋鹿鲁哟

看完了点个推荐呗 ?ゝ??)ノ?

更新

2020.12.11

博客园更新后顶部出现的条目以及顶部广告，用下方代码可以隐藏

div#top_nav { display:none } 
div#bannerbar {display: none;}

2021.03.10

博客园移动端页面上划时偶尔抖动问题已修复

https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.js 链接更改为 https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs3.js

音乐自动播放