博客园定制皮肤
另一个皮肤：https://www.yuque.com/awescnb/user/wl1kau
页面定制 css 代码
.day {width: auto;}
html {font-size:62.5%;}
body {font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
#main{max-width: 1090px;width:100%;}
#mainContent {width:76%;}
#mainContent .forFlow {width:100%;}
#topics {width:100%;}
.postBody {width:100%;}
#sideBar {width:20%;}}
#mainContent .day {width: 100%;}
#mainContent .dayTitle {width:100%;}
#mainContent .postTitle {width:100%;}
#mainContent .postCon {width:100%;}
#mainContent .postDesc {width:100%;}
@media (max-width: 767px) {
#nav_next_page a{float: left;margin-top: 10px;}
.topicListFooter .pager{text-align:left !important;}
#homepage_top_pager{padding:0 5px 10px !important;}
#homepage_bottom_pager{padding:0 5px 10px !important;height:30px !important;}
.topicListFooter{height:0;padding:0px 20px 31px 20px !important;}
#mainContent .postDesc{padding:0 5px 8px !important;}
}
旧版看板娘
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
if($(document).width() >= 767) {
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-z16/assets/z16.model.json",<!--这里改模型，前面后面都要改-->
"scale": 1
},
"display": {
"position": "right",<!--设置看板娘的上下左右位置-->
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 1,<!--设置透明度-->
"opacityOnHover": 0.2
}
});
}
</script>
新版看板娘
<link rel="stylesheet" type="text/css" href="//live2d-cdn.fghrsh.net/assets/1.4.2/waifu.min.css" />
<div class="waifu" style="background: transparent"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool" style="background: transparent"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>
<script type="text/javascript">
if($(document).width() >= 767 && location.href.endsWith("/lemos/")) {
$.ajax({
url: "//live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.min.js",
dataType: "script",
cache: true,
success: function () {
$.ajax({
url: "//live2d-cdn.fghrsh.net/assets/1.4.2/live2d.min.js",
dataType: "script",
cache: true,
success: function () {
/* 可直接修改部分参数 */
live2d_settings['hitokotoAPI'] = 'jinrishici.com'; // 一言 API
live2d_settings['modelId'] = 2; // 默认模型 ID
live2d_settings['modelTexturesId'] = 6; // 默认材质 ID
//live2d_settings['modelStorage'] = false; // 不储存模型 ID
live2d_settings['canTurnToHomePage'] = false; // 隐藏 返回首页 按钮
// live2d_settings['canCloseLive2d'] = false; // 隐藏 关闭看板娘 按钮
// live2d_settings['waifuSize'] = '600x535'; // 看板娘大小
// live2d_settings['waifuTipsSize'] = '570x150'; // 提示框大小
// live2d_settings['waifuFontSize'] = '30px'; // 提示框字体
live2d_settings['waifuEdgeSide'] = 'right:30'; // 看板娘贴边方向
// live2d_settings['waifuToolFont'] = '36px'; // 工具栏字体
// live2d_settings['waifuToolLine'] = '50px'; // 工具栏行高
// live2d_settings['waifuToolTop'] = '-60px'; // 工具栏顶部边距
live2d_settings['waifuDraggable'] = 'axis-x'; // 拖拽样式
initModel({
"waifu": {
"console_open_msg": ["哈哈，你打开了控制台，是想要看看我的秘密吗？"],
"copy_message": ["你都复制了些什么呀，转载要记得加上出处哦"],
"screenshot_message": ["照好了嘛，是不是很可爱呢？"],
"hidden_message": ["我们还能再见面的吧…"],
"load_rand_textures": ["我还没有其他衣服呢", "我的新衣服好看嘛"],
"hour_tips": {
"t5-7": ["早上好！一日之计在于晨，美好的一天就要开始了"],
"t7-11": ["上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"],
"t11-14": ["中午了，工作了一个上午，现在是午餐时间！"],
"t14-17": ["午后很容易犯困呢，今天的运动目标完成了吗？"],
"t17-19": ["傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~"],
"t19-21": ["晚上好，今天过得怎么样？"],
"t21-23": ["已经这么晚了呀，早点休息吧，晚安~"],
"t23-5": ["你是夜猫子呀？这么晚还不睡觉，明天起的来嘛"],
"default": ["嗨~ 快来逗我玩吧！"]
},
"referrer_message": {
"localhost": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
"baidu": ["Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗？"],
"so": ["Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗？"],
"google": ["Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
"default": ["Hello! 来自 <span style=\"color:#0099cc;\">", "</span> 的朋友"],
"none": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "]
},
"referrer_hostname": {
"example.com": ["示例网站"],
"www.fghrsh.net": ["FGHRSH 的博客"]
},
"model_message": {
"1": ["来自 Potion Maker 的 Pio 酱 ~"],
"2": ["来自 Potion Maker 的 Tia 酱 ~"]
},
"hitokoto_api_message": {
"lwl12.com": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>", "，是 <span style=\"color:#0099cc;\">{creator}</span> 投稿的", "。"],
"fghrsh.net": ["这句一言出处是 <span style=\"color:#0099cc;\">『{source}』</span>，是 <span style=\"color:#0099cc;\">FGHRSH</span> 在 {date} 收藏的！"],
"jinrishici.com": ["这句诗词出自 <span style=\"color:#0099cc;\">《{title}》</span>，是 {dynasty}诗人 {author} 创作的！"],
"hitokoto.cn": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>，是 <span style=\"color:#0099cc;\">{creator}</span> 在 hitokoto.cn 投稿的。"]
}
},
"mouseover": [
{ "selector": ".container a[href^='http']", "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么？"] },
{ "selector": ".fui-home", "text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦"] },
{ "selector": ".fui-chat", "text": ["一言一语，一颦一笑。一字一句，一颗赛艇。"] },
{ "selector": ".fui-eye", "text": ["嗯··· 要切换 看板娘 吗？"] },
{ "selector": ".fui-user", "text": ["喜欢换装 Play 吗？"] },
{ "selector": ".fui-photo", "text": ["要拍张纪念照片吗？"] },
{ "selector": ".fui-info-circle", "text": ["这里有关于我的信息呢"] },
{ "selector": ".fui-cross", "text": ["你不喜欢我了吗..."] },
{ "selector": "#tor_show", "text": ["翻页比较麻烦吗，点击可以显示这篇文章的目录呢"] },
{ "selector": "#comment_go", "text": ["想要去评论些什么吗？"] },
{ "selector": "#night_mode", "text": ["深夜时要爱护眼睛呀"] },
{ "selector": "#qrcode", "text": ["手机扫一下就能继续看，很方便呢"] },
{ "selector": ".comment_reply", "text": ["要吐槽些什么呢"] },
{ "selector": "#back-to-top", "text": ["回到开始的地方吧"] },
{ "selector": "#author", "text": ["该怎么称呼你呢"] },
{ "selector": "#mail", "text": ["留下你的邮箱，不然就是无头像人士了"] },
{ "selector": "#url", "text": ["你的家在哪里呢，好让我去参观参观"] },
{ "selector": "#textarea", "text": ["认真填写哦，垃圾评论是禁止事项"] },
{ "selector": ".OwO-logo", "text": ["要插入一个表情吗"] },
{ "selector": "#csubmit", "text": ["要[提交]^(Commit)了吗，首次评论需要审核，请耐心等待~"] },
{ "selector": ".ImageBox", "text": ["点击图片可以放大呢"] },
{ "selector": "input[name=s]", "text": ["找不到想看的内容？搜索看看吧"] },
{ "selector": ".previous", "text": ["去上一页看看吧"] },
{ "selector": ".next", "text": ["去下一页看看吧"] },
{ "selector": ".dropdown-toggle", "text": ["这里是菜单"] },
{ "selector": "c-player a.play-icon", "text": ["想要听点音乐吗"] },
{ "selector": "c-player div.time", "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"] },
{ "selector": "c-player div.volume", "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"] },
{ "selector": "c-player div.list-button", "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"] },
{ "selector": "c-player div.lyric-button", "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"] },
{ "selector": ".waifu #live2d", "text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！"] }
],
"click": [
{
"selector": ".waifu #live2d",
"text": [
"是…是不小心碰到了吧",
"萝莉控是什么呀",
"你看到我的小熊了吗",
"再摸的话我可要报警了！⌇●﹏●⌇",
"110吗，这里有个变态一直在摸我(ó﹏ò｡)"
]
}
],
"seasons": [
{ "date": "01/01", "text": ["<span style=\"color:#0099cc;\">元旦</span>了呢，新的一年又开始了，今年是{year}年~"] },
{ "date": "02/14", "text": ["又是一年<span style=\"color:#0099cc;\">情人节</span>，{year}年找到对象了嘛~"] },
{ "date": "03/08", "text": ["今天是<span style=\"color:#0099cc;\">妇女节</span>！"] },
{ "date": "03/12", "text": ["今天是<span style=\"color:#0099cc;\">植树节</span>，要保护环境呀"] },
{ "date": "04/01", "text": ["悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节，不要被骗了哦~</span>"] },
{ "date": "05/01", "text": ["今天是<span style=\"color:#0099cc;\">五一劳动节</span>，计划好假期去哪里了吗~"] },
{ "date": "06/01", "text": ["<span style=\"color:#0099cc;\">儿童节</span>了呢，快活的时光总是短暂，要是永远长不大该多好啊…"] },
{ "date": "09/03", "text": ["<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>，铭记历史、缅怀先烈、珍爱和平、开创未来。"] },
{ "date": "09/10", "text": ["<span style=\"color:#0099cc;\">教师节</span>，在学校要给老师问声好呀~"] },
{ "date": "10/01", "text": ["<span style=\"color:#0099cc;\">国庆节</span>，新中国已经成立69年了呢"] },
{ "date": "11/05-11/12", "text": ["今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"] },
{ "date": "12/20-12/31", "text": ["这几天是<span style=\"color:#0099cc;\">圣诞节</span>，主人肯定又去剁手买买买了~"] }
]
});
}
});
}
});
}
</script>
一键部署
<link rel="stylesheet" type="text/css" href="//live2d-cdn.fghrsh.net/assets/1.4.2/waifu.min.css" /> <div class="waifu" style="background: transparent"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool" style="background: transparent"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div> <script src="//files.cnblogs.com/files/lemos/waifu-tips.min.js"></script> <script src="//files.cnblogs.com/files/lemos/live2d.min.js"></script> <script src="//files.cnblogs.com/files/lemos/custom.model.min.js"></script>
背景图
新的 css 代码
/*公用*/
body {
font-size:15px;
padding:0;
margin:0;
font-family:"微软雅黑","宋体",Arial;
background:#d49784 url('//img2020.cnblogs.com/blog/1062332/202012/1062332-20201228163028653-871819119.jpg') no-repeat top center fixed;
min-width:1200px;
}
* {
margin: 0;
padding: 0;
}
#home {
opacity: 0.95;
filter: alpha(opacity=95);
box-shadow:0 0 10px #000;
margin:40px auto;
width:1350px;
background:#fff;
overflow:auto;
border:solid 1px #fff;
}
/*段落*/
.postBody p,.postCon p {
margin:7px 0;
line-height:24px;
}
h1 {
margin:0;
}
h3 {
font-size:15px;
font-weight:bold;
}
/*超链接*/
a {
color:#464646;
text-decoration:none;
outline: none;
}
a:hover {
color:#d49784;
}
a:link, a:visited {
text-decoration: none;
}
ul {
list-style:none;
margin:0;
padding:0;
}
image {
border:none;
}
#header {
padding:20px;
}
/*博客标题*/
#blogLogo {
float: right;
}
#blogTitle {
height: 60px;
clear: both;
}
#blogTitle h1 {
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
margin-top: 20px;
}
#blogTitle h1 a {
color: #515151;
}
#blogTitle h1 a:hover {
color: #606b70;
}
/*子标题*/
.subtitle {
padding-left:30px;
font-size:14px;
color:#999;
font-weight:normal;
margin:10px 0;
}
/*导航栏*/
#navigator {
font-size: 13px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
#navList {
min-height: 30px;
float: left;
}
#navList li {
float: left;
margin: 0 40px 0 0;
}
#navList a {
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 19px;
}
#navList a:hover {
color: #000;
text-decoration: none;
}
#navList a:link, #navList a:visited, #navList a:active {
color: #6a6a6a;
font-weight: bold;
}
.blogStats {
height:48px;
color:#fff;
line-height:48px;
}
#main {
padding:20px;
display: flex;
}
/*主面板*/
#mainContent {
background:#fff;
width:960px;
flex: 1;
}
/*侧边栏*/
#sideBar {
margin: 0 10px 0 20px;
background:#fff;
width:230px;
min-height: 200px;
padding: 0 0 0 5px;
overflow: hidden;
font-size:12px;
line-height:22px;
}
#sideBar a {
color: #757575;
}
#sideBar h3 {
font-size: 14px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
margin-bottom: 35px;
}
.newsItem {
background: #fff;
margin-bottom: 35px;
}
/* 侧边栏栏目标题 */
.catListTitle {
font-weight: bold;
line-height: 1.2;
font-size: 110%;
margin-top: 15px;
margin-bottom: 10px;
text-align: left;
}
/*公告*/
#profile_block {
margin-top:0px;
line-height:24px;
text-align:left;
}
/*每日文章列表*/
.day {
background:#fff;
padding:0;
margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
color:#53585d;
}
.postTitle {
padding-bottom:10px;
font-size:20px;
font-weight:bold;
color:#464646;
background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
padding-left:30px;
}
.dayTitle {
display:none;
}
/*摘要*/
.c_b_p_desc {
padding:10px;
line-height:24px;
color: #53585d;
}
.c_b_p_desc a:hover {
text-decoration:none;
border-bottom-width:1px;
border-bottom-style:dotted;
}
.c_b_p_desc .c_b_p_desc_readmore {
text-decoration:underline;
color:#d49784;
}
/*右侧图片*/
.desc_img {
margin-left:10px;
border:solid 1px #fff;
box-shadow:0 0 10px #aaa;
}
/* 随笔分类页、标签页列表标题 */
.forFlow>.entrylistTitle, .forFlow>.PostListTitle, .forFlow .thumbTitle {
padding-left: 8px;
margin-bottom: 15px;
height: 38px;
line-height: 38px;
font-size: 18px;
border-bottom: 2px solid #e6e6e6;
color: #5a5a5a;
}
/*博文页*/
#topics .post {
background:#fff;
}
.postCon {
padding:10px 20px 0 20px;
}
.postDesc {
margin:0 30px;
margin-bottom:2px;
padding:8px 0px;
font-size:12px;
color:#757575;
background:#fff;
text-align:right;
}
.postDesc a {
color:#666;
}
.postBody {
padding:0;
}
/*google搜索框*/
#google_q,#q {
height:22px;
width:52%;
box-shadow:inset 0 0 3px #ddd;
border-radius:4px;
}
/* 输入框 */
.input_my_zzk {
border: 1px solid #ccc;
padding-right: 30px;
padding-left: 5px;
outline: 0;
}
.input_my_zzk:focus {
border: 1px solid #d49784;
}
.input_my_zzk:hover {
transition: all .4s linear 0s;
}
/*搜索按钮*/
.btn_my_zzk {
margin-left: 8px;
font-family:'Microsoft Yahei';
border:none;
height:26px;
width:60px;
padding:1px;
font-size:14px;
cursor:pointer;
position: relative;;
vertical-align:middle;
display:inline-block;
background:#d49784;
border-radius:4px;
color:#fff;
border: 1px solid #ccc;
}
.btn_my_zzk:hover {
background:#6DA47D;
}
/* 日历 */
#blog-calendar {
width: 228px;
padding-bottom: 5px;
margin-bottom: 35px;
box-shadow: 0 1px 3px #ccc;
border: 1px solid #ededed;
}
#blog-calendar table {
border-collapse: collapse;
border-spacing: 0;
}
#blog-calendar td {
font-size: 12px;
font-family: "Comic Sans MS";
}
.CalTitle {
background: #6293bb;
width: 100%;
height: 25px;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 5px 0;
color: #fff;
}
.CalTitle td {
background: #f8f8f8 !important;
border: 0 !important;
color: #5e5f63;
font-family: "Comic Sans MS";
}
.Cal {
border: none;
color: #666;
width: 100%;
}
.CalDayHeader {
background: #f8f8f8;
font-weight: 100;
color: #5e5f63;
}
#blog-calendar th {
font-size: 12px;
}
.CalTodayDay {
background: #d49784 !important;
color: #fff;
font-weight: bold;
}
/*评论按钮*/
.comment_btn {
font-family:'Microsoft Yahei';
border:none;
height:38px;
width:100px;
font-size:14px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
border: 1px solid #eee;
border-radius: 6px;
}
/*评论标题*/
.feedback_area_title {
font: normal normal 16px/35px "Microsoft YaHei";
margin: 10px 0 30px;
border-bottom: 2px solid #ccc;
}
.feedbackListSubtitle {
clear: both;
color: #a8a8a8;
padding: 8px 5px;
}
.feedbackListSubtitle a {
color:#888;
}
.feedbackManage {
width: 200px;
text-align: right;
float: right;
}
.feedbackCon {
padding: 10px 20px 10px 5px;
min-height: 35px;
_height: 35px;
margin-bottom: 1em;
line-height: 1.5;
}
.comment_quote {
background:#FCFAAC;
padding:15px;
border:1px solid #CCC;
}
#commentform_title {
font: normal normal 16px/35px "Microsoft YaHei";
margin: 10px 0 30px;
border-bottom: 2px solid #ccc;
background-image: none;
padding: 0;
}
/*评论框*/
#comment_form {
margin:10px 0;
padding:0;
}
.commentform {
margin:10px 0;
padding:10px 20px;
background:#fff;
}
/*评论条目*/
.feedbackItem {
border: 1px solid #eee;
border-radius: 5px;
padding: 10px;
margin-top: 30px;
}
.feedbackListSubtitle {
clear: both;
color: #a8a8a8;
padding: 8px 5px;
}
/*分类页*/
.entrylist {
padding:10px 20px;
background:#fff;
}
.entrylistItem {
margin:10px 0;
padding:10px;
}
.entrylistPosttitle {
font-size:18px;
font-weight:bold;
background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
padding-left:30px;
}
.entrylistPostSummary {
padding:10px;
}
.entrylistItemPostDesc {
font-size:12px;
color:#999;
padding-left:40px;
}
/*尾部*/
#footer {
color: #686868;
text-align: center;
min-height: 15px;
border-top: 1px solid #ededed;
margin-top: 50px;
padding-top: 10px;
margin-bottom: 10px;
}
}
/*文章内图片*/
#cnblogs_post_body p img {
margin:10px;
}
/*顶一下*/
.diggnum {
font-size:28px;
color:#6DA47D;
font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
line-height:100px;
}
.diggit {
float:left;
width:128px;
height:128px;
background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_dig.gif') no-repeat;
background-position:0 0;
text-align:center;
cursor:pointer;
}
.diggit:hover {
background-position:-128px 0;
}
/*踩一下（园友反映，这个有点“邪恶”，呵呵，其实是我没来得及设计这个背景图片，就暂时把它隐藏了……可以去掉这句话）*/
.buryit {
display:none;
}
.diggword {
display:none;
}
/*green_channel*/
#green_channel {
text-align:left;
background:#fff;
padding-left:20px;
font-weight:normal;
font-size:15px;
width:920px;
border:none;
color:#fff;
padding:20px;
border-radius:4px;
}
/*标签列表页、评论列表页*/
#myposts .PostList {
margin-right: 20px;
margin-top: 10px;
font-size: 13px;
}
.PostList+.PostList {
margin-top: 30px;
}
.PostList {
border-bottom: 1px solid #ccc;
clear: both;
min-height: 1.5em;
}
.postTitl2 {
float: left;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
}
#myposts .postDesc2 {
font-size: 12px;
}
.postDesc2 {
color: #666;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}
#myposts .postText2 {
font-size: 13px;
margin-bottom: 5px;
}
.postText2 {
clear: both;
color: #757575;
}
#myposts .pager {
text-align: center;
}
.pager {
color: #d49784;
}
.pager a {
color: #d49784;
border: 1px solid #ffd3c5;
}
参考链接
https://www.cnblogs.com/zzc2018/p/10662149.html
https://live2d.fghrsh.net/demo/1.4.2/waifu-tips.html
