【Hexo】Hexo matery 主题评论系统 valine 改版记录-工具盒子

记一次 Valine 修改记录，效果如下

![](https://tencent.cos.mobaijun.com/img/blog/【Hexo】Hexo matery 主题评论系统 valine 改版记录 /0.png)

本主题为 matery 主题，修改适配 matery

下载魔改版本 {#下载魔改版本}

// 魔改版 Valine.min.js
https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

替换掉 source/libs/valine/Valine.min.js 原生 js 文件

修改 昵称，网址，邮箱不适配异常

全文查找，搜索vheader, 修改宽度为 32

.vwrap .vheader .vinput{width:32%;border-bottom:1px dashed #dedede}

修改 Valine 样式，定位到themes/matery/layout/_partial/valine.ejs，添加如下代码

添加卡片样式背景 {#添加卡片样式背景}

/* 卡片式背景 */
#vcomments .vcards .vcard {
    padding: 15px 20px 0 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
    transition: all .3s
}
#vcomments .vcards .vcard:hover {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12)
}
#vcomments .vcards .vcard .vh .vcard {
    border: none;
    box-shadow: none;
}

添加鼠标放置头像旋转 {#添加鼠标放置头像旋转}

/* 鼠标放置头像旋转 */
img.vimg {
    /* 旋转时间为 1s */
    transition: all 1s
}
img.vimg:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

添加背景图片输入消失判断 {#添加背景图片输入消失判断}

设置当鼠标聚焦于输入框时，背景图消失，输入框失去焦点时，背景图重新显示。

/*=========== 背景图输入判断 =========*/
#veditor:focus {
    background-position-y: 200px;
    transition: all 0.2s ease-in-out 0s;
}

修改评论框样式和内容高度 {#修改评论框样式和内容高度}

/*========== 修改评论框样式 ===========start====*/
.v .vwrap {
    padding: 0 0 20px;
}
/* 内容框高度 */
.v .veditor {
    min-height: 7rem;
    resize: none;
}
/*========== 修改评论框样式 ===========end======*/

修改头部空白栏高度

/* 头部空白栏高度 */
.valine-card .card-content {
    padding: 20px 20px 5px 20px;
}

调整 `Valine` 背景图 {#调整 Valine 背景图}

/* valine 评论框增加背景图片 */
#vcomments textarea {
    /* 背景图贴边 */
    margin-top: -30px;
    box-sizing: border-box;
    background: url("<%- url_for(theme.valine.background) %>") 100% 100% no-repeat;
}

点击回复在当前评论下方直接回复 {#点击回复在当前评论下方直接回复}

// 点击回复直接评论
$(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();
    })
});

定义邮箱验证审核规则 {#定义邮箱验证审核规则}

// 自定义邮箱审核规则
document.body.addEventListener('click', function (e) {
    if (e.target.classList.contains('vsubmit')) {
        const email = document.querySelector('input[type=email]');
        const nick = document.querySelector('input[name=nick]');
        const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email.value || !nick.value || !reg.test(email.value)) {
            const str = `<div class="valert text-center"><div class="vtext">请填写正确的昵称和邮箱！</div></div>`;
            const vmark = document.querySelector('.vmark');
            vmark.innerHTML = str;
            vmark.style.display = 'block';
            setTimeout(function () {
                vmark.style.display = 'none';
                vmark.innerHTML = '';
            }, 2500);
        }
    }
})

增加博主、小伙伴标识以及浏览器图标 {#增加博主、小伙伴标识以及浏览器图标}

修改主题配置文件为下

valine:
  enable: true
  appId: *******************************
  appKey: *******************************
  master: 'MD5 加密后的值'
  enableQQ: true # 默认值 false/true
  notify: false
  verify: false
  visitor: false
  avatar: monsterid
  pageSize: 10
  placeholder: ヾﾉ≧∀≦)o 来啊！,快活啊!
  background: https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp

与原生的相比，魔改版 Valine 多了以下功能：

添加博主，小伙伴，访客标签
添加浏览器和操作系统图标，需引入 fontawesome v5.0+ 的 CSS 样式
邮箱检测更严格
增加 QQ 邮箱识别（原版只能通过昵称栏输入 QQ 号识别）
meta placeholder 可自定义

使用方法与原生的类似，不同的是可以多设置几个参数：

| 参数 | 类型 | 说明 | 默认 | 示例 | |-----------------|--------------|-----------------------|---------------------|----------------------------------------| | tagMeta | Array | 标签要显示的文字 | ["博主","小伙伴","访客"] | ["博主","小伙伴","访客"] | | master | Array/String | md5 加密后的博主邮箱 | [] | ["fe01ce2a7fbac8fafaed7c982a04e229"] | | friends | Array | md5 加密后的小伙伴邮箱 | [] | ["fe01ce2a7fbac8fafaed7c982a04e229"] | | metaPlaceholder | Object | meta placeholder 内容 | {} | {"nick":"昵称 / QQ 号","mail":"邮箱 (必填)"} | | verify | Boolean | 评论时是否需要验证，需 jQuery 支持 | false | true |

举个例子，我们可以在 Valine 的配置 js 中增加字段如下：

new Valine({
    el: '#vcomments',
    appId: '<%- theme.valine.appId %>',
    appKey: '<%- theme.valine.appKey %>',
    tagMeta: ["博主","小伙伴","访客"],
    master: '<%- theme.valine.master %>',
    enableQQ: '<%- theme.valine.enableQQ %>' === false,
    notify: '<%- theme.valine.notify %>' === 'true',
    verify: '<%- theme.valine.verify %>' === 'true',
    visitor: '<%- theme.valine.visitor %>' === 'true',
    avatar: '<%- theme.valine.avatar %>',
    pageSize: '<%- theme.valine.pageSize %>',
    lang: '<% if (config.language =="zh-CN") { %>zh-cn<% } else { %>en<% } %>',
    placeholder: '<%= theme.valine.placeholder %>'
});

以上在 Valine 的配置中加入参数就可以实现了，并且不影响原生的其它参数。MD5 加密可以推荐一个在线生成网站，不过 MD5 前端单次加密本身不安全，但是安不安全是相对的，只有邮箱信息本身价值不大。如果对博客安全要求比较高，希望留言的小伙伴邮箱不被泄露（这当然无法完全避免），那么还是不建议使用这个。

贴完整代码 {#贴完整代码}

<style>
    .valine-card {
        margin: 1.5rem auto;
    }

    <span class="token comment">/* 卡片式背景 */</span>
    <span class="token selector">#vcomments .vcards .vcard</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 15px 20px 0 20px<span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
        <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 4px 1px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> .12<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">transition</span><span class="token punctuation">:</span> all .3s
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments .vcards .vcard:hover</span> <span class="token punctuation">{</span>
        <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 8px 3px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> .12<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments .vcards .vcard .vh .vcard</span> <span class="token punctuation">{</span>
        <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token property">box-shadow</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* 鼠标放置头像旋转 */</span>
    <span class="token selector">img.vimg</span> <span class="token punctuation">{</span>
        <span class="token property">transition</span><span class="token punctuation">:</span> all 1s <span class="token comment">/* 旋转时间为 1s */</span>
    <span class="token punctuation">}</span>

    <span class="token selector">img.vimg:hover</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">-moz-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">-o-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">-ms-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>


    <span class="token comment">/*=========== 背景图输入判断 =========*/</span>
    <span class="token selector">#veditor:focus</span> <span class="token punctuation">{</span>
        <span class="token property">background-position-y</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">transition</span><span class="token punctuation">:</span> all 0.2s ease-in-out 0s<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/*========== 修改评论框样式 ===========start====*/</span>
    <span class="token selector">.v .vwrap</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 0 0 20px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* 内容框高度 */</span>
    <span class="token selector">.v .veditor</span> <span class="token punctuation">{</span>
        <span class="token property">min-height</span><span class="token punctuation">:</span> 7rem<span class="token punctuation">;</span>
        <span class="token property">resize</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/*========== 修改评论框样式 ===========end======*/</span>

    <span class="token comment">/* 头部空白栏高度 */</span>
    <span class="token selector">.valine-card .card-content</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 20px 20px 5px 20px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* valine 评论框增加背景图片 */</span>
    <span class="token selector">#vcomments textarea</span> <span class="token punctuation">{</span>
        <span class="token comment">/* 背景图贴边 */</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> -30px<span class="token punctuation">;</span>
        <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"&lt;%- url_for(theme.valine.background) %&gt;"</span><span class="token punctuation">)</span></span> 100% 100% no-repeat<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments p</span> <span class="token punctuation">{</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 2px 2px 10px<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1.05rem<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.78rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments blockquote p</span> <span class="token punctuation">{</span>
        <span class="token property">text-indent</span><span class="token punctuation">:</span> 0.2rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* 回复颜色 */</span>
    <span class="token selector">#vcomments a</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 0 2px<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #4cbf30<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span>
        <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments img</span> <span class="token punctuation">{</span>
        <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
        <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments ol li</span> <span class="token punctuation">{</span>
        <span class="token property">list-style-type</span><span class="token punctuation">:</span> decimal<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments ol,
    ul</span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
        <span class="token property">padding-left</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
        <span class="token property">word-spacing</span><span class="token punctuation">:</span> 0.05rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments ul li,
    ol li</span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> list-item<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.8rem<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments ul li</span> <span class="token punctuation">{</span>
        <span class="token property">list-style-type</span><span class="token punctuation">:</span> disc<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments ul ul li</span> <span class="token punctuation">{</span>
        <span class="token property">list-style-type</span><span class="token punctuation">:</span> circle<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments table, th, td</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 12px 13px<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #dfe2e5<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments table, th, td</span> <span class="token punctuation">{</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">table tr:nth-child(2n), thead</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #fafafa<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments table th</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #f2f2f2<span class="token punctuation">;</span>
        <span class="token property">min-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments table td</span> <span class="token punctuation">{</span>
        <span class="token property">min-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments h1</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1.85rem<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 2.2rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments h2</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1.65rem<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.9rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments h3</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1.45rem<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments h4</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1.25rem<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments h5</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.4rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments h6</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.3rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments p</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments hr</span> <span class="token punctuation">{</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 12px 0<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments blockquote</span> <span class="token punctuation">{</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 15px 0<span class="token punctuation">;</span>
        <span class="token property">border-left</span><span class="token punctuation">:</span> 5px solid #42b983<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 1rem 0.8rem 0.3rem 0.8rem<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>66<span class="token punctuation">,</span> 185<span class="token punctuation">,</span> 131<span class="token punctuation">,</span> .1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments pre</span> <span class="token punctuation">{</span>
        <span class="token property">font-family</span><span class="token punctuation">:</span> monospace<span class="token punctuation">,</span> monospace<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> .5em 0<span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span> #272822<span class="token punctuation">;</span>
        <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 0.3em<span class="token punctuation">;</span>
        <span class="token property">tab-size</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments code</span> <span class="token punctuation">{</span>
        <span class="token property">font-family</span><span class="token punctuation">:</span> monospace<span class="token punctuation">,</span> monospace<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 1px 3px<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 0.92rem<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #e96900<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #f8f8f8<span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments pre code</span> <span class="token punctuation">{</span>
        <span class="token property">font-family</span><span class="token punctuation">:</span> monospace<span class="token punctuation">,</span> monospace<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #e8eaf6<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #272822<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments pre[class*="language-"]</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> .5em 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments code[class*="language-"],
    pre[class*="language-"]</span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #e8eaf6<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked</span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
        <span class="token property">margin-left</span><span class="token punctuation">:</span> -1.3rem<span class="token punctuation">;</span>
        <span class="token property">margin-right</span><span class="token punctuation">:</span> 0.4rem<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span>
        <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
        <span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments b,
    strong</span> <span class="token punctuation">{</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments dfn</span> <span class="token punctuation">{</span>
        <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments small</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 85%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments cite</span> <span class="token punctuation">{</span>
        <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments mark</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #fcf8e3<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> .2em<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments table, th, td</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 12px 13px<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #dfe2e5<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">table tr:nth-child(2n), thead</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #fafafa<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments table th</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #f2f2f2<span class="token punctuation">;</span>
        <span class="token property">min-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments table td</span> <span class="token punctuation">{</span>
        <span class="token property">min-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked</span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
        <span class="token property">margin-left</span><span class="token punctuation">:</span> -1.3rem<span class="token punctuation">;</span>
        <span class="token property">margin-right</span><span class="token punctuation">:</span> 0.4rem<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span>
        <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
        <span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>




</style>


\<div class="card valine-card" data-aos="fade-up"\>
\<div id="vcomments" class="card-content" style="display: grid"\>\</div\>
\</div\>

`<script src="<%- theme.jsDelivr.url %><%- url_for('/libs/valine/av-min.js') %>"></script>
<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.valine) %>"></script>
<script>
new Valine(`{`
`el:` `'#vcomments',`
`appId:` `'<%- theme.valine.appId %>',`
`appKey:` `'<%- theme.valine.appKey %>',`
`tagMeta:` [`"博主","小伙伴","访客"`]`,`
`master:` `'<%- theme.valine.master %>',`
`enableQQ:` `'<%- theme.valine.enableQQ %>'` === false`,`
`notify:` `'<%- theme.valine.notify %>'` === `'true',`
`verify:` `'<%- theme.valine.verify %>'` === `'true',`
`visitor:` `'<%- theme.valine.visitor %>'` === `'true',`
`avatar:` `'<%- theme.valine.avatar %>',`
`pageSize:` `'<%- theme.valine.pageSize %>',`
`lang:` `'<% if (config.language =="zh-CN")` `{` %>zh-cn<% `}` `else` `{` %>en<% `}` %>'`,`
`placeholder:` `'<%= theme.valine.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();`
`})`
`});`
`// 自定义邮箱审核规则
document.body.addEventListener('click', function (e)` `{`
`if (e.target.classList.contains('vsubmit'))` `{`
const email = document.`querySelector('input[type=email]');`
const nick = document.`querySelector('input[name=nick]');`
const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+`(`.[a-zA-Z0-9_-]+`)`+$/`;`
`if (!email.value || !nick.value || !reg.test(email.value))` `{`
const str = ``&lt;div class=<span class="token string">"valert text-center"</span>&gt;&lt;div class=<span class="token string">"vtext"</span>&gt;请填写正确的昵称和邮箱！&lt;/div&gt;&lt;/div&gt;`;`
const vmark = document.`querySelector('.vmark');`
vmark.innerHTML = str`;`
vmark.style.display = `'block';`
`setTimeout(function ()` `{`
vmark.style.display = `'none';`
vmark.innerHTML = `'';`
`},` 2500`);`
`}`
`}`
`})`
</script>`

参考博文：博客 Valine 评论样式美化

51工具盒子

【Hexo】Hexo matery 主题评论系统 valine 改版记录

下载魔改版本 {#下载魔改版本}

添加卡片样式背景 {#添加卡片样式背景}

添加鼠标放置头像旋转 {#添加鼠标放置头像旋转}

添加背景图片输入消失判断 {#添加背景图片输入消失判断}

修改评论框样式和内容高度 {#修改评论框样式和内容高度}

调整 `Valine` 背景图 {#调整 Valine 背景图}

点击回复在当前评论下方直接回复 {#点击回复在当前评论下方直接回复}

定义邮箱验证审核规则 {#定义邮箱验证审核规则}

增加博主、小伙伴标识以及浏览器图标 {#增加博主、小伙伴标识以及浏览器图标}

贴完整代码 {#贴完整代码}

厉飞雨

相关推荐

最新文章

猜你喜欢

快捷分类

下载魔改版本 {#下载魔改版本}

添加卡片样式背景 {#添加卡片样式背景}

添加鼠标放置头像旋转 {#添加鼠标放置头像旋转}

添加背景图片输入消失判断 {#添加背景图片输入消失判断}

修改评论框样式和内容高度 {#修改评论框样式和内容高度}

调整 Valine 背景图 {#调整 Valine 背景图}

点击回复在当前评论下方直接回复 {#点击回复在当前评论下方直接回复}

定义邮箱验证审核规则 {#定义邮箱验证审核规则}

增加博主、小伙伴标识以及浏览器图标 {#增加博主、小伙伴标识以及浏览器图标}

贴完整代码 {#贴完整代码}

厉飞雨

相关推荐

最新文章

猜你喜欢

快捷分类

调整 `Valine` 背景图 {#调整 Valine 背景图}