feat: Valine comment plugin add author badge

layout/_partial/comments/valine.ejs

@@ -16,7 +16,24 @@
                 enableQQ: true,
                 placeholder: '<%= theme.comments.valine.placeholder %>',
                 lang: '<%= config.language %>'.toLowerCase()
-            })
+            });
+
+
+            // Valine 评论列表增加"作者"标识
+            const getValineDomTimer = setInterval(() => {
+                const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
+                if (vcards.length > 0) {
+                    for (let vcard of vcards) {
+                        const vnick = vcard.querySelector('.vhead .vnick');
+                        if (vnick.innerHTML.toLocaleLowerCase() === '<%= config.author %>'.toLocaleLowerCase()) {
+                            vcard.classList.add('author');
+                        }
+                    }
+                    clearInterval(getValineDomTimer);
+                } else {
+                    clearInterval(getValineDomTimer);
+                }
+            }, 2000);
         </script>
     </div>
 <% } %>

source/css/layout/_partial/comments/valine.styl

@@ -69,7 +69,28 @@
 
     .vcard {
 
+      // author
+
+      &.author {
+        .vnick {
+          font-weight: bold;
+
+          &::after {
+            font-weight: 500;
+            font-size: 12px;
+            content: '博主';
+            padding: 2px;
+            background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
+            background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
+            color: #fff;
+            margin-left: 5px;
+            border-radius: 2px;
+          }
+        }
+      }
+
       .vhead {
+
         .vnick {
           color: var(--primary-color);
         }
@@ -100,4 +121,4 @@
   }
 
 
-}
+}

source/js/main.js

@@ -1,3 +1,3 @@
 window.addEventListener('DOMContentLoaded', () => {
     console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`);
-});
+});