增加弹幕功能

themes/Ying/layouts/_default/about.html

@@ -1,36 +1,5 @@
 {{ define "main" }}
 <div id="pjax-container">
-  <h2 id="">留言板 </h2>
-        <div id="qm_con_body">
-          <div id="mailContentContainer" class="qmbox qm_con_body_content qqmail_webmail_only" style="opacity: 1;">
-            <div class="container g-width" style="height: 458.667;margin-top: 0px;">
-              <header class="date g-width g-inline-center">
-                <time> <span class="uk-visible@s">评论于<a href="">《》</a></span></time>
-              </header>
-              <section class="dialog g-width g-clear-both">
-
-                  <div class="bubble g-right reply">
-                    <a href="" target="_blank" rel="noopener" style="color: inherit;text-decoration: none;">
-                      <div style="text-align: right;line-height: 2rem;font-size: 11px;color:#727272"></div>
-                    </a>
-                    <span class="bubble-text g-left reply-text"></span>
-                    <img class="bubble-avatar g-right" src="" loading="lazy" draggable="false" no-view>
-                  </div>
-
-                  <div class="bubble g-left message">
-                    <a href="" target="_blank" rel="noopener" style="color: inherit;text-decoration: none;">
-                      <div style="line-height: 2rem;font-size: 11px;color:#727272"></div>
-                    </a>
-                    <img class="bubble-avatar g-left" src="" loading="lazy" draggable="false" no-view>
-                    <span class="bubble-text g-right message-text"></span>
-                  </div>
-
-              </section>
-            </div>
-          </div>
-        </div>
-
-
     <div class="post-content" itemprop="articleBody">
       {{ .Content }}
     </div>

themes/Ying/layouts/_default/single.html

@@ -22,5 +22,60 @@
         <!-- 评论区内容 -->
         <div id="waline"></div>
     </div>
+
+    <script type="text/javascript">
+        $(document).ready(function() {
+            // 获取当前页面的路径
+            var currentPath = "{{ .RelPermalink }}";
+    
+            // 动态获取评论并发布弹幕
+            $.ajaxSettings.async = false;
+            $.getJSON('https://waline.usj.cc/api/comment?path=' + encodeURIComponent(currentPath), function(response) {
+                var data = response.data.data;
+                console.log(data);
+                // 每条弹幕发送间隔
+                var looper_time = 3 * 1000;
+                var items = data;
+                // 弹幕总数
+                var total = items.length;
+                // 是否首次执行
+                var run_once = true;
+                // 弹幕索引
+                var index = 0;
+                // 先执行一次
+                barrager();
+    
+                function barrager() {
+                    if (run_once) {
+                        // 如果是首次执行, 则设置一个定时器, 并且把首次执行置为 false
+                        looper = setInterval(barrager, looper_time);
+                        run_once = false;
+                    }
+                  
+                    // 转换数据为弹幕所需的格式
+                    var item = {
+                        img: items[index].avatar || 'static/default-avatar.png', // 头像
+                        info: items[index].orig || 'No comment', // 评论内容
+                        href: items[index].link || '#', // 用户链接
+                        close: true, // 显示关闭按钮
+                        speed: 6, // 延迟,单位秒,默认6
+                        color: '#fff', // 颜色,默认白色
+                        old_ie_color: '#000000' // ie低版兼容色,不能与网页背景相同,默认黑色
+                    };
+                  
+                    // 发布一个弹幕
+                    $('body').barrager(item);
+                    // 索引自增
+                    index++;
+                    // 所有弹幕发布完毕，清除计时器
+                    if (index == total) {
+                        clearInterval(looper);
+                        return false;
+                    }
+                }
+            });
+        });
+    </script>
+
 </div>
 {{ end }}

themes/Ying/layouts/partials/footer.html

@@ -3,12 +3,12 @@
         © 2019 - {{ now.Year }}
         <br>
         <a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
-        <br>
+        {{/*  <br>
         本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
             style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
             <span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
         </a>提供CDN加速服务
-        <br>
+        <br>  */}}
     </nav>
 </div>
 </div>

themes/Ying/layouts/partials/head.html

@@ -9,7 +9,9 @@
   <link rel="stylesheet" href="/css/uikit.min.css">
   <link rel="stylesheet" href="/css/nprogress.min.css">
   <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
+  <link rel="stylesheet" href="https://usj.cc/usr/themes/Ying/css/barrager.css">
   <script src="/js/jquery.min.js"></script>
+  <script src="https://usj.cc/usr/themes/Ying/js/jquery.barrager.js"></script>
   <script src="/js/jquery.scrollUp.min.js"></script>
   <script src="/js/pjax.js"></script>
   <script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>