• 欢迎来到主题派官网,主题源码,插件,模板下载。所有主题及插件资源不负责技术支持,售出不退!
酷奇酷奇  2023-04-28 11:10 主题派 隐藏边栏 |   抢沙发  6 
文章评分 0 次,平均分 0.0

cute-cnblogs

cute-cnblogs

说明

“我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来。生活真是这样,它会一次次地让你去做这个功课直到你学会为止。” —— 《像我这样笨拙地生活》

博客园样式一直是我想改的,之前使用过别人写好的样式模版,加了很多东西,可惜有一天全丢失了,博客园帮忙找回来了一部分,但是不全面,基本相当于废了,于是决定重头再来,自己写一套样式。麋鹿鲁哟的博客园

需要文件的可以来 github ,喜欢我写的样式可以帮我点个 star 喔 ღゝ◡╹)ノ♡

好了,废话不多说,开始~

博客示例

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

介绍

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

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

Image text

功能

  • ? 导航点点动效随鼠标而动
  • ? 导航栏自定义
  • ? 页面诗意诗句模块
  • ? 看板娘-猫(ฅ´ω`ฅ)
  • ? 音乐-网易云
  • ? 上吊的猫(PS:回到顶部)
  • ? 底部跳动的鱼<・)))><<
  • ? 点击页面跳动的小豆子及可爱的文字
  • ? 评论增加 OωO 聊天表情
  • ? 页面不同的导航背景及人物背景
  • ? github 跳转小三角

使用方法

  • 首先记得申请 JS 权限
  • 其次博客皮肤选择 SimpleMemor
  • 勾选禁用模板默认 CSS

  • 创建一个新随笔(这里使用选项中的 TinyMCE(推荐)来编写的) —— “友链”;
  • 点击 “编辑 HTML 源代码” 插入以下代码,点击更新;
  • 只勾选 高级选项中的 “发布”、“允许评论”;
<p style="text-align: center;">欢迎来到我的友链小屋</p> <div class="friendsbox">&nbsp;</div> 

  • 最后分别复制以下区域代码,并根据参数更改数据(PS:路径可进行更改也可不更改,自行 down 文件上传到博客园文件中,并更改引入路径)

(PS:建议将 https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.css 引入内的内容放到 页面定制 CSS 代码 区域)

页首 Html 代码

 <link rel='stylesheet' href='https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.css'> <link rel='stylesheet' href='https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css'> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/siyuan.css" /> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/monitoring.js"></script> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/OwO.min.css" /> <script src="https://blog-static.cnblogs.com/files/elkyo/OwO.min.js"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.js"></script> <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/three.min.js"></script> <script src='https://blog-static.cnblogs.com/files/elkyo/star.js'></script> <script> miluframe({ /*个人链接地址*/ Youself:'https://www.cnblogs.com/miluluyo/', /*导航栏信息*/ custom:[{ name:'留言板', link:'https://www.cnblogs.com/miluluyo/p/11578505.html', istarget:false },{ name:'技能树', link:'https://miluluyo.github.io/', istarget:true }], /*自己的友链页面后缀*/ Friends_of_the:'p/11633791.html', /*自己的友链信息*/ resume:{ "name":"麋鹿鲁哟", "link":"https://www.cnblogs.com/miluluyo", "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg", "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" }], /*点击页面时候的弹出文本显示*/ clicktext:new Array("ヾ(◍°∇°◍)ノ゙加油哟~ ——麋鹿鲁哟","生活是没有标准答案的。 ——麋鹿鲁哟"), /*github 链接*/ githuburl:'https://github.com/miluluyo' }) </script> 

页脚 Html 代码

 <!-- 底部加了小鱼<・)))><<~ --> <div id="jsi-flying-fish-container" class="container"></div> <script src='https://blog-static.cnblogs.com/files/elkyo/fish.js'></script> <style> @media only screen and (max-width: 767px){ #sidebar_search_box input[type=text]{width:calc(100% - 24px)} } </style> <!--音乐--> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css"> <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div> <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script> <!--看板娘 - 猫--> <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({ "model": { jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",<!--这里改模型,前面后面都要改--> "scale": 1 }, "display": { "position": "left",<!--设置看板娘的上下左右位置--> "width": 100, "height": 200, "hOffset": 70, "vOffset": 0 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7,<!--设置透明度--> "opacityOnHover": 0.2 } }); window.onload = function(){ $("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;") } </script> <!--点击冒点--> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas><script src="https://blog-static.cnblogs.com/files/elkyo/mouse-click.js"></script> 

参数说明

若字符串为空则不显示友链

名称 类型 默认值/实例 描述
Youself 字符串 https://www.cnblogs.com/miluluyo/ 个人博客园首链接
custom 数组 [{
name:'相册',
link:'https://www.cnblogs.com/elkyo/gallery.html',
istarget:false
},{
name:'技能树',
link:'https://miluluyo.github.io/',
istarget:true
},{
name:'留言板',
link:'https://miluluyo.github.io/p/11578505.html',
istarget:false
}]
导航信息
name 导航名
link 导航链接
istarget true 跳转到新页面上,false 当前页面打开
Friends_of_the 字符串 11633791 友链文章的后缀名,
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 新数组 new Array("ヾ(◍°∇°◍)ノ゙加油哟~ ——麋鹿鲁哟",
"生活是没有标准答案的。 ——麋鹿鲁哟"),
点击页面时候的弹出显示
githuburl 字符串 https://github.com/miluluyo github 链接

最后

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

公众号:麋鹿鲁哟

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

酷奇给酷奇打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付
可爱的博客园样式美化、自定义博客园主题样式 为主题派网版权所有,转载请注明出处,所有资源不提供技术支持。
酷奇
酷奇 关注:0    粉丝:0 最后编辑于:2023-05-20
这个人很懒,什么都没写

发表评论

表情 格式 链接 私密 签到 常用语
扫一扫二维码分享
×
艾瑞克网