需求
很多时候Valine默认的样式过于单调，所以我们想要添加自己的样式
解决方案
在哪里修改样式了
-
主题目录下面
H:\Hexo\themes\yilia\layout\_partial\post\valine.ejs（这个也不是固定的，就是你写new Valine的那个文件） -
***valine.ejs*** <div id="vcomment" class="comment"></div> <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><!-- 评论框美化 --><style> .v #veditor{ min-height: 10rem!important; background-image: url(https://cdn.jsdelivr.net/gh/xiangshu233/cdn@1/img/other/comment-bg.png); background-size: contain; background-repeat: no-repeat; background-position: right; background-color: rgba(255,255,255,0); resize: none; height: 123px; } .v .vwrap .text-right .vsubmit.vbtn{ background-color: #9999ff; color: #fff; } .v .vwrap .vheader.item3 .vinput { border-color: #9999ff; } @media screen and (max-width: 520px){ .v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;} }</style><script> var notify = '<%= theme.valine.notify %>' == true ? true : false; var verify = '<%= theme.valine.verify %>' == true ? true : false; window.onload = function() { new Valine({ el: '.comment', notify: notify, verify: verify, app_id: "<%= theme.valine.appid %>", app_key: "<%= theme.valine.appkey %>", placeholder: "<%= theme.valine.placeholder %>", avatar:"<%= theme.valine.avatar %>", placeholder: "主人，留下你的脚印再走吧 ..." }); } $(document).ready(function(){ //$('.vemoji-btn').text('😀'); $("#vcomments").on('click', 'span.vat',function(){ $(this).parent('div.vmeta').next("div.vcontent").after($("div.vwrap")); $('textarea#veditor').focus(); }) })</script>
样式具体这么的修改学过css的人都知道了，这里就不多说了，注意的一点是可能写的样式没有覆盖原来的样式，提高选择器的优先级（我这里的背景添加就是使用的id选择器才加上的）
内容仅供参考，写的比较粗糙，就是自己学习的笔记。避免大家走坑吧。
