valine 优化 (#7)

* valine style 优化

* valine 优化

Co-authored-by: XiaoXuxuy <v_xuxu@baidu.com>

_config.yml

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

source/css/_defines/theme.styl

@@ -11,6 +11,9 @@
   --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)
 
 body[theme='dark']
   --site-bg: $c-site-bg-dark
@@ -25,3 +28,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

source/css/_plugins/comments/valine.styl

@@ -23,6 +23,8 @@
         border-bottom: 1px dashed var(--text-meta)
         .vinput
           border: none
+        .vnick
+          margin-left: 0;
       .vedit
         .vicon
           height: 22px
@@ -83,9 +85,18 @@
       .vcard
         display: flex
         position: relative
+        .vcontent.expand
+          &:before
+            background: var(--valine-more-button-before);
+          &:after
+            background: var(--valine-more-button-after);
         .vimg
-          width: 36px
-          height: 36px
+          width: 40px
+          height: 40px
+          z-index: 1
+          transition: all ease 1s
+          &:hover
+            transform: rotate(360deg)
         .vh
           margin-left: -46px
           padding-bottom: 0
@@ -108,6 +119,8 @@
         border: 1px dashed var(--block-border)
         padding: 1rem
         margin-bottom: 1rem
+        &:hover
+          border-color: $color-theme;
         >.vh
           border-bottom: none
           >.vquote
@@ -135,7 +148,7 @@
         .vat
           font-weight: bold
           color: var(--text-p1)
-          float: none
+          float: right
           trans()
           padding: 4px 8px
           border-radius: 2px
@@ -153,8 +166,10 @@
           border-left: 3px solid $color-theme
         code
           color: var(--text-p1)
+          background: var(--block);
+          margin: 0 2px;
         pre
-          background: var(--color-codeblock)
+          background: var(--block)
           code
             border: none
         a