可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs
说明
“我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来。生活真是这样,它会一次次地让你去做这个功课直到你学会为止。” —— 《像我这样笨拙地生活》
博客园样式一直是我想改的,之前使用过别人写好的样式模版,加了很多东西,可惜有一天全丢失了,博客园帮忙找回来了一部分,但是不全面,基本相当于废了,于是决定重头再来,自己写一套样式。麋鹿鲁哟的博客园
需要文件的可以来 github ,喜欢我写的样式可以帮我点个 star 喔 ღゝ◡╹)ノ♡
好了,废话不多说,开始~
博客示例
ღゝ◡╹)ノ♡ 麋鹿鲁哟的博客园
介绍
可爱的博客园样式美化、自定义博客园样式 ღゝ◡╹)ノ♡
- ? 本样式以简约可爱为核心,美化博客园的显示效果,增加自定义导航;
- ? 基于博客园主题“SimpleMemor”进行的样式修改;
- ? 支持响应式;
功能
- ? 导航点点动效随鼠标而动
- ? 导航栏自定义
- ? 页面诗意诗句模块
- ? 看板娘-猫(ฅ´ω`ฅ)
- ? 音乐-网易云
- ? 上吊的猫(PS:回到顶部)
- ? 底部跳动的鱼<・)))><<
- ? 点击页面跳动的小豆子及可爱的文字
- ? 评论增加OωO聊天表情
- ? 页面不同的导航背景及人物背景
- ? github跳转小三角
## 使用方法
- 首先记得申请JS权限
- 其次博客皮肤选择 SimpleMemor
- 勾选禁用模板默认CSS
- 创建一个新随笔(这里使用选项中的TinyMCE(推荐)来编写的) —— “友链”;
- 点击 “编辑 HTML 源代码” 插入以下代码,点击更新;
- 只勾选 高级选项中的 “发布”、“允许评论”;
<p style="text-align: center;">欢迎来到我的友链小屋</p>
<div class="friendsbox"> </div>
- 最后分别复制以下区域代码,并根据参数更改数据(PS:路径可进行更改也可不更改,自行down文件上传到博客园文件中,并更改引入路径)
页首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链接 |
可爱的博客园样式美化、自定义博客园主题样式相关推荐
- html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这 难点在于: 1.这里的图例文 ...
- plantuml样式_自定义PlantUML和C4 Model样式
什么是PlantUml PlantUml是一个支持快速绘制的开源项目.其定义了一套完整的语言用于实现UML关系图的描述.并基于强大的graphviz图形渲染库进行UML图的生成.绘制的UML图还可以导 ...
- plantuml样式_自定义PlantUML和C4Model的样式
什么是PlantUml PlantUml是一个支持快速绘制的开源项目.其定义了一套完整的语言用于实现UML关系图的描述.并基于强大的graphviz图形渲染库进行UML图的生成.绘制的UML图还可以导 ...
- vue 一键换肤(切换主题样式)
目录 方法一:动态修改全局CSS变量 方法二:切换主题CSS文件 方法三:切换顶级CSS类名 方法一:动态修改全局CSS变量 1. 在全局css文件或 app.vue中定义全局CSS变量 <st ...
- 博客园 页首html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
- 博客园页面定制html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
- 自定义css样式美化博客园
写在前面 csdn的markdown放到博客园里感觉风格迥异,所以还是找个好点的css吧,css这个我没有深入了解,拼凑了一个css.对于有python代码,而且需要自动生成目录的博文很有帮助,其他的 ...
- html%3c arial%3e,【博客园】样式美化+网站统计访问+添加网易云背景音乐
该样式对应的皮肤:SimpleMemory,请记得更换. 还有目录生成代码默认是生成h2,h3的,需结合自己的需要替换为h1,h2的. 我参考别人的教程,对博客园样式做了修改.后来忽然被原创发消息:说 ...
- 博客园自定义主题样式
题记 对于有强迫症的童鞋来说,一个长得不美观或者不能满足我们日常的审美需求的页面,总会有想要改造它的冲动,好吧,让我们来调试下博客园提供的默认主题样式,让页面更加清爽宜人,简洁大气. Section ...
最新文章
- 查看Mat对象的数据的三种方法
- Linux+DDoS deflate 预防DDoS
- 安装错误 服务尚未启动_原创 | 西门子300软件安装出错处理大全
- python实现监控电脑打开网页_Python轻松实现动态网页爬虫(附详细源码)
- [TJOI2011] 卡片(网络流 + 质因子优化建图)
- python封装一个函数并调用_python - 函数的封装与调用
- MyBatis系列之浅谈SQL执行流程分析
- Spring Bean懒加载与非懒加载
- 优秀的 Spring Boot 语言开源项目
- 关于国债的一些计算: 理论TF价格1(缴款日前无付息)
- idea新建springboot项目
- 当当笔试java_20170921 当当和今日头条笔试题
- Java实现顺序表的创建及基本操作(增删改查)
- linux上传oracle压缩包,Linux中从oracle官网下载jdk文件不是标准的gzip格式文件问题...
- Python 3.6 使用wordcloud制作词云(可设背景图像)
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
- 川土微 数字隔离器 CA-IS3722HS可替代ADUM1201ARZ
- C# 调用微软自带的语音识别
- 计算机毕业设计之 医院管理系统
- win10如何检测计算机性能,win10系统该怎样查看系统性能?