valine

_config.yml

@@ -81,8 +81,8 @@ comments:
     js: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/js/Valine.min.js
     appId: # your appId
     appKey: # your appKey
-    placeholder: "温馨提示: 遵纪守法, 友善评论!"
-    requiredFields: [nick,mail]
+    placeholder:
+    requiredFields: [nick, mail]
     enableQQ: true # Unstable avatar link
     recordIP: false # Record commenter IP
     avatar: robohash # gravatar style https://valine.js.org/avatar
@@ -90,12 +90,15 @@ comments:
     lang: zh-cn
     highlight: true
     mathJax: false
-    tagMeta: [ 博主,小伙伴,访客 ] # 标签要显示的文字,默认'博主,小伙伴,访客'
-    metaPlaceholder: { nick: "昵称/QQ号(必填)", mail: "邮箱（必填，完全保密）", link: "网址(https://)" }
+    tagMeta: [博主, 小伙伴, 访客] # 标签要显示的文字,默认'博主,小伙伴,访客'
+    metaPlaceholder:
+      nick: "昵称/QQ号(必填)"
+      mail: "邮箱（必填，完全保密）"
+      link: "网址(https://)"
     master: #md5加密后的博主邮箱
-      - 6a565e6c47127afdd40d5d46089dxxxx
+      - 6783037F2DF30EAB99F9FC256157D875
     friends: #md5加密后的小伙伴邮箱
-      - d32d39c8e126512382ee4b831a8fxxxx # 某某
+      - 6783037F2DF30EAB99F9FC256157D875
 
 
 ######## Footer ########

source/css/_defines/theme.styl

@@ -11,9 +11,6 @@
   --card: $c-card-light
   --theme-highlight: darken($color-theme, 5)
   --theme-bg: mix($color-theme, $c-card-light, 10)
-  // 评论查看更多按钮样式
-  --valine-more-button-before: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 246, 246, .9))
-  --valine-more-button-after: rgba(246, 246, 246, .9)
 
 // 页面的dark主题
 body[theme='dark']
@@ -29,9 +26,6 @@ body[theme='dark']
   --card: $c-card-dark
   --theme-highlight: $color-theme
   --theme-bg: mix($color-theme, $c-card-dark, 10)
-  // 评论查看更多按钮样式
-  --valine-more-button-before: 0 0
-  --valine-more-button-after: #393c40
 
 // 系统的dark模式
 @media (prefers-color-scheme: dark)
@@ -48,6 +42,3 @@ body[theme='dark']
     --card: $c-card-dark
     --theme-highlight: $color-theme
     --theme-bg: mix($color-theme, $c-card-dark, 10)
-    // 评论查看更多按钮样式
-    --valine-more-button-before: 0 0
-    --valine-more-button-after: #393c40

source/css/_plugins/comments/valine.styl

@@ -1,4 +1,6 @@
 .cmt-body.valine
+  --more-before: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 246, 246, .9))
+  --more-after: rgba(246, 246, 246, .9)
   margin-top: 1rem
   #valine_container
     line-height: 1.5 !important
@@ -87,20 +89,18 @@
         position: relative
         .vcontent.expand
           &:before
-            background: var(--valine-more-button-before);
+            background: var(--more-before);
           &:after
-            background: var(--valine-more-button-after);
+            background: var(--more-after);
         .vimg
           width: 40px
           height: 40px
           z-index: 1
-          transition: all ease 1s
-          &:hover
-            transform: rotate(360deg)
         .vh
           margin-left: -46px
           padding-bottom: 0
           width: 100%
+          position: relative
           .vhead
             line-height: 1.2
             .vnick
@@ -113,6 +113,8 @@
             font-weight: 500
           .vat
             font-size: $fs-12
+          .vvisitor
+            display: none
       >.vcard
         border-radius: $border-block
         background: var(--card)
@@ -132,12 +134,10 @@
         padding: 0
         background: var(--block)
       .vhead
-        span
-          &.vnick
+        span.vnick
           color: var(--text-p2)
           cursor: default
-        a
-          &.vnick
+        a.vnick
           color: #ff9800
           font-weight: 700
           &:hover
@@ -145,13 +145,16 @@
         .vsys
           display: none
       .vmeta
+        position: static !important
         .vat
           font-weight: bold
           color: var(--text-p1)
-          float: right
-          trans()
+          background: var(--card)
           padding: 4px 8px
           border-radius: 2px
+          position: absolute
+          top: 0
+          right: 0
           &:hover
             color: $color-hover
             background-color: var(--block)
@@ -201,3 +204,14 @@
       color: var(--text-p1)
     p
       color: var(--text-p1)
+
+
+body[theme='dark']
+  .cmt-body.valine
+    --more-before: 0 0
+    --more-after: #393c40
+
+@media (prefers-color-scheme: dark)
+  .cmt-body.valine
+    --more-before: 0 0
+    --more-after: #393c40