feat:将留言板处valine留言改为弹幕形式

layout/contact.ejs

@@ -1,5 +1,26 @@
+<link rel="stylesheet" type="text/css" href="/css/style.css" />
+<link rel="stylesheet" type="text/css" href="/css/barrager.css">
+<script src="/libs/valine/av-min.js"></script>
+<script src="/libs/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="/js/jquery.barrager.js"></script>
+
 <%- partial('_partial/bg-cover') %>
 
+<style>
+ #send{
+ margin-bottom: 10px;
+ width: 49%;
+ background-color: #0ba360;
+ }
+ #clear{
+ margin-bottom: 10px;
+ width: 49%;
+ background-color: #e7c65c;
+ }
+ p{
+ text-align: center;
+ }
+</style>
 <main class="content">
  <div id="contact" class="container chip-container">
  <div class="card">
@@ -9,34 +30,131 @@
  </div>
  <%- page.content %>
  </div>
+ <!--valine评论弹幕-->
+ <% if (theme.valine && theme.valine.enable) { %>
+ <p>
+ <b>畅所欲言</b><br>
+ <b>在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链</b><br>
+ <b>友链信息</b><br>
+ <b>博客名称: <%- config.title %></b><br>
+ <b>博客网址: <%- config.url %></b><br>
+ <b>博客头像: <%- config.url %>/medias/logo.png</b><br>
+ <b>博客介绍: 犹豫就会败北</b><br>
+ </p>
+ <div class="container">
+ <section id="custom" class="bb-section">
+ <div class="row">
+ <div class="col-md-5">
+ <form class="form-inline">
+ <div class="form-group">
+ 文字：<input class="form-control" name="info" type="text" placeholder="hello, world"/>
+ </div>
+ <div class="form-group">
+ 链接：<input class="form-control" name="href" type="text" placeholder="https://github.com/blinkfox/hexo-theme-matery"/>
+ </div>
+ <div class="form-group">
+ 速度：<input class="form-control" name="speed" type="text" placeholder="5~20" value="16" />
+ </div>
+ </form>
+ <div class="form-group">
+ <button id="send" class="btn" onclick="run()">留言</button>
+ <button id="clear" class="btn " onclick="clear_barrage()"> 清除</button>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <script type="text/javascript">
+ AV.init({
+ appId: '<%- theme.valine.appId %>',
+ appKey: '<%- theme.valine.appKey %>'
+ });
+
+ $(function() {
+ do_barrager();
+ async function do_barrager() {
+ let lists = [];
+ //查询弹幕
+ const query = new AV.Query('barrager');
+ const barrager = await query.find().then((barrager) => {
+ lists = barrager;
+ })
+ let length = lists.length;
+ let index = 0;
+ const timer = setInterval(() => {
+ if (index === length) {
+ clearInterval(timer);
+ do_barrager()
+ } else {
+ let obj = lists[index]
+ let jsonObject = eval('(' + JSON.stringify(obj) + ')');
+ $('body').barrager({
+ 'img': '/medias/barrager/' + Math.floor(Math.random() * 3) + ".png",
+ 'href': jsonObject.href,
+ 'info': jsonObject.info,
+ 'speed': jsonObject.speed
+ });
+ index++;
+ }
+ }, 500)
+ }
+ });
+
+ //发送弹幕
+ function run(){
+ let info = $('input[name=info]').val();
+ (info === '' ) ? info='hello world' : info=info;
+ let href = $('input[name=href]').val();
+ (href === '' ) ? href='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/blinkfox/hexo-theme-matery' : href=href;
+ let speed = parseInt($('input[name=speed]').val());
+ if(speed > 20 || speed < 5)
+ speed = Math.floor(Math.random() * 10) + 5;
+ const Barrager = AV.Object.extend('barrager');
+ const barrager = new Barrager();
+ barrager.set('href', href);
+ barrager.set('info', info);
+ barrager.set('speed', speed);
+ barrager.save().then((todo) => {
+ $(" input[ name='info' ] ").val("")
+ $(" input[ name='href' ] ").val("")
+ $(" input[ name='speed' ] ").val("")
+ });
+ }
+
+ function clear_barrage()
+ {
+ $.fn.barrager.removeAll();
+ }
+
+ </script>
+ <% } %>
  </div>
+
+ <!--其他评论card-->
  <div class="card">
  <% if (theme.gitalk && theme.gitalk.enable) { %>
- <%- partial('_partial/gitalk') %>
+  <%- partial('_partial/gitalk') %>
  <% } %>
 
  <% if (theme.gitment.enable) { %>
- <%- partial('_partial/gitment') %>
+  <%- partial('_partial/gitment') %>
  <% } %>
 
  <% if (theme.disqus.enable) { %>
- <%- partial('_partial/disqus') %>
+  <%- partial('_partial/disqus') %>
  <% } %>
 
  <% if (theme.livere && theme.livere.enable) { %>
- <%- partial('_partial/livere') %>
- <% } %>
-
- <% if (theme.valine && theme.valine.enable) { %>
- <%- partial('_partial/valine') %>
+ <%- partial('_partial/livere') %>
  <% } %>
 
  <% if (theme.minivaline && theme.minivaline.enable) { %>
- <%- partial('_partial/minivaline') %>
+  <%- partial('_partial/minivaline') %>
  <% } %>
 
  <% if (theme.twikoo && theme.twikoo.enable) { %>
- <%- partial('_partial/twikoo') %>
+  <%- partial('_partial/twikoo') %>
  <% } %>
 
  <% if (theme.changyan && theme.changyan.enable) { %>

source/css/barrager.css

@@ -0,0 +1,81 @@
+.barrage {
+ position: fixed;
+ bottom: 70px;
+ right: -500px;
+ display: inline-block;
+ width: 500px;
+ z-index: 99999
+}
+
+.barrage_box {
+ background-color: rgba(0, 0, 0, .5);
+ padding-right: 8px;
+ height: 40px;
+ display: inline-block;
+ border-radius: 25px;
+ transition: all .3s;
+}
+
+.barrage_box .portrait {
+ display: inline-block;
+ margin-top: 4px;
+ margin-left: 4px;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.barrage_box .portrait img {
+ width: 100%;
+ height: 100%;
+}
+
+.barrage_box div.p a {
+ margin-right: 2px;
+ font-size: 14px;
+ color: #fff;
+ line-height: 40px;
+ margin-left: 18px;
+}
+
+.barrage_box div.p a:hover {
+ text-decoration: underline;
+}
+
+.barrage_box .close {
+ visibility: hidden;
+ opacity: 0;
+ text-align: center;
+ width: 25px;
+ height: 25px;
+ margin-left: 20px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, .1);
+ margin-top: 8px;
+ background-image: url(/medias/barrager/close.png);
+}
+
+.barrage_box:hover .close {
+ visibility: visible;
+ opacity: 1;
+}
+
+.barrage_box .close a {
+ display: block;
+}
+
+.barrage_box .close .icon-close {
+ font-size: 14px;
+ color: rgba(255, 255, 255, .5);
+ display: inline-block;
+ margin-top: 5px;
+}
+
+.barrage .z {
+ float: left !important;
+}
+
+.barrage a {
+ text-decoration: none;
+}

source/js/jquery.barrager.js

@@ -0,0 +1,83 @@
+/**
+ *@name jquery.barrager.js
+ *@version 1.1
+ *@author [email protected]
+ *@url https://github.com/yaseng/jquery.barrager.js
+ */
+(function($) {
+ $.fn.barrager = function(barrage) {
+ barrage = $.extend({
+ close: true,
+ max: 10,
+ speed: 16,
+ color: '#ffffff',
+ }, barrage || {});
+
+ const time = new Date().getTime();
+ const barrager_id = 'barrage_' + time;
+ const id = '#' + barrager_id;
+ const div_barrager = $("<div class='barrage' id='" + barrager_id + "'></div>").appendTo($(this));
+ const this_height = $(window).height() * 0.35;
+ const this_width = $(window).width() + 100;
+ const array = [
+ (this_height / 5) + $(window).height() * 0.5,
+ 2*(this_height / 5) + $(window).height() * 0.5,
+ 3*(this_height / 5) + $(window).height() * 0.5,
+ 4*(this_height / 5) + $(window).height() * 0.5,
+ 5*(this_height / 5) + $(window).height() * 0.5
+ ]
+ const bottom =array[Math.floor(Math.random()*5)];
+
+ div_barrager.css("bottom", bottom + "px");
+ div_barrager_box = $("<div class='barrage_box cl'></div>").appendTo(div_barrager);
+ if(barrage.img){
+ div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");
+ const img = $("<img src='' >").appendTo(id + " .barrage_box .portrait");
+ img.attr('src', barrage.img);
+ }
+ div_barrager_box.append(" <div class='z p'></div>");
+ if(barrage.close){
+ div_barrager_box.append(" <div class='close z'></div>");
+ }
+
+ const content = $("<a title='' href='' target='_blank'></a>").appendTo(id + " .barrage_box .p");
+ content.attr({
+ 'href': barrage.href,
+ 'id': barrage.id
+ }).empty().append(barrage.info);
+ content.css('color', barrage.color);
+
+ const i = 0;
+ div_barrager.css('margin-right', 0);
+
+ $(id).animate({right:this_width},barrage.speed*1000,function()
+ {
+ $(id).remove();
+ });
+
+ div_barrager_box.mouseover(function()
+ {
+ $(id).stop(true);
+ });
+
+ div_barrager_box.mouseout(function()
+ {
+ $(id).animate({right:this_width},barrage.speed*1000,function()
+ {
+ $(id).remove();
+ });
+ });
+
+ $(id+'.barrage .barrage_box .close').click(function()
+ {
+ $(id).remove();
+ })
+ }
+
+
+ $.fn.barrager.removeAll=function()
+ {
+ $('.barrage').remove();
+ }
+
+})(jQuery);