开始之前我会先介绍下什么是Valine、Valine弊端，然后我会给出前端强制输入昵称和邮箱的方法（jquery）和 Valine 模仿 gitalk 的css样式。

什么是Valine

Valine - 一款快速、简洁且高效的无后端评论系统
Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

特性

• 快速
• 安全
• Emoji 😉
• 无后端实现
• MarkDown 全语法支持
• 轻量易用(~15kb gzipped)
• 文章阅读量统计 v1.2.0+

Valine弊端

• 无后端（容易被刷评论）
• 匿名（不强制输入评论称和邮箱）

让Valine强制输入评论昵称和邮箱

原理就是当点击评论框后，检测昵称、邮箱是否填写，如果没有填写就要求强制填写，同时设置text为空。

引入jquery

// 要记得引入JQ
//<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

$(document).ready(function()&#123; 
//检测是否有评论框
if($("#vcomments").html())&#123;
    //定义变量
    var c_name = $('#vcomments input[name="nick"]');
    var c_mail = $('#vcomments input[type="email"]');
    var c_text = $('#veditor');
    var mailzz = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]&#123;2,3&#125;$/;
    //placeholder
    var c_placeholder = c_text.attr('placeholder');
    //隐藏
    $(".vcontrol .text-right button").hide();
    $(".vcontrol .text-right").prepend('<span class="submit_f vbtn">回复</span>');
    $('body').on('click','.submit_f',function()&#123;
        if(nullpd(c_name.val()))&#123; 
            alert("昵称无效");
            return false;
        &#125;
        if(!mailzz.test(c_mail.val()))&#123;
            alert("邮箱无效");
            return false;
        &#125;
        if(!c_text.val())&#123;
            alert("留言评论不能为空");
            return false;
        &#125;
        $('.vsubmit').click();

    &#125;);
    //判断空
    function nullpd(str)&#123;
        if(str == "" || str == null || str == undefined)&#123;
            return true;
        &#125;else&#123;
            return false;
        &#125;
    &#125;
 &#125;
&#125;); 

测试效果

可以在下面试试通常情况下能否不输入用户名和邮箱提交评论！（请勿使用控制台作弊）

原理就是把提交按钮隐藏了，给了一个假的出来，当然依然会有一个小bug（快捷键提交）~

Valine 模仿 gitalk 的css样式

/*去浏览器内核版本和系统版本*/
.post-comment .power,.post-comment .vsys{
    display: none!important;
}
.post-comment .vcard{
    padding-bottom: 1rem!important;
}
.post-comment .vquote .vcard{
    padding-right: 0!important;
}
.post-comment .vimg{
    border-radius: 3px!important;
    border: 0!important;
}
.post-comment .vcontent.expand:after{
    content: "查看更多"!important;
}
.post-comment .vcontent.expand:before{
    bottom: 3.16rem!important;
}
.post-comment .vcard .vimg{
    margin-right: 1rem!important;
}
.post-comment .vcard .vh{
    padding: 0.75em 1em!important;
    background-color: #f9f9f9!important;
    border: 0!important;
}
.post-comment .vcard .vh:hover{
    -webkit-box-shadow: 0 0.625em 3.75em 0 #f4f4f4;
    box-shadow: 0 0.625em 3.75em 0 #f4f4f4;
}
.post-comment .vmeta,.post-comment .vhead{
    display: inline-block;
}
.post-comment .vhead .vnick{
    color: #6190e8!important;
    margin-right: 0!important;
}
.post-comment .vmeta .vtime:before{
    content: "发布于 ";
}
.post-comment .vhead  .vnick:before{
    background: #6190e8!important;
}
.post-comment .vcard .vcontent{
    background-color: #f9f9f9!important;
}
.post-comment .vmeta .vat{
    display: none;
}
.post-comment .vcard .vh:hover > .vmeta .vat{
    display: block;
}
.post-comment .vquote {
    border: 0!important;
}
.post-comment .vquote .vcard{
    padding-top: .8rem!important;
}
.post-comment .vquote .vcard .vh{
    border: 1px dashed hsla(0,0%,93%,.5)!important;
}