博客园页面定制html代码,可爱的博客园样式美化、自定义博客园主题样式
博客园页⾯定制html代码,可爱的博客园样式美化、⾃定义博客
园主题样式
cute-cnblogs
说明
“我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它⼀定会再来。⽣活真是这样,它会⼀次次地让你去做这个功课直到你学会为⽌。” —— 《像我这样笨拙地⽣活》
博客园样式⼀直是我想改的,之前使⽤过别⼈写好的样式模版,加了很多东西,可惜有⼀天全丢失了,博客园帮忙回来了⼀部分,但是不全⾯,基本相当于废了,于是决定重头再来,⾃⼰写⼀套样式。麋⿅鲁哟的博客园
需要⽂件的可以来 github ,喜欢我写的样式可以帮我点个 star 喔 ღゝ◡╹)ノ♡
好了,废话不多说,开始~
博客⽰例
介绍
可爱的博客园样式美化、⾃定义博客园样式 ღゝ◡╹)ノ♡
本样式以简约可爱为核⼼,美化博客园的显⽰效果,增加⾃定义导航;
基于博客园主题“SimpleMemory”进⾏的样式修改;
⽀持响应式;
功能
导航点点动效随⿏标⽽动
导航栏⾃定义
页⾯诗意诗句模块
看板娘-猫(´ω`)
⾳乐-⽹易云
上吊的猫(PS:回到顶部)
底部跳动的鱼<<
点击页⾯跳动的⼩⾖⼦及可爱的⽂字
评论增加OωO聊天表情
页⾯不同的导航背景及⼈物背景
github跳转⼩三⾓
使⽤⽅法
⾸先记得申请JS权限
其次博客⽪肤选择 SimpleMemor
勾选禁⽤模板默认CSS
创建⼀个新随笔(这⾥使⽤选项中的TinyMCE(推荐)来编写的) —— “友链”;
点击 “编辑 HTML 源代码” 插⼊以下代码,点击更新;
只勾选 ⾼级选项中的 “发布”、“允许评论”;
欢迎来到我的友链⼩屋
最后分别复制以下区域代码,并根据参数更改数据(PS:路径可进⾏更改也可不更改,⾃⾏down⽂件上传到博客园⽂件中,并更改引⼊路径)
页⾸Html代码
miluframe({
/*个⼈链接地址*/
Youself:'wwwblogs/miluluyo/',
/*导航栏信息*/
custom:[{
name:'留⾔板',
link:'wwwblogs/miluluyo/p/11578505.html',
istarget:false
},{
name:'技能树',
link:'miluluyo.github.io/',
istarget:true
}],
/*⾃⼰的友链页⾯后缀*/
Friends_of_the:'p/11633791.html',
/*⾃⼰的友链信息*/
resume:{
"name":"麋⿅鲁哟",
"link":"wwwblogs/miluluyo",
"headurl":"imagesblogs/cnblogs_com/elkyo/1558759/o_o_my.jpg", "introduction":"⼤道⾄简,知易⾏难。"
简单快乐},
/*友链信息*/
unionbox:[{
"name":"麋⿅鲁哟",
"introduction":"⽣活是没有标准答案的。",
"url":"wwwblogs/miluluyo",
"headurl":"imagesblogs/cnblogs_com/elkyo/1558759/o_o_my.jpg"
四姑娘山在哪里},{
"name":"麋⿅鲁哟的技能树",
"introduction":"⼤道⾄简,知易⾏难。",
"url":"miluluyo.github.io/",
"headurl":"imagesblogs/cnblogs_com/elkyo/1558759/o_o_my.jpg"
}],
/
*点击页⾯时候的弹出⽂本显⽰*/
clicktext:new Array("ヾ(◍°∇°◍)  加油哟~ ——麋⿅鲁哟","⽣活是没有标准答案的。 ——麋⿅鲁哟"), /*github链接*/
githuburl:'github/miluluyo'
})
页脚Html代码
@media only screen and (max-width: 767px){
#sidebar_search_box input[type=text]{width:calc(100% - 24px)}
}
L2Dwidget.init({
"model": {
jsonPath: "unpkg/live2d-widget-model-hijiki/del.json",
"scale": 1
},
down virtueway"display": {
"position": "left",
"width": 100,
"height": 200,
"hOffset": 70,
"show": true,
"scale": 0.5
},
"react": {
系统还原是什么意思
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
$("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;") }
参数说明
名称
类型
默认值/实例
网络与新媒体就业方向及前景描述Youself
字符串
个⼈博客园⾸链接
custom
数组
[{
name:'相册',
link:'wwwblogs/elkyo/gallery.html',
istarget:false
},{
name:'技能树',
link:'miluluyo.github.io/',
istarget:true
},{
name:'留⾔板',
link:'miluluyo.github.io/p/11578505.html',
name 导航名
link 导航链接
istarget true跳转到新页⾯上,false当前页⾯打开
Friends_of_the
字符串
11633791
友链⽂章的后缀名,若字符串为空则不显⽰友链
resume
对象
{
"name":"麋⿅鲁哟",
"link":"wwwblogs/miluluyo/", "headurl":"imagesblogs/cnblogs_com/ elkyo/1558759/o_o_my.jpg",
"introduction":"⼤道⾄简,知易⾏难。"
}
⾃⼰的友链信息
name 导航名
link 导航链接
headurl 头像
introduction 语录
unionbox
数组
[{
"name":"麋⿅鲁哟",
"introduction":"⽣活是没有标准答案的。", "url":"wwwblogs/miluluyo", "headurl":"imagesblogs/cnblogs_com/ elkyo/1558759/o_o_my.jpg"
},{
母亲节语录简短"name":"麋⿅鲁哟的技能树",

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。