Valine Visitor Tag Beautify

修改步骤

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

   diff

    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)}))
    }
   
   

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

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

     diff

      # 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 魔改的版本

     diff

      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.min.css
     -     valine: https://npm.elemecdn.com/valine/dist/Valine.min.js
     +     valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
     
     

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