kjweiji/comments.php

<?php
/**
 * 空笺未寄 — 评论模板
 */
if (post_password_required()) return;
?>

<div id="comments" class="comments-section">

    <?php if (have_comments()) : ?>
    <h3 class="comment-reply-title">笺下留言</h3>
        <ol class="comment-list">
            <?php
            $comments = get_comments(array('post_id' => get_the_ID(), 'status' => 'approve', 'order' => 'ASC'));
            foreach ($comments as $c) :
                $is_reply = $c->comment_parent > 0;
                $parent = $is_reply ? get_comment($c->comment_parent) : null;
            ?>
                <li class="comment-item<?php echo $is_reply ? ' comment-item--reply' : ''; ?>">
                    <div class="comment-item__meta">
                        <?php echo get_avatar($c, 18, '', '', array('class' => 'comment-avatar')); ?>
                        <span class="comment-item__author"><?php echo esc_html($c->comment_author); ?></span>
                        <?php if ($parent) : ?>
                            <span class="comment-item__replyto">回复 @<?php echo esc_html($parent->comment_author); ?></span>
                        <?php endif; ?>
                        <span class="comment-item__time"><?php echo get_comment_date('Y-m-d H:i:s', $c); ?></span>
                    </div>
                    <div class="comment-item__text"><?php echo esc_html($c->comment_content); ?></div>
                    <div class="comment-item__reply">
                        <span class="reply-link" data-comment-id="<?php echo $c->comment_ID; ?>" data-comment-author="<?php echo esc_attr($c->comment_author); ?>" tabindex="0">回复</span>
                    </div>
                </li>
            <?php endforeach; ?>
        </ol>
    <?php endif; ?>

    <?php if (is_user_logged_in()) : ?>
        <div id="respond" class="comment-respond">
            <div id="reply-hint" class="reply-hint" style="display:none">
                <span id="reply-hint-text"></span>
                <a href="javascript:void(0)" class="cancel-reply-link" onclick="cancelReply()">取消回复</a>
            </div>
            <form id="commentform" class="comment-form" method="post" action="<?php echo site_url('/wp-comments-post.php'); ?>">
                <textarea id="comment" name="comment" rows="3" placeholder="写点什么..." required></textarea>
                <input type="hidden" name="comment_post_ID" value="<?php echo get_the_ID(); ?>">
                <input type="hidden" id="comment_parent" name="comment_parent" value="0">
                <?php wp_nonce_field('comment_nonce_' . get_the_ID(), 'comment_nonce'); ?>
                <div class="form-submit">
                    <button type="submit" class="submit">落笔留痕</button>
                </div>
            </form>
        </div>
    <?php else : ?>
        <div id="respond" class="comment-respond">
            <div id="reply-hint-guest" class="reply-hint" style="display:none">
                <span id="reply-hint-text-guest"></span>
                <a href="javascript:void(0)" class="cancel-reply-link" onclick="cancelReply()">取消回复</a>
            </div>
            <form id="commentform-guest" class="comment-form" novalidate>
                <textarea id="comment" name="comment" rows="3" placeholder="登录后写点什么..." required></textarea>
                <input type="hidden" id="comment_parent" name="comment_parent" value="0">
                <div class="form-submit">
                    <button type="submit" class="submit">落笔留痕</button>
                </div>
            </form>
        </div>
        <div id="login-modal" class="login-modal">
            <div class="login-modal__content">
                <p>登录后才能留言</p>
                <button onclick="goLogin()" class="submit">去登录</button>
                <button onclick="closeLoginModal()" class="cancel-btn">取消</button>
            </div>
        </div>
        <script>
        document.getElementById('commentform-guest').addEventListener('submit', function(e) {
            e.preventDefault();
            var m = document.getElementById('login-modal');
            if (m) m.style.display = 'flex';
        });
        function closeLoginModal() {
            var m = document.getElementById('login-modal');
            if (m) m.style.display = 'none';
        }
        function goLogin() {
            window.location.href = '/wp-login.php?redirect_to=' + encodeURIComponent(window.location.href);
        }
        </script>
    <?php endif; ?>

    <script>
    document.querySelectorAll('.reply-link').forEach(function(el) {
        el.addEventListener('click', function() {
            var cid = this.getAttribute('data-comment-id');
            var author = this.getAttribute('data-comment-author');
            document.getElementById('comment_parent').value = cid;
            var hint = document.getElementById('reply-hint');
            var hintText = document.getElementById('reply-hint-text');
            if (hint && hintText) {
                hintText.textContent = '回复 @' + author;
                hint.style.display = 'flex';
            }
            var textarea = document.getElementById('comment');
            if (textarea) textarea.focus();
        });
        el.style.cursor = 'pointer';
    });
    function cancelReply() {
        document.getElementById('comment_parent').value = '0';
        var hint = document.getElementById('reply-hint');
        if (hint) hint.style.display = 'none';
    }
    </script>

</div>