背景

这里有个用户提的 issue (我自己转发的)，之后一个月左右不会再周更 Tony 主题了，所以赶快把这个需求做了 🙂

 

代码

使用 Vue.js + Axios.js + WordPress REST API 来实现在快速预览展开情况下获取评论列表并支持发送评论

在使用 WordPress REST API 发送 POST 请求时需要使用内置函数  wp_create_nonce( 'wp_rest' ) 获取 REST API 识别码并且添加到请求头部

preview: function (postId) { //预览文章内容
    var previewingPost = $('.article-list-item .preview-p');
    if (!!previewingPost.length) { // 若有其它预览已打开,则自动收起
        var previewingPostItemEl = previewingPost.parent('.article-list-item');
        previewingPostItemEl.find('.list-show-btn').html('全文速览');
        previewingPostItemEl.find('.article-list-content').html(pre_post_con).removeClass('preview-p');
        pre_post_con = '';
        this.comments_html = '<div id="new_comments" style="margin-top:40px"></div>';
        if (postId === pre_post_id) { // 若点击当前已打开文章的按钮
            return;
        }
    }

    $('#' + postId).html('<div uk-spinner></div><h7 class="loading-text">加载中...</h7>');
    axios.get('<?php echo site_url() ?>/wp-json/wp/v2/posts/' + postId)
        .then(response => {
            if (response.data.length !== 0) { //判断是否最后一页
                axios.get('<?php echo site_url() ?>/wp-json/wp/v2/comments?post=' + postId)
                    .then(comments => {

                        //处理评论格式
                        for (var c = 0; c < comments.data.length; ++c) {
                            this.comments_html +=
                                '<div class="quick-div"><div><img class="quick-img" src="' + comments.data[
                                    c].author_avatar_urls['48'] + '"></div><div><p class="quick-name">' +
                                comments.data[c].author_name + '<em class="quick-date">' + comments.data[c]
                                .date + '</em></p>' + comments.data[c].content.rendered + '</div></div>';
                        }
                        this.comments_html +=
                            '<div class="quick-div" style="margin-top: 15px;"><div style="flex:1;border-right: 1px solid #eee;"><input type="text" value="昵称" id="comment_form_name" class="quick-form"></div><div style="flex:1"><input type="email" value="邮箱" id="comment_form_email" class="quick-form"></div></div><div class="quick-div" style="padding: 4px;"><textarea placeholder="说点什么..." id="comment_form_content" class="quick-form-textarea"></textarea></div><button class="quick-btn" onclick="send_comment(' +
                            postId + ')">发送评论</button>';


                        $('#btn' + postId).html('收起速览'); //更改按钮

                        <?php if($m){ ?>
                        var md = window.markdownit();
                        var reg1 = new RegExp('<p>', 'g');
                        var reg2 = new RegExp('</p>', 'g');
                        var reg3 = new RegExp('<br />', 'g');
                        var show_con = response.data.content.rendered.replace(reg1, '').replace(reg2, '').replace(
                            reg3, '');
                        show_con = md.render(show_con);
                        <?php }else{ ?>
                        var show_con = response.data.content.rendered;
                        <?php } ?>

                        $('#' + postId).addClass('preview-p').html(
                            show_con +
                            this.comments_html
                        ); //更改内容
                        pre_post_con = response.data.post_excerpt.nine; //保存摘录
                        pre_post_id = postId;
                        document.querySelectorAll('pre code').forEach((block) => {
                            hljs.highlightBlock(block);
                        });
                    })
            } else {
                $('#' + postId).html('Nothing Here');
            }
        });
}

↑ 整个 Vue.js Preview 方法

 

//注意要引用md5加密库来获取 Gravatar 头像
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

var send_comment = function(postId){
            var _nonce = "<?php echo wp_create_nonce( 'wp_rest' ); ?>";
            var na = $('#comment_form_name').val();
            var em = $('#comment_form_email').val();
            var ct = $('#comment_form_content').val();
            if(na !== '' && ct !== '' && em !== ''){
            axios.post('<?php echo site_url() ?>/wp-json/wp/v2/comments?post='+postId, {
                    author_name   : na,
                    author_email : em,
                    content : ct,
                    post : postId
                },{
                headers: {
                    'X-WP-Nonce': _nonce
                }})
                .then(response => {
                    $('#new_comments').html('<div class="quick-div"><div><img class="quick-img" src="https://gravatar.loli.net/avatar/'+md5(em)+'?d=mp&s=80"></div><div><p class="quick-name">'+na+'<em class="quick-date">刚刚</em></p><p>'+ct+'</p></div></div>'+$('#new_comments').html());
                    $('#comment_form_content').val('');
                })
            }else{
                alert('信息不全');
            }
        }

↑ 发送评论的 JavaScript 函数

 

后记

抱歉了！

从现在开始到六月中旬都不会再更新(也许真香)主题，考试了哈哈哈哈哈...哈哈哈哈....哈哈....哈....... 🙂