Valine Visitor Tag Beautify

Valine评论添加[博主,小伙伴,访客]标签

参考内容：HCLonely：Valine 添加验证码、博主标签及评论微信、QQ 通知
改动范围：极简化了赋值过程，避免因开启pjax后，在切换页面时反复声明变量导致的bug。

Valine已经很久没有更新了，而且leancloud实在称不上稳定。后台也需要另外配置。时不时的还会遇到leancloud休眠。相比之下，后起之秀waline和twikoo都有自带后台管理评论和邮件通知。这是本帖最后一次更新。之后若再因为butterfly源码变动。本帖一概不理会。有需求的可以自行研究。

修改步骤

打开[Blogroot]\themes\butterfly\layout\includes\third-party\comments\valine.pug,按指示添加如下字段。

      serverURLs: '#{theme.valine.serverURLs}',
      emojiCDN: '#{theme.valine.emojiCDN}',
      emojiMaps: !{emojiMaps},
      enableQQ: #{theme.valine.enableQQ},
      path: window.location.pathname,
+     master: '#{theme.valine.master}'.split(','),
+     friends: '#{theme.valine.friends}'.split(','),
+     tagMeta: '#{theme.valine.tagMeta || "博主,小伙伴,访客"}'.split(',')
    }

打开[Blogroot]\_config.butterfly.yml,

在valine配置项添加如下内容。
md5加密可以使用在线转码，务必使用32位[小]进行转码。

    # valine
    # https://valine.js.org
    valine:
      appId:  # leancloud application app id
      appKey:  # leancloud application app key
      pageSize: 10 # comment list page size
      avatar: monsterid # gravatar style https://valine.js.org/#/avatar
      lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
      placeholder:  # valine comment input placeholder (like: Please leave your footprints)
      guest_info: nick,mail,link # valine comment header info (nick/mail/link)
      recordIP: false # Record reviewer IP
      serverURLs: https://???????.api.lncldglobal.com # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
      bg: # valine background
      emojiCDN:  # emoji CDN
      enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
      requiredFields: nick,mail # required fields (nick/mail)
+     master: # md5加密后的博主邮箱
+       - d4e7????4d361ad7????44a14e9e2a94  #可添加多个
+     friends: # md5加密后的小伙伴邮箱
+       - 5c?????bfe6rfc72a????e268ad3819c #可添加多个
+       - 7c?????bfe65fc02a????e2????3919c
+     tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'

在CDN配置项添加如下内容。将Valine.min.js替换成HCLonely魔改的版本

    CDN:
      # main
      main_css: /css/index.css
      jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
      main: /js/main.js
      utils: /js/utils.js
      # pjax
      pjax: https://npm.elemecdn.com/pjax/pjax.min.js
      # comments
      gitalk: https://npm.elemecdn.com/gitalk@latest/dist/gitalk.min.js
      gitalk_css: https://npm.elemecdn.com/gitalk/dist/gitalk.css
-     valine: https://npm.elemecdn.com/valine/dist/Valine.min.js
+     valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

以上步骤完成后，已经可以看到实现效果了。更多内容还请自行下载Valine.min.js源码进行修改。

打开[Blogroot]\themes\butterfly\layout\includes\third-party\comments\valine.pug,按指示添加如下字段。

  script.
    function loadValine () {
      function initValine () {
        const valine = new Valine(Object.assign({
          el: '#vcomment',
          appId: '#{theme.valine.appId}',
          appKey: '#{theme.valine.appKey}',
          placeholder: '#{theme.valine.placeholder}',
          avatar: '#{theme.valine.avatar}',
          meta: '#{theme.valine.guest_info }'.split(','),
          pageSize: '#{theme.valine.pageSize}',
          lang: '#{theme.valine.lang}',
          recordIP: #{theme.valine.recordIP},
          serverURLs: '#{theme.valine.serverURLs}',
          emojiCDN: '#{theme.valine.emojiCDN}',
          emojiMaps: !{emojiMaps},
          enableQQ: #{theme.valine.enableQQ},
          path: window.location.pathname,
+         master: '#{theme.valine.master}'.split(','),
+         friends: '#{theme.valine.friends}'.split(','),
+         tagMeta: '#{theme.valine.tagMeta || "店长,小伙伴,访客"}'.split(','),
          requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],
          visitor: #{theme.valine.visitor}
        }, !{JSON.stringify(theme.valine.option)}))
      }

打开[Blogroot]\_config.butterfly.yml,

在valine配置项添加如下内容。
md5加密可以使用在线转码，务必使用32位[小]进行转码。

    # valine
    # https://valine.js.org
    valine:
      appId:  # leancloud application app id
      appKey:  # leancloud application app key
      pageSize: 10 # comment list page size
      avatar: monsterid # gravatar style https://valine.js.org/#/avatar
      lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
      placeholder:  # valine comment input placeholder (like: Please leave your footprints)
      guest_info: nick,mail,link # valine comment header info (nick/mail/link)
      recordIP: false # Record reviewer IP
      serverURLs: https://???????.api.lncldglobal.com # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
      bg: # valine background
      emojiCDN:  # emoji CDN
      enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
      requiredFields: nick,mail # required fields (nick/mail)
+     master: # md5加密后的博主邮箱
+       - d4e7????4d361ad7????44a14e9e2a94  #可添加多个
+     friends: # md5加密后的小伙伴邮箱
+       - 5c?????bfe6rfc72a????e268ad3819c #可添加多个
+       - 7c?????bfe65fc02a????e2????3919c
+     tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'
      option:

在CDN配置项添加如下内容。将Valine.min.js替换成HCLonely魔改的版本

    CDN:
      # main
      main_css: /css/index.css
      jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
      main: /js/main.js
      utils: /js/utils.js
      # pjax
      pjax: https://npm.elemecdn.com/pjax/pjax.min.js
      # comments
      gitalk: https://npm.elemecdn.com/gitalk@latest/dist/gitalk.min.js
      gitalk_css: https://npm.elemecdn.com/gitalk/dist/gitalk.css
-     valine: https://npm.elemecdn.com/valine/dist/Valine.min.js
+     valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js