优化评论逻辑 ✅

src/scripts/Comment.ts

@@ -1,11 +1,22 @@
-import { LoadScript } from "../utils/index";
 import SITE_INFO from "../config";
+// 图片灯箱
+import "../../public/assets/js/view-image.min.js";
+declare const ViewImage: any;
+import { LoadScript } from "../utils/index";
 declare const twikoo: any;
+
+// 处理评论区数据
+const formateComment = () => {
+  // 图片灯箱
+  ViewImage && ViewImage.init(".vh-comment img:not(.tk-avatar-img)");
+  // 处理 URL
+  document.querySelectorAll('.vh-comment a[href="#"]').forEach(link => link.removeAttribute('href'));
+}
 // 初始化评论插件
 export default async () => {
   const commentDOM = '.vh-comment>section'
   if (!document.querySelector(commentDOM) || !SITE_INFO.Twikoo.envId) return;
   document.querySelector(commentDOM)!.innerHTML = '<section></section>'
   await LoadScript("https://registry.npmmirror.com/twikoo/1.6.41/files/dist/twikoo.all.min.js");
-  twikoo.init({ envId: SITE_INFO.Twikoo.envId, el: commentDOM })
+  twikoo.init({ envId: SITE_INFO.Twikoo.envId, el: commentDOM, onCommentLoaded: () => setTimeout(formateComment) })
 }

src/scripts/vhLazyImg.ts

@@ -1,4 +1,3 @@
-
 // 图片懒加载
 import LazyLoad from "vanilla-lazyload";
 

src/styles/Article.less

@@ -180,8 +180,8 @@ section.vh-container {
     // p标签样式
     // ul标签样式
     p,
-    ul:not(.vh-vhMusic ul),
-    ol:not(.vh-vhMusic ol) {
+    ul:not(.vh-vhMusic ul, .vh-comment ul),
+    ol:not(.vh-vhMusic ol, .vh-comment ol) {
       margin: 0;
       padding: 0.618rem 0;
       font-size: 0.9375rem;
@@ -211,8 +211,8 @@ section.vh-container {
       }
     }
 
-    ul:not(.vh-vhMusic ul),
-    ol:not(.vh-vhMusic ol) {
+    ul:not(.vh-vhMusic ul, .vh-comment ul),
+    ol:not(.vh-vhMusic ol, .vh-comment ol) {
       box-sizing: border-box;
       padding-left: 1.25rem;
       display: flex;

src/styles/components/Comment.less

@@ -12,6 +12,14 @@
   .twikoo {
     font-size: 0.88rem;
 
+    img:not(.tk-avatar-img) {
+      cursor: pointer;
+    }
+
+    a {
+      cursor: pointer;
+    }
+
     &:not(.tk-admin-container) {
 
       // p标签样式