增加弹幕功能

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