hexo-theme-indigo搭建Valine评论以及美化

indigo主题搭建Valine评论以及美化

1. indigo主题搭建Valine后台评论系统

Valine是基于Leancloud开发完成的，因此我们需要先注册一个Leadcloud的账号。

Leadcloud官网，点我注册

• 先注册；注册的时候需要身份验证和邮箱验证。
• 创建一个应用，名称可以随意起，不过我们还是规范些。
• 然后 进入应用->设置->应用key，获取你的 appid 和 appkey。

进入应用

• 打开Indigo主题配置文件_config.yml，找到valine部分，在appId和appKey填写上次获取到的。

# Valine Comment system. https://valine.js.org
valine:
  enable: true # 如果你想使用valine，请将值设置为 true
  appId:  # your leancloud appId
  appKey:  # your leancloud appKey
  notify: false # Mail notify
  verify: false # Verify code
  avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  placeholder: 快来评论吧~ # Comment Box placeholder
  guest_info: nick,mail,link # Comment header info
  pageSize: 5 # comment list page size

• 请填写应用>设置>安全设置中的Web 安全域名

image-20200612151347788

• 至此就完全配置完成了

hexo cl
hexo g
hexo s # 查看效果

• 看一眼效果（placeholder属性我改过了）

  

2. Indigo主题Valine的简单美化

不得不说，作者不太会html和css，作为一个前端门外汉，只能简简单单地美化一下；所以在这里我只简单说一下美化的步骤，熟练的小伙伴可以自己尝试尝试。

打开\themes\indigo\layout\_partial\plugins\valine.ejs所在文件，这就是评论区的配置。

关于基础的配置，不再赘述，大家可以参考Valine官网。

2.1 Valine配置BiliBili表情包

Valine配置BiliBili表情包

new Valine({
            el: '#comments',
            notify: '<%= theme.valine.notify %>' == 'true',
            verify: '<%= theme.valine.verify %>' == 'true',
            appId: "<%= theme.valine.appId %>",
            appKey: "<%= theme.valine.appKey %>",
            avatar: "<%= theme.valine.avatar %>",
            placeholder: "<%= theme.valine.placeholder %>",
            guest_info: guest_info.length == 0 ? GUEST_INFO : guest_info,
            pageSize: "<%= theme.valine.pageSize %>",
            
            // 设置Bilibili表情包地址
            emojiCDN: '//i0.hdslb.com/bfs/emote/', 
            // 表情title和图片映射
            emojiMaps: {
            "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
            "tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
            "tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
            "tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
            "tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
            "tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
            "tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
            "tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
            "tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
            "tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
            "tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
            "tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
            "tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
            "tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
            "tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
            "tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
            "tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
            "tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
            "tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
            "tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
            "tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
            "tv_打脸": "56ab10b624063e966bfcb76ea5dc4794d87dfd47.png",
            "tv_抓狂": "fe31c08edad661d63762b04e17b8d5ae3c71a757.png",
            "tv_抠鼻": "c666f55e88d471e51bbd9fab9bb308110824a6eb.png",
            "tv_斜眼笑": "911f987aa8bc1bee12d52aafe62bc41ef4474e6c.png",
            "tv_无奈": "ea8ed89ee9878f2fece2dda0ea8a5dbfe21b5751.png",
            "tv_晕": "5443c22b4d07fb1907ccc610c8e6db254f2461b7.png",
            "tv_流汗": "cead1c351ab8d79e9f369605beb90148db0fbed3.png",
            "tv_流泪": "7e71cde7858f0cd50d74b0264aa26db612a8a167.png",
            "tv_流鼻血": "c32d39db2737f89b904ca32700d140a9241b0767.png",
            "tv_点赞": "f85c354995bd99e28fc76c869bfe42ba6438eff4.png",
            "tv_生气": "26702dcafdab5e8225b43ffd23c94ac1ff932654.png",
            "tv_生病": "8b0ec90e6b86771092a498c54f09fc94621c1900.png",
            "tv_疑问": "0793d949b18d7be716078349c202c15ff166f314.png",
            "tv_白眼": "c1d59f439e379ee50eef488bcb5e5378e5044ea4.png",
            "tv_皱眉": "72ccad6679fea0d14cce648b4d818e09b8ffea2d.png",
            "tv_目瞪口呆": "0b8cb81a68de5d5365212c99375e7ace3e7891b7.png",
            "tv_睡着": "8b196675b53af58264f383c50ad0945048290b33.png",
            "tv_笑哭": "1abc628f6d4f4caf9d0e7800878f4697abbc8273.png",
            "tv_腼腆": "89712c0d4af73e67f89e35cbc518420380a7f6f4.png",
            "tv_色": "61822c7e9aae5da76475e7892534545336b23a6f.png",
            "tv_调侃": "4bc022533ef31544ca0d72c12c808cf4a1cce3e3.png",
            "tv_调皮": "b9c41de8e82dd7a8515ae5e3cb63e898bf245186.png",
            "tv_鄙视": "6e72339f346a692a495b123174b49e4e8e781303.png",
            "tv_闭嘴": "c9e990da7f6e93975e25fd8b70e2e290aa4086ef.png",
            "tv_难过": "87f46748d3f142ebc6586ff58860d0e2fc8263ba.png",
            "tv_馋": "fc7e829b845c43c623c8b490ee3602b7f0e76a31.png",
            "tv_鬼脸": "0ffbbddf8a94d124ca2f54b360bbc04feb6bbfea.png",
            "tv_黑人问号": "45821a01f51bc867da9edbaa2e070410819a95b2.png",
            "tv_鼓掌": "1d21793f96ef4e6f48b23e53e3b9e42da833a0f6.png"
                // ... 更多表情
            }
        })

2.2 Valine评论区添加背景图片

<!-- 评论框美化 -->
<style>
    .v .vwrap .vedit{
        <!-- 这里可以直接使用自定义链接，也可以在主题配置文件中添加项 -->
        <!--
        valine:
          bg: https://gitee.com/cungudafa/source/raw/master/img/gif/Sitich/Sitich30.gif
        -->
        background: url("<%= theme.valine.bg %>"); 
        background-repeat: no-repeat;
        background-position: right;
    }
</style>

演示效果

Valine添加背景图片

2.3 Valine简单美化（按钮，表头）

<style> {
    .v .vwrap .vheader{
        background: #fff7f7f7;
    }
    .v .vbtn.vsubmit{
        border-radius: 30px;
        padding: 0;
        color: #111; 
        line-height: 44px;
        width:30%;
        background:#ff9999;
        color: #fff;
        line-height: 2;
        font-weight: bolder;
        border: 1px solid #e9eff3;
        padding: .4em .5em;
    }
</style>

演示效果

美化效果

简单介绍到这里，有前端大神可以在评论区留下您的美化效果~