解决用户在7b2主题美化过程中遇到用户ID获取不正确问题

问题背景

在7B2主题美化过程中，用户遇到了一个常见问题：在圈子功能中，用户头像卡片显示错误，始终显示站长或圈主信息，而不是发帖用户的信息。这个问题影响了用户体验和社区互动。

问题分析

问题出在数据获取方式上。原代码使用php的get_the_author_meta('ID')获取用户ID，但在Vue动态渲染的环境中，这种服务器端渲染方式无法获取到正确的用户信息。

解决方案

代码实现

<div class="topic-avatar">
            <a :href="item.author.link" target="_blank">
            <?php echo b2_get_img(array(
                'source_data'=>':srcset="item.author.avatar_webp"',
                'src_data'=>':src="item.author.avatar"',
                'class'=>array('b2-radius')
            ));?>
            <b v-html="item.author.verify_icon" v-if="item.author.user_title"></b></a>
            <div class="jktheme-user-info-card" v-if="item && item.author" >
                <div class="jktheme-info-card-bg">
                <div class="user-s-cover" style="border-radius: 5px 5px 0px 0px;">
                    <picture class="picture">
                        <img :src="item.author.cover" class="">
                    </picture>
                    <a :href="item.author.link" class="link-block" target="_blank"></a>
                </div>
                <div class="user-s-info">
                    <div class="user-s-info-avatar avatar-parent" :href="item.author.link">
                        <picture class="picture">
                            <img :data-src="item.author.avatar" class="avatar b2-radius lazy">
                        </picture>
                        <span v-html="item.author.verify_icon"></span>
                    </div>
                    <div class="user-s-info-name">
                        <h2>{{item.author.name}}</h2>
                        <p v-html="item.author.lv.vip.icon + item.author.lv.lv.icon"></p>
                    </div>
                </div>
                <div class="user-s-data" :data-user-id="item.author.id">
                    <div><span>文章</span>
                        <p>-</p>
                    </div>
                    <div><span>评论</span>
                        <p>-</p>
                    </div>
                    <div><span>粉丝</span>
                        <p>-</p>
                    </div>
                    <div><span>关注</span>
                        <p>-</p>
                    </div>
                </div>
                <div class="user-s-info-desc-v">
                    <p>{{item.author.desc || '趁年轻，去设计。'}}</p>
                </div>
            </div>
        </div>

子主题根目录创建user-hover-card.js来动态获取数据并更新模板

代码实现

在functions.php中找到这段代码

wp_enqueue_script( 'b2-child-main', B2_CHILD_URI.'/child.js', array('jquery'), B2_VERSION , true );

在他下面引入user-hover-card.js文件

wp_enqueue_script( 'b2-child-user-card', B2_CHILD_URI.'/js/user-hover-card.js', array('jquery'), B2_VERSION , true );

最后添加css样式，在style.css中添加以下代码

.jktheme-user-info-card {
    display: none;
    position: absolute;
    z-index: 999;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 300px;
    left: 0;
    top: 100%;
    margin-top: 10px;
    pointer-events: auto;
}



@media (min-width: 768px) {
    .topic-avatar:hover .jktheme-user-info-card {
        display: block;
        animation: fadeIn 0.2s ease;
    }
}

/* 小三角 */
.jktheme-user-info-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 14px;
    height: 14px;
    background: white;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0,0,0,0.05);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

核心改进

1. 移除PHP服务器端渲染
2. 使用js动态数据绑定
3. 采用客户端渲染机制

技术要点

• 使用Vue的v-if确保数据存在
• 动态绑定用户属性
• 优雅降级处理缺失数据

实现效果

• 准确显示发帖用户信息
• 动态更新用户数据
• 提升用户体验

问题解答

1. 为什么原方案会失效？
   • PHP无法访问Vue动态数据
   • 服务端渲染限制
2. 新方案有何优势？
   • 实时数据更新
   • 更好的用户体验
   • 代码更易维护

总结

通过将渲染方式从服务器端迁移到客户端，成功解决了用户ID获取问题，提供了更好的用户体验。这个解决方案适用于所有使用7b2主题的网站。