YwxAppThink/addon/blog/view/frontend/article/detail.html

{extend name="layout" /}
{block name="title"}{$article.title} - {$siteConf.site_name|default='博客'}{/block}
{* 文章级 SEO：关键词 / 描述 / 规范链接（canonical 指向本文唯一地址） *}
{block name="keywords"}{$article.title},{$article.category.name|default=''}{/block}
{block name="description"}{$article.summary|default=''}{/block}
{block name="canonical"}{:url('blog/article/detail', ['id' => $article.id])}{/block}

{block name="content"}
<div class="fb-layout">
    <main class="fb-content">
        <!-- 文章正文 -->
        <article class="fb-article">
            <div class="crumb">博文 &gt; <a href="{:url('blog/category', ['id' => $article.cid])}">{$article.category.name|default='默认'}</a></div>
            <h1>{$article.title}</h1>
            <div class="post-meta">
                <a class="author" href="{:url('blog/article/author', ['id' => $article.uid])}">
                    <img src="{$article.user.avatar|default='/static/blog/img/avatar.jpg'}" alt="">
                    {$article.user.nickname|default='佚名'}
                </a>
                <span><i class="layui-icon layui-icon-read"></i> {$article.view_count|default=0}</span>
                <span>{$article.create_text}</span>
            </div>
            {if $article.cover_image}
            <div class="cover"><img src="{$article.cover_image}" alt="{$article.title}"></div>
            {/if}
            <div class="content">{$article.content|raw}</div>
            <div class="action-bar">
                <button type="button" class="fb-btn like-btn" data-id="{$article.id}"><i class="layui-icon layui-icon-praise"></i> 点赞 (<span id="likeCount">{$article.like_count}</span>)</button>
                <button type="button" class="fb-btn ghost fav-btn" data-id="{$article.id}"><i class="layui-icon layui-icon-star"></i> 收藏 (<span id="favCount">{$article.favorite_count}</span>)</button>
                <button type="button" class="fb-btn ghost share-btn"><i class="layui-icon layui-icon-share"></i> 分享</button>
            </div>
        </article>

        <!-- 评论区 -->
        <section class="fb-comments">
            <p class="ct-title">全部留言 <em id="count">{$article.comment_count}</em></p>

            {if $is_login}
            <div class="fb-cmt-form">
                <textarea id="LAY-msg-content" placeholder="既然来了,就说几句吧" style="resize:none;"></textarea>
                <div style="margin-top:10px;display:flex;align-items:center;gap:10px;">
                    <button class="fb-btn" type="button" id="item-btn">发表留言</button>
                    <span class="reply-tip" id="replyTip" style="display:none;color:var(--theme);"></span>
                    <button class="fb-btn ghost" type="button" id="cancelReply" style="display:none;">取消回复</button>
                </div>
            </div>
            {else /}
            <div style="padding:10px 0;color:var(--text-3);">请 <a href="{:url('auth/login')}" style="color:var(--theme);">登录</a> 后发表留言</div>
            {/if}

            <ul class="fb-cmt-list" id="LAY-msg-box" style="list-style:none;margin:0;padding:0;">
                {volist name="comments" id="comment"}
                <li class="fb-cmt-item" data-id="{$comment.id}">
                    <img src="{$comment.user.avatar|default='/static/blog/img/portrait.jpg'}" alt="">
                    <div class="ci-body">
                        <p style="margin:0;">
                            <span class="ci-name">{$comment.user.nickname|default='佚名'}</span>
                            <span class="ci-time">{$comment.create_text}</span>
                            {if $is_login}<span class="ci-reply" data-id="{$comment.id}" data-name="{$comment.user.nickname}">回复</span>{/if}
                        </p>
                        <p class="ci-text">{$comment.content}</p>
                        <ul class="fb-cmt-children">
                            {volist name="comment.children" id="child"}
                            <li data-id="{$child.id}">
                                <img src="{$child.user.avatar|default='/static/blog/img/portrait.jpg'}" alt="">
                                <div class="ci-body">
                                    <p style="margin:0;">
                                        <span class="ci-name">{$child.user.nickname|default='佚名'}</span>
                                        <span class="ci-time">{$child.create_text}</span>
                                        {if $is_login}<span class="ci-reply" data-id="{$comment.id}" data-name="{$comment.user.nickname}">回复</span>{/if}
                                    </p>
                                    <p class="ci-text">{$child.content}</p>
                                </div>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </li>
                {/volist}
            </ul>
            <div class="fb-pager">{$comments|raw}</div>
        </section>

        <!-- 相关文章推荐 -->
        {if !empty($relatedArticles)}
        <section class="fb-related">
            <p class="ct-title">相关推荐</p>
            <ul class="fb-related-list">
                {volist name="relatedArticles" id="ra"}
                <li><a href="{:url('blog/article/detail', ['id' => $ra.id])}">{$ra.title}</a><span>{$ra.category.name|default=''}</span></li>
                {/volist}
            </ul>
        </section>
        {/if}
    </main>

    {include file="index/_sidebar" /}
</div>
{/block}

{block name="script"}
<script>
layui.use(['layer', 'jquery'], function(){
    var layer = layui.layer, $ = layui.$;
    $('.like-btn').click(function(){
        var id = $(this).data('id');
        $.post('{:url("interaction/like")}', { article_id: id }, function(res){
            if(res.code===1){ $('#likeCount').text(res.count); layer.msg(res.msg,{icon:1}); } else { layer.msg(res.msg,{icon:2}); }
        });
    });
    $('.fav-btn').click(function(){
        var id = $(this).data('id');
        $.post('{:url("interaction/favorite")}', { article_id: id }, function(res){
            if(res.code===1){ $('#favCount').text(res.count); layer.msg(res.msg,{icon:1}); } else { layer.msg(res.msg,{icon:2}); }
        });
    });
    $('.share-btn').click(function(){
        layer.open({ title:'分享文章', content:'<div style="padding:10px;"><input type="text" value="'+window.location.href+'" class="layui-input" readonly></div>', area:['500px','200px'] });
        $.post('{:url("interaction/share")}', { article_id: {$article.id} });
    });

    // ===== 留言 / 回复 =====
    var replyTo = 0;
    $(document).on('click', '.ci-reply', function(){
        if(!$('#LAY-msg-content').length){ return; }
        replyTo = $(this).data('id');
        var name = $(this).data('name');
        $('#replyTip').text('回复 @' + name).show();
        $('#cancelReply').show();
        $('#LAY-msg-content').attr('placeholder', '回复 @' + name);
        $('#LAY-msg-content').focus();
        $('html,body').animate({ scrollTop: $('.fb-cmt-form').offset().top - 20 }, 300);
    });
    $('#cancelReply').on('click', function(){
        replyTo = 0;
        $('#replyTip').hide().text('');
        $(this).hide();
        $('#LAY-msg-content').attr('placeholder', '既然来了,就说几句吧').val('');
    });
    // HTML 转义：评论内容/昵称来自用户输入，直接拼接进 HTML 会形成 DOM XSS
    function esc(s) {
      return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
      });
    }

    $('#item-btn').on('click', function(){
        var content = $('#LAY-msg-content').val();
        if(content.replace(/\s/g,'')==''){ layer.msg('请先输入留言内容'); return; }
        $.post('{:url("comment/add")}', { article_id: {$article.id}, parent_id: replyTo, content: content }, function(res){
            if(res.code===1){
                var d = res.data;
                var avatar = d.user.avatar || '/static/blog/img/portrait.jpg';
                if(replyTo > 0){
                    var html = '<li data-id="'+esc(d.id)+'"><img src="'+esc(avatar)+'"><div class="ci-body"><p style="margin:0;"><span class="ci-name">'+esc(d.user.nickname)+'</span><span class="ci-time">'+esc(d.create_text)+'</span> <span class="ci-reply" data-id="'+esc(replyTo)+'" data-name="'+esc(d.user.nickname)+'">回复</span></p><p class="ci-text">'+esc(d.content)+'</p></div></li>';
                    $('.fb-cmt-item[data-id="'+replyTo+'"] > .ci-body > .fb-cmt-children').prepend(html);
                } else {
                    var html = '<li class="fb-cmt-item" data-id="'+esc(d.id)+'"><img src="'+esc(avatar)+'"><div class="ci-body"><p style="margin:0;"><span class="ci-name">'+esc(d.user.nickname)+'</span><span class="ci-time">'+esc(d.create_text)+'</span> <span class="ci-reply" data-id="'+esc(d.id)+'" data-name="'+esc(d.user.nickname)+'">回复</span></p><p class="ci-text">'+esc(d.content)+'</p><ul class="fb-cmt-children"></ul></div></li>';
                    $('#LAY-msg-box').prepend(html);
                }
                $('#LAY-msg-content').val('');
                $('#count').text((parseInt($('#count').text())||0) + 1);
                replyTo = 0; $('#replyTip').hide(); $('#cancelReply').hide();
                layer.msg(res.msg,{icon:1});
            } else { layer.msg(res.msg,{icon:2}); }
        });
    });
});
</script>
{/block}