sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

添加看板娘

Browse Source
This commit is contained in:
结发受长生
2019-04-27 17:28:41 +08:00
parent d0c2583ca8
commit 469c56f570
29 changed files with 1075 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/yilia/source-src/config/waifu-tip.json
+21
View File
@@ -0,0 +1,21 @@
{
"mouseover": {
"waifu": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"],
"home": "点击前往首页，想回到上一页可以使用浏览器的后退功能哦",
"innerArchive": "所有文章都在这里，支持搜索喔",
"aboutme": "想听听关于主人的故事吗",
"github": "发现主人出没地点！",
"weibo": "发现主人出没地点！",
"mail" : "这里是主人的联系方式",
"tools.eye": "深夜时要爱护眼睛呀",
"tools.chart": "猜猜我要说些什么",
"tools.photo": "你要给我拍照呀，一二三~茄子~~",
"tools.info": "想要知道更多有关我的事吗？",
"tools.close": "到了要说再见的时候了吗"
},
"click": {
"tools.photo": "照好了嘛，是不是很可爱呢？",
"tools.close": "我们还能再见面的吧…",
"tools.eye": "你会做眼保健操吗？"
}
}
themes/yilia/source-src/css/main.scss
+1
View File
@@ -19,6 +19,7 @@
@import "./aside";
@import "./tooltip";
@import "./footer";
@import "./waifu";
@media screen and (max-width: 800px) {
@import "./mobile";
@import "./mobile-slider";
themes/yilia/source-src/css/page.scss
+4 -4
View File
@@ -2,13 +2,13 @@
text-align: center;
margin-top: 30px;
.page-number{
width: 20px;
height: 25px;
width: 25px;
height: 30px;
background: #4d4d4d;
display: inline-block;
color: #fff;
line-height: 25px;
font-size: 12px;
line-height: 30px;
font-size: 14px;
margin: 0 5px 30px;
border-radius: 2px;
&:hover{
themes/yilia/source-src/css/waifu.scss
+305
View File
@@ -0,0 +1,305 @@
.waifu {
display: none;
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
font-size: 0;
&:hover {
transform: translateY(0);
.waifu-tool {
display: block;
}
}
.waifu-tips {
opacity: 0;
width: 250px;
height: 70px;
top: -30px;
left: 10px;
padding: 5px 10px;
border: 1px solid rgba(107, 107, 107, 0.7);
border-radius: 8px;
background-color: #fff;
font-size: 13px;
text-overflow: ellipsis;
position: absolute;
transition: opacity .6s;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-name: shake;
animation-timing-function: ease-in-out;
&::before {
content: "";
position: absolute;
top: 68px;
width: 0;
height: 0;
left: 20px;
border-top: 10px rgba(107, 107, 107, 0.7) solid;
border-left: 7px transparent solid;
border-right: 7px rgba(107, 107, 107, 0.7) solid;
border-bottom: 10px transparent solid;
}
&::after {
content: "";
position: absolute;
top: 66px;
width: 0;
height: 0;
left: 20px;
border-top: 10px white solid;
border-left: 7px transparent solid;
border-right: 6px white solid;
border-bottom: 10px transparent solid;
}
}
.waifu-tool {
color: #aaa;
top: 100px;
right: 10px;
font-size: 14px;
position: absolute;
span {
display: block;
cursor: pointer;
color: rgb(57, 57, 57);
background-color: #fff;
border: 1px solid rgb(57, 57, 57);
border-radius: 5px;
padding: 0 4px;
margin-bottom: 4px;
line-height: 20px;
transition: 0.2s;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-name: shake;
animation-timing-function: ease-in-out;
&:hover {
z-index: 1;
transform: scale(1.5);
animation: none;
}
}
}
#live2d{
position: relative;
cursor: grab;
&:active {
cursor: grabbing;
}
}
}
/*
body.night .waifu {
color: #34495e;
filter: brightness(30%);
}
*/
@media (max-width: 768px) {
.waifu {
display: none;
}
}
@keyframes shake {
2% {
transform: translate(0.5px, -1.5px) rotate(-0.5deg);
}
4% {
transform: translate(0.5px, 1.5px) rotate(1.5deg);
}
6% {
transform: translate(1.5px, 1.5px) rotate(1.5deg);
}
8% {
transform: translate(2.5px, 1.5px) rotate(0.5deg);
}
10% {
transform: translate(0.5px, 2.5px) rotate(0.5deg);
}
12% {
transform: translate(1.5px, 1.5px) rotate(0.5deg);
}
14% {
transform: translate(0.5px, 0.5px) rotate(0.5deg);
}
16% {
transform: translate(-1.5px, -0.5px) rotate(1.5deg);
}
18% {
transform: translate(0.5px, 0.5px) rotate(1.5deg);
}
20% {
transform: translate(2.5px, 2.5px) rotate(1.5deg);
}
22% {
transform: translate(0.5px, -1.5px) rotate(1.5deg);
}
24% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
}
26% {
transform: translate(1.5px, 0.5px) rotate(1.5deg);
}
28% {
transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
}
30% {
transform: translate(1.5px, -0.5px) rotate(-0.5deg);
}
32% {
transform: translate(2.5px, -1.5px) rotate(1.5deg);
}
34% {
transform: translate(2.5px, 2.5px) rotate(-0.5deg);
}
36% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
38% {
transform: translate(2.5px, -0.5px) rotate(-0.5deg);
}
40% {
transform: translate(-0.5px, 2.5px) rotate(0.5deg);
}
42% {
transform: translate(-1.5px, 2.5px) rotate(0.5deg);
}
44% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
46% {
transform: translate(1.5px, -0.5px) rotate(-0.5deg);
}
48% {
transform: translate(2.5px, -0.5px) rotate(0.5deg);
}
50% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
52% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg);
}
54% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
56% {
transform: translate(0.5px, 2.5px) rotate(1.5deg);
}
58% {
transform: translate(2.5px, 2.5px) rotate(0.5deg);
}
60% {
transform: translate(2.5px, -1.5px) rotate(1.5deg);
}
62% {
transform: translate(-1.5px, 0.5px) rotate(1.5deg);
}
64% {
transform: translate(-1.5px, 1.5px) rotate(1.5deg);
}
66% {
transform: translate(0.5px, 2.5px) rotate(1.5deg);
}
68% {
transform: translate(2.5px, -1.5px) rotate(1.5deg);
}
70% {
transform: translate(2.5px, 2.5px) rotate(0.5deg);
}
72% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg);
}
74% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg);
}
76% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg);
}
78% {
transform: translate(-1.5px, 2.5px) rotate(0.5deg);
}
80% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
}
82% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
}
84% {
transform: translate(-0.5px, 0.5px) rotate(1.5deg);
}
86% {
transform: translate(2.5px, 1.5px) rotate(0.5deg);
}
88% {
transform: translate(-1.5px, 0.5px) rotate(1.5deg);
}
90% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
}
92% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
94% {
transform: translate(0.5px, 0.5px) rotate(-0.5deg);
}
96% {
transform: translate(2.5px, -0.5px) rotate(-0.5deg);
}
98% {
transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
}
0%, 100% {
transform: translate(0, 0) rotate(0);
}
}
themes/yilia/source-src/js/slider.js
+176 -99
View File
@@ -5,114 +5,191 @@ import Browser from './browser'
import axios from 'axios'
import Vue from '../lib/vue/vue.min'
import waifuTips from '../config/waifu-tip.json'
const isMobile = (Browser.versions.mobile && window.screen.width < 800)
function setScrollZero() {
let $sct = document.querySelectorAll('.tools-section')
Array.prototype.forEach.call($sct, (em) => {
em.scrollTop = 0
})
let $sct = document.querySelectorAll('.tools-section')
Array.prototype.forEach.call($sct, (em) => {
em.scrollTop = 0
})
}
var waifuTipTimer = null
new Vue({
el: '#container',
data: {
isCtnShow: false,
isShow: false,
items: [],
innerArchive: false,
friends: false,
aboutme: false,
jsonFail: false,
showTags: false,
showCategories: false,
search: null
},
methods: {
stop (event) {
event.stopPropagation()
},
chose (name, prefix) {
this.search = prefix + name
},
clearChose () {
this.search = null
},
openSlider (event, type) {
event.stopPropagation()
this.innerArchive = false
this.friends = false
this.aboutme = false
this[type] = true
this.isShow = true
this.isCtnShow = true
setScrollZero()
},
hideSlider () {
if (this.isShow) {
this.isShow = false
setTimeout(() => {
this.isCtnShow = false
}, 300)
}
}
},
filters: {
urlformat: (str) => {
return (window.yiliaConfig && window.yiliaConfig.root) ? window.yiliaConfig.root + str : '/' + str;
}
},
watch: {
search (newVal, oldVal) {
if(newVal) {
handleSearch.call(this, newVal.toLowerCase())
} else {
this.items.forEach(function(item){
item.isHide = false
})
}
}
},
mounted () {
axios.get(window.yiliaConfig.root + 'content.json?t=' + (+ new Date()))
.then((res)=>{
this.items = res.data
}).catch((err) => {
this.jsonFail = true
})
}
el: '#container',
data: {
isCtnShow: false,
isShow: false,
items: [],
innerArchive: false,
friends: false,
aboutme: false,
jsonFail: false,
showTags: false,
showCategories: false,
search: null,
waifu: {
tip: null, // 提示语文字
tipOpacity: 0, // 提示语框透明度
showTools: false // 显示工具栏
}
},
methods: {
stop (event) {
event.stopPropagation()
},
chose (name, prefix) {
this.search = prefix + name
},
clearChose () {
this.search = null
},
openSlider (event, type) {
event.stopPropagation()
this.innerArchive = false
this.friends = false
this.aboutme = false
this[type] = true
this.isShow = true
this.isCtnShow = true
setScrollZero()
},
hideSlider () {
if (this.isShow) {
this.isShow = false
setTimeout(() => {this.isCtnShow = false}, 300)
}
},
linkMouseover(name) {
this.showMessage(waifuTips.mouseover[name], 3000)
},
toolsClick(name) {
this.showMessage(waifuTips.click[name])
if(name in waifuTools) {
waifuTools[name].call(this)
}
},
showMessage (text, time) {
if(!text) return
if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1]
this.waifu.tip = text
this.waifu.tipOpacity = 1
if(waifuTipTimer) {
clearTimeout(waifuTipTimer)
waifuTipTimer = null
}
waifuTipTimer = setTimeout(()=>{
this.waifu.tipOpacity = 0
waifuTipTimer = null
}, time || 5000)
}
},
filters: {
urlformat: (str) => {
return (window.yiliaConfig && window.yiliaConfig.root) ? window.yiliaConfig.root + str : '/' + str;
}
},
watch: {
search (newVal, oldVal) {
if(newVal) {
handleSearch.call(this, newVal.toLowerCase())
} else {
this.items.forEach(function(item){
item.isHide = false
})
}
}
},
mounted () {
axios.get(window.yiliaConfig.root + 'content.json?t=' + (+ new Date()))
.then((res)=>{
this.items = res.data
}).catch((err) => {
this.jsonFail = true
})
this.showMessage(welcomeMessage(), 6000)
document.addEventListener('copy', () => {
this.showMessage('你都复制了些什么呀，转载要记得加上出处哦');
})
}
})
function handleSearch(val) {
var type
if (val.startsWith('#')) {
val = val.substr(1, val.length)
type = 'tag'
} else if (val.startsWith('$')) {
val = val.substr(1, val.length)
type = 'category'
} else {
type = 'title'
}
this.items.forEach((item) => {
switch(type) {
case 'title' :
item.isHide = item.title.toLowerCase().indexOf(val) < 0
break
case 'tag' :
item.isHide = Array.prototype.every.call(item.tags, function(tag){
return tag.name.toLowerCase() !== val
})
break
case 'category' :
item.isHide = Array.prototype.every.call(item.categories, function(category){
return category.name.toLowerCase() !== val
})
break
}
})
var type
if (val.startsWith('#')) {
val = val.substr(1, val.length)
type = 'tag'
} else if (val.startsWith('$')) {
val = val.substr(1, val.length)
type = 'category'
} else {
type = 'title'
}
this.items.forEach((item) => {
switch(type) {
case 'title' :
item.isHide = item.title.toLowerCase().indexOf(val) < 0
break
case 'tag' :
item.isHide = Array.prototype.every.call(item.tags, function(tag){
return tag.name.toLowerCase() !== val
})
break
case 'category' :
item.isHide = Array.prototype.every.call(item.categories, function(category){
return category.name.toLowerCase() !== val
})
break
}
})
}
function welcomeMessage() {
let now = new Date().getHours()
let text
if (now > 23 || now <= 5) {
text = '你是夜猫子呀？这么晚还不睡觉，明天起的来嘛'
} else if (now > 5 && now <= 7) {
text = '早上好！一日之计在于晨，美好的一天就要开始了'
} else if (now > 7 && now <= 11) {
text = '上午好！工作顺利嘛，不要久坐，多起来走动走动哦！'
} else if (now > 11 && now <= 14) {
text = '中午了，工作了一个上午，现在是午餐时间！'
} else if (now > 14 && now <= 17) {
text = '午后很容易犯困呢，今天的运动目标完成了吗？'
} else if (now > 17 && now <= 19) {
text = '傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~'
} else if (now > 19 && now <= 21) {
text = '晚上好，今天过得怎么样？'
} else if (now > 21 && now <= 23) {
text = '已经这么晚了呀，早点休息吧，晚安~'
} else {
text = '嗨~ 快来逗我玩吧！'
}
return text
}
const waifuTools = {
"tools.photo"() {
window.Live2D.captureName = 'Kesshouban.png'
window.Live2D.captureFrame = true
},
"tools.close"() {
setTimeout(function() {
document.querySelector('.waifu').style.display = 'none';
}, 1300);
},
"tools.eye"() {
//TODO 切换到夜间模式
},
"tools.chart"() {
// 一言
axios.get('https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=55&encode=json').then(res => {
this.showMessage(`${res.data.hitokoto}　　－－${res.data.source}`)
})
}
}
if (!isMobile) {
Anm.init()
Anm.init()
}
themes/yilia/source-src/js/waifu.js
+20
View File
@@ -0,0 +1,20 @@
import '../lib/live2d'
// 浏览器判断
import Browser from './browser'
const isMobile = (Browser.versions.mobile && window.screen.width < 800)
// 加载live2d模型
if(!isMobile) {
loadlive2d('live2d', '/model/model.json')
document.querySelector('.waifu').style.display = 'block'
}
// 控制台
console.log(
'\n %c Silence %c https://www.colorfulsweet.site \n',
'color:#FFFFFB;background:#ffa628;padding:5px 0;border-radius:.5rem 0 0 .5rem;',
'background: #efefef;padding:5px 0;border-radius:0 .5rem .5rem 0;'
)
console.log(`页面加载消耗了 ${(Math.round(performance.now()*100)/100/1000).toFixed(2)}s`)
themes/yilia/source-src/lib/live2d.js
Executable
+2
View File
File diff suppressed because one or more lines are too long