看板娘优化

themes/hexo-theme-xups/layout/_partial/post/comment.ejs

@@ -1,69 +1,6 @@
 <% if (theme.comment.enable) { %>
   <%- js('js/comment') %>
-  <div id="comments" class="comment">
+  <div id="comments" class="comment"></div>
-    <!--
-    <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>
   <script>
   JELON.Comment({
     container: 'comments',

themes/hexo-theme-xups/layout/layout.ejs

@@ -10,8 +10,8 @@
   <!-- 博客头部 -->
   <%- partial('_partial/header') %>
   <!-- 看板娘 -->
-  <div class="waifu">
+  <div class="banner">
-    <div class="waifu-tips"></div>
+    <div class="banner-tips"></div>
     <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
   </div>
   <!-- 博客正文 -->

themes/hexo-theme-xups/source/css/_partial/banner.styl

@@ -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 

themes/hexo-theme-xups/source/js/banner-girl.js

@@ -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;
+	tipTimer = setTimeout(function(){
-	// $tips.stop().css('opacity',1);
-	// $tips.delay(timeout).fadeTo(200, 0);
-	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){
+		for(var eventName in res.data) {
-			var mouseenterTrigger = createTrigger(tips);
+			res.data[eventName].forEach(function(tips){
-			document.querySelectorAll(tips.selector).forEach(function(item){
+				Array.prototype.forEach.call(document.querySelectorAll(tips.selector),function(item){
-				item.addEventListener("mouseenter", mouseenterTrigger);
+					item.addEventListener(eventName, createTrigger(tips));
-			})
+				});
-		});
+			});
-		res.data.click.forEach(function(tips){
+		}
-			var clickTrigger = createTrigger(tips);
-			document.querySelectorAll(tips.selector).forEach(function(item){
-				item.addEventListener("click", clickTrigger);
-			})
-		});
 	});
 }
 
@@ -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 {
-return function(){
+	/**
-	//加载看板娘模型
+	 * 加载看板娘模型
-	axios.get('/resource/model.json').then(function(res){
+	 * @param {Sting} modelUrl 模板的json描述文件路径
-		var randomIndex = Math.floor(Math.random() * res.data.textures.length);
+	 */
-		//随机皮肤
+	init: function(modelUrl){
-		if(window.location.href.startsWith('http://localhost') || ("ActiveXObject" in window)) {
+		axios.get(modelUrl).then(function(res){
-			//本地开发调试或者是IE浏览器
+			var randomIndex = Math.floor(Math.random() * res.data.textures.length);
-			res.data.textures = ['/resource/model/skin/'+res.data.textures[randomIndex]];
+			//随机皮肤
-		} else {
+			if(window.location.href.startsWith('http://localhost') || ("ActiveXObject" in window)) {
-			//服务器部署运行(使用网易蜂巢对象存储)
+				//本地开发调试或者是IE浏览器
-			res.data.textures = ['https://blog-cdn.nos-eastchina1.126.net/live2D/'+res.data.textures[randomIndex]];
+				res.data.textures = ['/resource/model/skin/'+res.data.textures[randomIndex]];
-		}
+			} else {
-		loadlive2d('live2d', '/resource/', '', res.data);
+				//服务器部署运行(使用网易蜂巢对象存储)
-		// loadlive2d("live2d", "/resource/model.json");
+				res.data.textures = ['https://blog-cdn.nos-eastchina1.126.net/live2D/'+res.data.textures[randomIndex]];
-	});
+			}
-	// 定时显示"一言"
+			loadlive2d('live2d', '/resource/', '', res.data);
-	setTimeout(getHitokoto, 10000);
+			// loadlive2d("live2d", "/resource/model.json");
-	// 按照json当中的配置给页面元素绑定事件
+		});
-	bindElementEvent("/resource/waifu-tips.json");
+		// 定时显示"一言"
-	showMessage(text, 6000);
+		setTimeout(getHitokoto, 10000);
+		// 按照json当中的配置给页面元素绑定事件
+		bindElementEvent("/resource/banner-tips.json");
+		showMessage(text, 6000);
+	},
+	showMessage: showMessage
 }
 });

themes/hexo-theme-xups/source/js/comment.js

@@ -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: {

themes/hexo-theme-xups/source/js/main.js

@@ -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;
 	})();
-	// 加载看板娘
+	// 在PC端加载看板娘
-	loadBannerGirl();
+	if(!/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
-});
+		bannerGirl.init('/resource/model.json');
-require(['polyfill', 'local-search'])
+	}
+});

themes/hexo-theme-xups/source/resource/banner-tips.json

@@ -69,13 +69,13 @@
 				"text": ["去下一页看看吧"]
 		},
 		{
-				"selector": ".waifu #live2d",
+				"selector": ".banner #live2d",
 				"text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！"]
 		}
 	],
 	"click": [
 		{
-			"selector": ".waifu #live2d",
+			"selector": ".banner #live2d",
 			"text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"]
 		}
 	]