cute-cnblogs
说明
“我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来。生活真是这样,它会一次次地让你去做这个功课直到你学会为止。” —— 《像我这样笨拙地生活》
博客园样式一直是我想改的,之前使用过别人写好的样式模版,加了很多东西,可惜有一天全丢失了,博客园帮忙找回来了一部分,但是不全面,基本相当于废了,于是决定重头再来,自己写一套样式。麋鹿鲁哟的博客园
需要文件的可以来 github ,喜欢我写的样式可以帮我点个 star 喔 ღゝ◡╹)ノ♡
好了,废话不多说,开始~
博客示例
介绍
可爱的博客园样式美化、自定义博客园样式 ღゝ◡╹)ノ♡
:book: 本样式以简约可爱为核心,美化博客园的显示效果,增加自定义导航;
:shaved_ice: 基于博客园主题“SimpleMemory”进行的样式修改;
:strawberry: 支持响应式;
功能
:apple: 导航点点动效随鼠标而动
:tangerine: 导航栏自定义
:cherries: 页面诗意诗句模块
:banana: 看板娘-猫(ฅ´ω`ฅ)
:peach: 音乐-网易云
:pineapple: 上吊的猫(PS:回到顶部)
:watermelon: 底部跳动的鱼<<
:grapes: 点击页面跳动的小豆子及可爱的文字
:lemon: 评论增加OωO聊天表情
:tomato: 页面不同的导航背景及人物背景
:pear: github跳转小三角
使用方法
首先记得申请JS权限
其次博客皮肤选择 SimpleMemor
勾选禁用模板默认CSS
创建一个新随笔(这里使用选项中的TinyMCE(推荐)来编写的) —— “友链”;
点击 “编辑 HTML 源代码” 插入以下代码,点击更新;
只勾选 高级选项中的 “发布”、“允许评论”;
欢迎来到我的友链小屋
最后分别复制以下区域代码,并根据参数更改数据(PS:路径可进行更改也可不更改,自行down文件上传到博客园文件中,并更改引入路径)
页首Html代码
miluframe({
/*个人链接地址*/
Youself:'/miluluyo/',
/*导航栏信息*/
custom:[{
name:'留言板',
link:'/miluluyo/p/11578505.html',
istarget:false
},{
name:'技能树',
link:'https://miluluyo.github.io/',
istarget:true
}],
/*自己的友链页面后缀*/
Friends_of_the:'p/11633791.html',
/*自己的友链信息*/
resume:{
"name":"麋鹿鲁哟",
"link":"/miluluyo",
"headurl":"/cnblogs_com/elkyo/1558759/o_o_my.jpg",
"introduction":"大道至简,知易行难。"
},
/*友链信息*/
unionbox:[{
"name":"麋鹿鲁哟",
"introduction":"生活是没有标准答案的。",
"url":"/miluluyo",
"headurl":"/cnblogs_com/elkyo/1558759/o_o_my.jpg"
},{
"name":"麋鹿鲁哟的技能树",
"introduction":"大道至简,知易行难。",
"url":"https://miluluyo.github.io/",
"headurl":"/cnblogs_com/elkyo/1558759/o_o_my.jpg"
}],
/*点击页面时候的弹出文本显示*/
clicktext:new Array("ヾ(◍°∇°◍)ノ゙加油哟~ ——麋鹿鲁哟","生活是没有标准答案的。 ——麋鹿鲁哟"),
/*github链接*/
githuburl:'/miluluyo'
})
页脚Html代码
@media only screen and (max-width: 767px){
#sidebar_search_box input[type=text]{width:calc(100% - 24px)}
}
L2Dwidget.init({
"model": {
jsonPath: "/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;")
}
参数说明
最后
为了响应大家的号召,方便大家技术交流,现在建立了一个微信群,如果大家有需要可以扫码(或者搜我微信号:s978761)加我好友,我邀请你加入~本群是一个纯交流学习工作的群,不准发布广告、营销相关的信息!对了,加我记得备注上:博客园+名称 喔~
原文出处:/miluluyo/p/11677303.html