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:'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'

})

页脚Html代码

@media only screen and (max-width: 767px){

#sidebar_search_box input[type=text]{width:calc(100% - 24px)}

}

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;")

}

参数说明

名称 类型 默认值/实例 描述
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链接

最后

为了响应大家的号召,方便大家技术交流,现在建立了一个微信群,如果大家有需要可以扫码(或者搜我微信号:s978761)加我好友,我邀请你加入~本群是一个纯交流学习工作的群,不准发布广告、营销相关的信息!对了,加我记得备注上:博客园+名称 喔~

原文出处:https://www.cnblogs.com/miluluyo/p/11677303.html

博客园 页首html代码,可爱的博客园样式美化、自定义博客园主题样式相关推荐

  1. 博客园页面定制html代码,可爱的博客园样式美化、自定义博客园主题样式

    cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...

  2. 博客园页面定制html代码,你要的博客园主题都有!!!

    基于最近很多小伙伴加我微信想要我的博客园主题,那我就把博客园主题整理一下,送给喜欢的小伙伴,园友们喜欢可以收藏,关注,博客园主题仅供参考,博主顺便再多说一句,虽然我可以分享给你们,但是我更愿意你们加我 ...

  3. 可爱的博客园样式美化、自定义博客园主题样式

    cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...

  4. 博客园页面定制html代码,博客园主题分享

    博客园主题 分享 选择Custom主题 页面定制CSS代码 /*评论框祖传猫猫*/ .comment_textarea{ background:#f5f5f5 url(https://files-cd ...

  5. 个人博客园CSS样式美化

    博客侧边栏公告 <!--公告栏时钟控件--> <embedwmode="transparent"src="https://files.cnblogs.c ...

  6. 博客园自定义主题样式

    题记 对于有强迫症的童鞋来说,一个长得不美观或者不能满足我们日常的审美需求的页面,总会有想要改造它的冲动,好吧,让我们来调试下博客园提供的默认主题样式,让页面更加清爽宜人,简洁大气. Section ...

  7. 自定义博客园皮肤:暗色流体响应式布局

    博客园的皮肤模板虽然有100多套,但我需要的作品却没几套,从布局上看,大多是固定布局,有的使用表格布局,有的将侧边栏在HTML页面的代码顺序放在主内容的前面.这些布局方式不利于页面缩放和不同屏幕尺寸与 ...

  8. 博客系统后端设计(三) - 实现获取博客列表页功能

    文章目录 实现获取博客列表页功能 1. 约定前后端交互接口 2. 实现后端代码 3. 实现前端代码 4. 测试代码 5. 涉及到的两个 Bug 博客系统的后端设计: 1.准备工作与设计数据库 2.数据 ...

  9. 【转】博客美化(1)基本后台设置与样式设置

    阅读目录 1.博客园后台设置 2.自定义样式的设置 博客园美化相关文章目录:博客园博客美化相关文章目录 一直都拜膜那些博客园的皮肤设计高手,由于本人对前端研究甚少,所以js,css这种东西只能看得懂最 ...

最新文章

  1. Python脱产8期 Day02
  2. SylixOS内核打印调试方法
  3. 谈谈自己对java的学习看法
  4. 2020 最新 JVM 生态报告
  5. php基本操作-echo
  6. 静止的单摄像机无法得到像点的三维坐标详解
  7. 重新认识Docker Compose之Sidecar模式
  8. 手机有一个时钟的标志_STM32F7系统配置控制器(SYSCFG)及复位和时钟控制(RCC)...
  9. 一个函数统一238个机器学习R包,这也太赞了吧
  10. jaxb java xml序列化_XML编程总结(六)——使用JAXB进行java对象和xml格式之间的相互转换...
  11. SecureCRT连接Linux显示Mysql记录中文乱码
  12. 亿级APP支付宝在移动端的高可用技术实践
  13. 并行计算圆周率 c语言,并行计算:圆周率计算
  14. 界面控件DotNetBar for WinForms使用教程:LayoutControl详解(二)
  15. xampp的安装及使用
  16. switch在pc上动态调试(系统:12.0.1|AMS0.19.1|E)
  17. python能否取代excel_行,Python玩大了!​取代Excel,程序员:太牛!你怎么看?...
  18. 论文推荐-计算机视觉
  19. php微信小程序如何无限点赞,小程序点赞收藏功能
  20. 【arduino从入门到放肆】⑥Arduino 小台灯

热门文章

  1. 云队友丨如何成为解决问题的高手?
  2. Android 天气APP(十)继续优化、下拉刷新页面天气数据
  3. JDK 19 / Java 19 正式GA
  4. git clone 出现fatal: unable to access ‘https://github.com/xxx: Failed to connect to github.com
  5. Gym - 102460L Largest Quadrilateral(几何-凸包+旋转卡壳求最大的四边形面积)
  6. 关于IP代理的相关基础知识
  7. 计算机应用自荐信,计算机应用毕业生自荐信
  8. A网站引用B服务器虚拟目录文件导致:网站部署到IIS7上出现HTTP 错误 500.19(由于权限不足而无法读取配置文件)的问题
  9. IOS企业版app部署到自己服务器,不通过AppStore,在iOS设备上直接安装应用程序
  10. Redis_15_Redis线程模型与事件