作者说明
“我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来。生活真是这样,它会一次次地让你去做这个功课直到你学会为止。” —— 《像我这样笨拙地生活》
博客园样式一直是我想改的,之前使用过别人写好的样式模版,加了很多东西,可惜有一天全丢失了,博客园帮忙找回来了一部分,但是不全面,基本相当于废了,于是决定重头再来,自己写一套样式。麋鹿鲁哟的博客园
需要文件的可以来 github ,喜欢我写的样式可以帮我点个 star 喔 ღゝ◡╹)ノ♡
好了,废话不多说,开始~
博客示例
ღゝ◡╹)ノ♡ 脑洞喵的博客园
介绍
可爱的博客园样式美化、自定义博客园样式 ღゝ◡╹)ノ♡
- 本样式以简约可爱为核心,美化博客园的显示效果,增加自定义导航;
- 基于博客园主题“SimpleMemory”进行的样式修改;
- 支持响应式;
功能
- 导航点点动效随鼠标而动
- 导航栏自定义
- 页面诗意诗句模块
- 看板娘-猫(ฅ´ω`ฅ)
- 音乐-网易云
- 上吊的猫(PS:回到顶部)
- 底部跳动的鱼<・)))><<
- 点击页面跳动的小豆子及可爱的文字
- 评论增加OωO聊天表情
- 页面不同的导航背景及人物背景
- github跳转小三角
使用方法
- 首先记得申请JS权限
- 其次博客皮肤选择 SimpleMemor
- 勾选禁用模板默认CSS
- 创建一个新随笔(这里使用选项中的TinyMCE(推荐)来编写的) —— “友链”;
- 点击 “编辑 HTML 源代码” 插入以下代码,点击更新;
- 只勾选 高级选项中的 “发布”、“允许评论”;
<p style="text-align: center;">欢迎来到我的友链小屋</p>
<div class="friendsbox"> </div>
- 最后分别复制以下区域代码,并根据参数更改数据(PS:路径可进行更改也可不更改,自行down文件上传到博客园文件中,并更改引入路径)
建议将https://blog-static.cnblogs.com/files/resource143/cute-cnblogs.css引入内的内容放到 页面定制CSS代码 区域
页首Html代码
<link rel='stylesheet' href='https://blog-static.cnblogs.com/files/resource143/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/resource143/siyuan.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/resource143/monitoring.js"></script>
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/resource143/OwO.min.css" />
<script src="https://blog-static.cnblogs.com/files/resource143/OwO.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/resource143/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/resource143/three.min.js"></script>
<script src='https://blog-static.cnblogs.com/files/resource143/star.js'></script>
<script>
miluframe({
/*个人链接地址*/
Youself:'https://www.cnblogs.com/resource143/',
/*导航栏信息*/
custom:[{
name:'留言板',
link:'https://www.ndmiao.cn/index.php/23.html',
istarget:false
}],
/*自己的友链页面后缀*/
Friends_of_the:'p/12643947.html',
/*自己的友链信息*/
resume:{
"name":"脑洞喵",
"link":"https://www.cnblogs.com/resource143/",
"headurl":"https://www.ndmiao.cn/usr/uploads/logo-icon.png",
"introduction":"记录学习,分享生活~"
},
/*友链信息*/
unionbox:[{
"name":"脑洞喵",
"introduction":"记录学习,分享生活~",
"url":"https://www.ndmiao.cn",
"headurl":"https://www.ndmiao.cn/usr/uploads/logo-icon.png"
},{
"name":"脑洞喵导航",
"introduction":"全网优质网站都在这里~",
"url":"https://www.ndmiao.cn/dh/cn/index.html",
"headurl":"https://www.ndmiao.cn/usr/uploads/logo-icon.png"
}],
/*点击页面时候的弹出文本显示*/
clicktext:new Array("加油哟~ ","生活是没有标准答案的~","老是低着头,幸福可是会离你而去的哦~"),
/*github链接*/
githuburl:'https://github.com/ndmiao'
})
</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链接 |
转载自
3 comments
你这个 你不是这个主题的原作者吧
不是呀,文末标注了转载呀
不错