CoreThink主题开发（九）使用H-ui开发博客主题之用户个人主页-优快云博客

本文介绍了一种使用Table布局来展示用户个人信息的方法，包括如何显示用户的头像、昵称、个性签名等内容，并提供了关注按钮的功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感谢H-ui、感谢CoreThink！效果图：

这里使用table布局
/Theme/Blog/User/Index/home.html

<extend name="$_home_public_layout"/>

<block name="main">
    <br><br>
    <div class="container">
            <table class="table">
                <thead>
                <tr>
                    <td ><a href="{:U('User/Talk/index', array('to_uid' => $user_info['id']))}" class="btn btn-success radius"><i style="font-size: medium" class="Hui-iconfont"></i> 发私信</a></td>
                    <td class="text-c">
                        <div class="maskWraper round" style="width:100px; height:100px; border:solid 1px">
                        <img src="{$user_info.avatar|get_cover='avatar'}" width="100px" height="100px" >
                        <div class="maskBar text-c">
                            {$user_info.nickname}
                        </div>
                        </div>
                    </td>


                <?php if ($follow_status) :?>

                    <td>
                        <button type="button" class="btn btn-secondary radius ajax-follow"
                                url="{:U('User/Follow/add', array('uid' => $user_info['id']))}">
                            <i style="font-size: medium" class="Hui-iconfont"></i> 已关注
                        </button>
                    </td>

                <?php else :?>

                    <td><button type="button" class="btn btn-secondary radius ajax-follow"
                                             url="{:U('User/Follow/add', array('uid' => $user_info['id']))}">
                        <i style="font-size: medium" class="Hui-iconfont"></i> 加关注
                    </button></td>

                <?php endif; ?>
                    <td class="text-r"><a>个性签名：{$user_info.summary}</a></td>
                </tr>
                </thead>
            </table>

    </div>
</block>
<block name="script">
<script type="text/javascript">
    $(function(){
        $.Huihover('.maskWraper');
    });
</script>
</block>

转载于:https://www.cnblogs.com/mracale/p/8086050.html