优化留言板，评论弹幕

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,3 +1,4 @@
+if(GLOBAL_CONFIG.htmlType!='comments') {
     var commentBarrageConfig = {
         //同时最多显示弹幕数
         maxBarrage: GLOBAL_CONFIG.source.twikoo.maxBarrage,
@@ -94,15 +95,37 @@ 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);
     }
@@ -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';
@@ -156,3 +179,4 @@ if (localStorage.getItem('commentBarrageSwitch') !== 'false') {
     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}]]))
     }