优化留言板，评论弹幕

templates/assets/js/halo.js

@@ -314,32 +314,7 @@ let halo = {
             ))
         }
         document.getElementById("danmuBtn").innerHTML = "<button class=\"hideBtn\" onclick=\"document.getElementById('danmu').classList.remove('hidedanmu')\">显示弹幕</button> <button class=\"hideBtn\" onclick=\"document.getElementById('danmu').classList.add('hidedanmu')\">隐藏弹幕</button>"
-    },
-    //关闭留言板评论弹幕
-    closeCommentBarrage: function () {
-        let commentBarrage = document.querySelector('.comment-barrage');
-        if (commentBarrage) {
-            if ($(".comment-barrage").is(":visible")) {
-                $(".comment-barrage").hide();
-                $(".menu-commentBarrage-text").text("显示热评");
-                document.querySelector("#consoleCommentBarrage").classList.remove("on");
-                localStorage.setItem('commentBarrageSwitch', 'false');
     }
-        }
-    },
-    //打开评论弹幕
-    openCommentBarrage: function () {
-        let commentBarrage = document.querySelector('.comment-barrage');
-        if (commentBarrage) {
-            if ($(".comment-barrage").is(":hidden")) {
-                $(".comment-barrage").show();
-                $(".menu-commentBarrage-text").text("关闭热评");
-                document.querySelector("#consoleCommentBarrage").classList.add("on");
-                localStorage.removeItem('commentBarrageSwitch');
-                btf.snackbarShow("✨ 已开启评论弹幕", false, 2000)
-            }
-        }
-    },
 
 
 }

templates/assets/js/heo.js

@@ -391,9 +391,23 @@ var heo = {
     },
 
     //滚动到指定id
-    scrollTo: function (id) {
-        var domTop = document.querySelector(id).offsetTop;
-        window.scrollTo(0, domTop - 80);
+    scrollTo: function(e) {
+        const t = document.getElementById(e);
+        if (t) {
+            const e = t.getBoundingClientRect().top + window.pageYOffset - 80
+                , o = window.pageYOffset
+                , n = e - o;
+            let a = null;
+            window.requestAnimationFrame((function e(t) {
+                    a || (a = t);
+                    const l = t - a
+                        , i = (c = Math.min(l / 0, 1)) < .5 ? 2 * c * c : (4 - 2 * c) * c - 1;
+                    var c;
+                    window.scrollTo(0, o + n * i),
+                    l < 600 && window.requestAnimationFrame(e)
+                }
+            ))
+        }
     },
 
     //隐藏侧边栏

templates/assets/libs/twikoo/commentBarrage.js

@@ -1,4 +1,5 @@
-var commentBarrageConfig = {
+if(GLOBAL_CONFIG.htmlType!='comments') {
+    var commentBarrageConfig = {
         //同时最多显示弹幕数
         maxBarrage: GLOBAL_CONFIG.source.twikoo.maxBarrage,
         //弹幕显示间隔时间ms
@@ -13,20 +14,20 @@ var commentBarrageConfig = {
         barrageList: [],
         barrageIndex: 0,
         dom: document.querySelector('.comment-barrage'),
-}
+    }
 
-var commentInterval = null;
-var hoverOnCommentBarrage = false;
+    var commentInterval = null;
+    var hoverOnCommentBarrage = false;
 
-$(".comment-barrage").hover(function () {
+    $(".comment-barrage").hover(function () {
         hoverOnCommentBarrage = true;
         //console.log("热评悬浮");
-}, function () {
+    }, function () {
         hoverOnCommentBarrage = false;
         //console.log("停止悬浮");
-});
+    });
 
-function initCommentBarrage() {
+    function initCommentBarrage() {
         //console.log("开始创建热评")
 
         var data = JSON.stringify({
@@ -60,9 +61,9 @@ function initCommentBarrage() {
                 removeCommentBarrage(commentBarrageConfig.barrageTimer.shift())
             }
         }, commentBarrageConfig.barrageTime)
-}
+    }
 
-function commentLinkFilter(data) {
+    function commentLinkFilter(data) {
         data.sort((a, b) => {
             return a.created - b.created;
         })
@@ -71,9 +72,9 @@ function commentLinkFilter(data) {
             newData.push(...getCommentReplies(item));
         });
         return newData;
-}
+    }
 
-function getCommentReplies(item) {
+    function getCommentReplies(item) {
         if (item.replies) {
             let replies = [item];
             item.replies.forEach(item => {
@@ -83,9 +84,9 @@ function getCommentReplies(item) {
         } else {
             return [];
         }
-}
+    }
 
-function popCommentBarrage(data) {
+    function popCommentBarrage(data) {
 
         let barrage = document.createElement('div');
         let width = commentBarrageConfig.dom.clientWidth;
@@ -94,29 +95,51 @@ function popCommentBarrage(data) {
         barrage.innerHTML = `
         <div class="barrageHead">
         <a class="barrageTitle
-        ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "barrageBloggerTitle" : ""}" href="#post-comment">
+        ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "barrageBloggerTitle" : ""}" href="javascript:heo.scrollTo('post-comment')">
         ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "博主" : "热评"}
         </a>
         <div class="barrageNick">${data.nick}</div>
         <img class="barrageAvatar" src="https://cravatar.cn/avatar/${data.mailMd5}"/>
         <a class="comment-barrage-close" href="javascript:heo.switchCommentBarrage()"><i class="haofont hao-icon-xmark"></i></a>
         </div>
-        <a class="barrageContent" href="#${data.id}">${data.comment}</a>
+        <a class="barrageContent" href="javascript:heo.scrollTo('${data.id}');">${data.comment}</a>
         `
+        // 获取hao标签内的所有pre元素
+        let haoPres = barrage.querySelectorAll(".barrageContent pre");
+
+        // 遍历每个pre元素，将其替换为"【代码】"
+        haoPres.forEach((pre) => {
+            let codePlaceholder = document.createElement("span");
+            codePlaceholder.innerText = "【代码】";
+            pre.parentNode.replaceChild(codePlaceholder, pre);
+        });
+
+        // 获取hao标签内的所有图片元素
+        let haoImages = barrage.querySelectorAll(".barrageContent img");
+
+        // 遍历每个图片元素，将其替换为"【图片】"，但排除带有class=tk-owo-emotion的图片
+        haoImages.forEach((image) => {
+            if (!image.classList.contains("tk-owo-emotion")) {
+                image.style.display = "none"; // 隐藏图片
+                let placeholder = document.createElement("span");
+                placeholder.innerText = "【图片】";
+                image.parentNode.replaceChild(placeholder, image);
+            }
+        });
         commentBarrageConfig.barrageTimer.push(barrage);
         commentBarrageConfig.dom.append(barrage);
-}
+    }
 
-function removeCommentBarrage(barrage) {
+    function removeCommentBarrage(barrage) {
         barrage.className = 'comment-barrage-item out';
         setTimeout(() => {
             commentBarrageConfig.dom.removeChild(barrage);
         }, 1000)
-}
+    }
 
 
 // 自动隐藏
-document.addEventListener('scroll', btf.throttle(function () {
+    document.addEventListener('scroll', btf.throttle(function () {
         //滚动条高度+视窗高度 = 可见区域底部高度
         var visibleBottom = window.scrollY + document.documentElement.clientHeight;
         //可见区域顶部高度
@@ -126,7 +149,7 @@ document.addEventListener('scroll', btf.throttle(function () {
         // 获取位置监测容器，此处采用评论区
         var eventlistner = document.getElementById('post-comment');
         if (eventlistner && pagination) {
-        var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2);
+            var centerY = eventlistner.offsetTop + 200;
             if (document.body.clientWidth > 768) {
                 if (centerY > visibleBottom) {
                     pagination.style.bottom = '0';
@@ -135,24 +158,25 @@ document.addEventListener('scroll', btf.throttle(function () {
                 }
             }
         }
-}, 200))
+    }, 200))
 
-initCommentBarrage();
+    initCommentBarrage();
 
-if (localStorage.getItem('commentBarrageSwitch') !== 'false') {
+    if (localStorage.getItem('commentBarrageSwitch') !== 'false') {
         $(".comment-barrage").show();
         $(".menu-commentBarrage-text").text("关闭热评");
         document.querySelector("#consoleCommentBarrage").classList.add("on");
 
-} else {
+    } else {
         $(".comment-barrage").hide();
         $(".menu-commentBarrage-text").text("显示热评");
         document.querySelector("#consoleCommentBarrage").classList.remove("on");
 
 
-}
+    }
 
 
-document.addEventListener('pjax:send', function () {
+    document.addEventListener('pjax:send', function () {
         clearInterval(commentInterval);
-});
+    });
+}

templates/comments.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title})}">
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'comments',title = ${singlePage.spec.title + ' | ' + site.title})}">
 
 <th:block th:fragment="content">
 
@@ -155,12 +155,8 @@
                         #strings.equals(theme.config.comments.use, 'Twikoo') &&
                         theme.config.envelope_comment.enable_danmu }">
                     <div id="danmuBtn">
-                        <button class="hideBtn"
-                                onclick="document.getElementById('danmu').classList.remove('hidedanmu')">显示弹幕</button>
-                        <button class="hideBtn"
-                                onclick="document.getElementById('danmu').classList.add('hidedanmu')">隐藏弹幕</button>
-                    </div>
 
+                    </div>
                     <div id="danmu">
                     </div>
 

templates/modules/layouts/layout.html

@@ -234,7 +234,6 @@
     if(document.querySelector('#danmu') &&
         document.body.clientWidth > 768 &&
         [[${theme.config.envelope_comment.enable_danmu}]]){
-        halo.closeCommentBarrage();
         halo.addScript("Danmaku", "[[${assets_link + '/libs/twikoo/easy-Danmaku.min.js'}]]", halo.danmu("[(${theme.config.comments.twikoos.envId})]","[(${theme.config.comments.twikoos.accessToken})]",[[${theme.config.envelope_comment.maxBarrage}]]))
     }