看板娘优化
This commit is contained in:
结发受长生
parent
d101a69a3b
commit
63e80ebd82
@ -1,69 +1,6 @@
|
||||
<% if (theme.comment.enable) { %>
|
||||
<%- js('js/comment') %>
|
||||
<div id="comments" class="comment">
|
||||
<!--
|
||||
<div class="sign-bar">
|
||||
GitHub 已登录!
|
||||
<span class="sign-link">登出</span>
|
||||
</div>
|
||||
<section class="box">
|
||||
<div class="com-avatar"><img src="/img/jelon.jpg" alt="avatar"></div>
|
||||
<div class="com-text">
|
||||
<div class="main">
|
||||
<textarea class="text-area-edited show" placeholder="欢迎评论！"></textarea>
|
||||
<div class="text-area-preview"></div>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<div class="switch-item on">编辑</div>
|
||||
<div class="switch-item">预览</div>
|
||||
</div>
|
||||
<div class="button">提交</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="tips">注：评论支持 markdown 语法！</section>
|
||||
<section class="list-wrap">
|
||||
<ul class="list">
|
||||
<li>
|
||||
<div class="user-avatar">
|
||||
<a href="/">
|
||||
<img src="/img/jelon.jpg" alt="user-avatar">
|
||||
</a>
|
||||
</div>
|
||||
<div class="user-comment">
|
||||
<div class="user-comment-header">
|
||||
<span class="post-name">张德龙</span>
|
||||
<span class="post-time">2017年12月12日</span>
|
||||
<span class="like liked">已赞</span>
|
||||
<span class="like-num">2</span>
|
||||
</div>
|
||||
<div class="user-comment-body">333333</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="user-avatar">
|
||||
<a href="/">
|
||||
<img src="/img/jelon.jpg" alt="user-avatar">
|
||||
</a>
|
||||
</div>
|
||||
<div class="user-comment">
|
||||
<div class="user-comment-header">
|
||||
<span class="post-name">刘德华</span>
|
||||
<span class="post-time">2017年12月12日</span>
|
||||
<span class="like">点赞</span>
|
||||
<span class="like-num">2</span>
|
||||
</div>
|
||||
<div class="user-comment-body">vvvvv</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="page-nav">
|
||||
<a href="javascript: void(0);" class="item">1</a>
|
||||
<a href="javascript: void(0);" class="item">2</a>
|
||||
<a href="javascript: void(0);" class="item current">3</a>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
</div>
|
||||
<div id="comments" class="comment"></div>
|
||||
<script>
|
||||
JELON.Comment({
|
||||
container: 'comments',
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
<!-- 博客头部 -->
|
||||
<%- partial('_partial/header') %>
|
||||
<!-- 看板娘 -->
|
||||
<div class="waifu">
|
||||
<div class="waifu-tips"></div>
|
||||
<div class="banner">
|
||||
<div class="banner-tips"></div>
|
||||
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
|
||||
</div>
|
||||
<!-- 博客正文 -->
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.waifu
|
||||
.banner
|
||||
position: fixed
|
||||
bottom: 0
|
||||
left: 0
|
||||
@ -8,14 +8,14 @@
|
||||
-webkit-transform: translateY(3px)
|
||||
transform: translateY(3px)
|
||||
|
||||
.waifu:hover
|
||||
.banner:hover
|
||||
-webkit-transform: translateY(0)
|
||||
transform: translateY(0)
|
||||
|
||||
@media (max-width: 768px)
|
||||
.waifu
|
||||
.banner
|
||||
display: none
|
||||
.waifu-tips
|
||||
.banner-tips
|
||||
opacity: 0
|
||||
width: 250px
|
||||
height: 70px
|
||||
@ -36,7 +36,7 @@
|
||||
animation-name: shake
|
||||
animation-timing-function: ease-in-out
|
||||
|
||||
.waifu #live2d
|
||||
.banner #live2d
|
||||
position: relative
|
||||
|
||||
@keyframes shake
|
||||
|
||||
BIN
themes/hexo-theme-xups/source/img/github.png
Normal file
BIN
themes/hexo-theme-xups/source/img/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
@ -1,4 +1,11 @@
|
||||
define(['loadlive2d', 'axios'], function(loadlive2d, axios) {
|
||||
/**
|
||||
* 字符串模板替换
|
||||
* 例如 template:"这是一个{text}内容", context:{text:"有趣的"}
|
||||
* return "这是一个有趣的内容"
|
||||
* @param {String} template 模板内容
|
||||
* @param {Object} context 替换的内容
|
||||
*/
|
||||
function render(template, context) {
|
||||
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
|
||||
return template.replace(tokenReg, function (word, slash1, token, slash2) {
|
||||
@ -16,10 +23,6 @@ function render(template, context) {
|
||||
return currentObject;
|
||||
});
|
||||
}
|
||||
String.prototype.render = function (context) {
|
||||
return render(this, context);
|
||||
};
|
||||
|
||||
var re = /x/;
|
||||
console.log(re);
|
||||
re.toString = function() {
|
||||
@ -31,23 +34,31 @@ document.addEventListener('copy', function(){
|
||||
showMessage('你都复制了些什么呀，转载要记得加上出处哦', 5000);
|
||||
})
|
||||
|
||||
var tips = document.querySelector('.waifu-tips');
|
||||
var tips = document.querySelector('.banner-tips');
|
||||
var tipTimer = undefined;
|
||||
/**
|
||||
* 显示消息
|
||||
* @param {Object} text 消息内容(如果是数组则显示其中的随机一个元素)
|
||||
* @param {Numer} timeout 消失的延迟时间
|
||||
*/
|
||||
function showMessage(text, timeout){
|
||||
if(tipTimer) {
|
||||
window.clearTimeout(tipTimer);
|
||||
tipTimer = undefined;
|
||||
}
|
||||
if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1];
|
||||
// $tips.stop();
|
||||
// $tips.html(text).fadeTo(200, 1);
|
||||
//TODO 使用原生动画库
|
||||
tips.innerHTML = text;
|
||||
tips.style.opacity = 1;
|
||||
hideMessage(timeout);
|
||||
}
|
||||
/**
|
||||
* 隐藏消息
|
||||
* @param {Number} timeout 消失的延迟时间
|
||||
*/
|
||||
function hideMessage(timeout){
|
||||
timeout = timeout || 5000;
|
||||
// $tips.stop().css('opacity',1);
|
||||
// $tips.delay(timeout).fadeTo(200, 0);
|
||||
setTimeout(function(){
|
||||
tipTimer = setTimeout(function(){
|
||||
tips.style.opacity = 0;
|
||||
}, timeout);
|
||||
}, timeout || 5000);
|
||||
}
|
||||
var text;
|
||||
if(document.referrer){
|
||||
@ -96,24 +107,19 @@ function createTrigger(tips) {
|
||||
return function(){
|
||||
var text = tips.text;
|
||||
if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length + 1)-1];
|
||||
text = text.render({text: this.textContent});
|
||||
text = render(text, {text: this.textContent});
|
||||
showMessage(text, 3000);
|
||||
}
|
||||
}
|
||||
function bindElementEvent(url) {
|
||||
axios.get(url).then(function(res){
|
||||
res.data.mouseenter.forEach(function(tips){
|
||||
var mouseenterTrigger = createTrigger(tips);
|
||||
document.querySelectorAll(tips.selector).forEach(function(item){
|
||||
item.addEventListener("mouseenter", mouseenterTrigger);
|
||||
})
|
||||
});
|
||||
res.data.click.forEach(function(tips){
|
||||
var clickTrigger = createTrigger(tips);
|
||||
document.querySelectorAll(tips.selector).forEach(function(item){
|
||||
item.addEventListener("click", clickTrigger);
|
||||
})
|
||||
});
|
||||
for(var eventName in res.data) {
|
||||
res.data[eventName].forEach(function(tips){
|
||||
Array.prototype.forEach.call(document.querySelectorAll(tips.selector),function(item){
|
||||
item.addEventListener(eventName, createTrigger(tips));
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -121,31 +127,36 @@ function bindElementEvent(url) {
|
||||
function getHitokoto(){
|
||||
axios.get('https://v1.hitokoto.cn/?encode=json&charset=utf-8&c=b&c=a&c=e').then(function(res){
|
||||
showMessage(res.data.hitokoto, 5000);
|
||||
setTimeout(getHitokoto, 20000);
|
||||
}).catch(function(){
|
||||
setTimeout(getHitokoto, 30000);
|
||||
}).catch(function(){
|
||||
setTimeout(getHitokoto, 45000);
|
||||
})
|
||||
}
|
||||
|
||||
return function(){
|
||||
//加载看板娘模型
|
||||
axios.get('/resource/model.json').then(function(res){
|
||||
var randomIndex = Math.floor(Math.random() * res.data.textures.length);
|
||||
//随机皮肤
|
||||
if(window.location.href.startsWith('http://localhost') || ("ActiveXObject" in window)) {
|
||||
//本地开发调试或者是IE浏览器
|
||||
res.data.textures = ['/resource/model/skin/'+res.data.textures[randomIndex]];
|
||||
} else {
|
||||
//服务器部署运行(使用网易蜂巢对象存储)
|
||||
res.data.textures = ['https://blog-cdn.nos-eastchina1.126.net/live2D/'+res.data.textures[randomIndex]];
|
||||
}
|
||||
loadlive2d('live2d', '/resource/', '', res.data);
|
||||
// loadlive2d("live2d", "/resource/model.json");
|
||||
});
|
||||
// 定时显示"一言"
|
||||
setTimeout(getHitokoto, 10000);
|
||||
// 按照json当中的配置给页面元素绑定事件
|
||||
bindElementEvent("/resource/waifu-tips.json");
|
||||
showMessage(text, 6000);
|
||||
return {
|
||||
/**
|
||||
* 加载看板娘模型
|
||||
* @param {Sting} modelUrl 模板的json描述文件路径
|
||||
*/
|
||||
init: function(modelUrl){
|
||||
axios.get(modelUrl).then(function(res){
|
||||
var randomIndex = Math.floor(Math.random() * res.data.textures.length);
|
||||
//随机皮肤
|
||||
if(window.location.href.startsWith('http://localhost') || ("ActiveXObject" in window)) {
|
||||
//本地开发调试或者是IE浏览器
|
||||
res.data.textures = ['/resource/model/skin/'+res.data.textures[randomIndex]];
|
||||
} else {
|
||||
//服务器部署运行(使用网易蜂巢对象存储)
|
||||
res.data.textures = ['https://blog-cdn.nos-eastchina1.126.net/live2D/'+res.data.textures[randomIndex]];
|
||||
}
|
||||
loadlive2d('live2d', '/resource/', '', res.data);
|
||||
// loadlive2d("live2d", "/resource/model.json");
|
||||
});
|
||||
// 定时显示"一言"
|
||||
setTimeout(getHitokoto, 10000);
|
||||
// 按照json当中的配置给页面元素绑定事件
|
||||
bindElementEvent("/resource/banner-tips.json");
|
||||
showMessage(text, 6000);
|
||||
},
|
||||
showMessage: showMessage
|
||||
}
|
||||
});
|
||||
@ -259,7 +259,7 @@ var JELON = window.JELON || {};
|
||||
userInfo = {};
|
||||
}
|
||||
// 默认头像路径 /img/jelon.jpg
|
||||
$('loginAvatar').src = userInfo.avatar_url || '/img/unsigned_avatar.png';
|
||||
$('loginAvatar').src = userInfo.avatar_url || '/img/github.png';
|
||||
}
|
||||
},
|
||||
list: {
|
||||
|
||||
@ -14,7 +14,8 @@ require.config({
|
||||
}
|
||||
}
|
||||
});
|
||||
require(['echo', 'bannerGirl'],function(echo, loadBannerGirl){
|
||||
require(['polyfill', 'local-search']);
|
||||
require(['echo', 'bannerGirl'],function(echo, bannerGirl){
|
||||
function deepCopy(c, p) {
|
||||
var c = c || {};
|
||||
for (var i in p) {
|
||||
@ -90,7 +91,8 @@ require(['echo', 'bannerGirl'],function(echo, loadBannerGirl){
|
||||
JELON.init();
|
||||
window.JELON = JELON;
|
||||
})();
|
||||
// 加载看板娘
|
||||
loadBannerGirl();
|
||||
});
|
||||
require(['polyfill', 'local-search'])
|
||||
// 在PC端加载看板娘
|
||||
if(!/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
|
||||
bannerGirl.init('/resource/model.json');
|
||||
}
|
||||
});
|
||||
@ -69,13 +69,13 @@
|
||||
"text": ["去下一页看看吧"]
|
||||
},
|
||||
{
|
||||
"selector": ".waifu #live2d",
|
||||
"selector": ".banner #live2d",
|
||||
"text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！"]
|
||||
}
|
||||
],
|
||||
"click": [
|
||||
{
|
||||
"selector": ".waifu #live2d",
|
||||
"selector": ".banner #live2d",
|
||||
"text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"]
|
||||
}
|
||||
]
|
||||
Loading…
x
Reference in New Issue
Block a user