{extend name="layout" /}
{block name="title"}{$siteConf.site_name|default='博客'} - 首页{/block}

{block name="content"}
<!-- Hero 推荐 -->
{notempty name="recommendedArticles"}
{if !$recommendedArticles->isEmpty()}
<div class="fb-hero">
    <div class="fb-hero-grid">
        {volist name="recommendedArticles" id="rec" offset="0" length="1"}
        <a class="fb-hero-main" href="{:url('blog/article/detail', ['id' => $rec.id])}">
            <img src="{$rec.cover_image|default='/static/blog/img/pic.jpg'}" alt="{$rec.title}">
            <div class="fb-hero-cap">
                <span class="tag">{$rec.category.name|default='推荐'}</span>
                <h2>{$rec.title}</h2>
            </div>
        </a>
        {/volist}
        <div class="fb-hero-sub">
            {volist name="recommendedArticles" id="rec" offset="1" length="2"}
            <a class="fb-hero-sub-item" href="{:url('blog/article/detail', ['id' => $rec.id])}">
                <img src="{$rec.cover_image|default='/static/blog/img/code.jpg'}" alt="{$rec.title}">
                <div class="fb-hero-cap">
                    <h3>{$rec.title}</h3>
                </div>
            </a>
            {/volist}
        </div>
    </div>
</div>
{/if}
{/notempty}

<div class="fb-layout">
    <!-- 左：文章流 -->
    <main class="fb-content">
        <div class="fb-section-title"><h2>最新文章</h2></div>
        {if $articles->isEmpty()}
        <div class="fb-empty"><p>站点还没有发布文章，敬请期待。</p></div>
        {else}
        <div class="fb-post-list">
            {volist name="articles" id="article"}
            <article class="fb-post">
                <a class="thumb" href="{:url('blog/article/detail', ['id' => $article.id])}">
                    <img src="{$article.cover_image|default='/static/blog/img/book.jpg'}" alt="{$article.title}">
                </a>
                <div class="body">
                    <span class="cat">{$article.category.name|default='默认'}</span>
                    <h3><a href="{:url('blog/article/detail', ['id' => $article.id])}">{$article.title}</a></h3>
                    <p class="summary">{$article.summary|default='（暂无描述）'}</p>
                    <div class="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><i class="layui-icon layui-icon-praise"></i> {$article.like_count|default=0}</span>
                        <span class="sp">{$article.create_text}</span>
                    </div>
                </div>
            </article>
            {/volist}
        </div>
        {/if}
    </main>

    <!-- 右：侧栏 -->
    <aside class="fb-aside">
        <div class="fb-widget">
            <div class="fb-stat">
                <div><div class="num">{$total_articles|default=0}</div><div class="lbl">文章</div></div>
                <div><div class="num">{$total_categories|default=0}</div><div class="lbl">分类</div></div>
                <div><div class="num">{$total_views|default=0}</div><div class="lbl">阅读</div></div>
            </div>
        </div>

        <div class="fb-widget">
            <h4>热门文章</h4>
            <ul class="fb-hot">
                {volist name="hotArticles" id="a"}
                <li>
                    <span class="rank">{$i}</span>
                    <a href="{:url('blog/article/detail', ['id' => $a.id])}">{$a.title}</a>
                </li>
                {/volist}
            </ul>
        </div>

        <div class="fb-widget">
            <h4>文章分类</h4>
            <ul class="fb-catlist">
                {volist name="categories" id="c"}
                <li><a href="{:url('blog/category', ['id' => $c.id])}">{$c.name}<span class="cnt">{$c.card_count|default=0}</span></a></li>
                {/volist}
            </ul>
        </div>

        <div class="fb-widget">
            <h4>标签云</h4>
            <div class="fb-tagcloud">
                {volist name="tags" id="t"}
                <a href="{:url('blog/tag', ['id' => $t.id])}">{$t.name}</a>
                {/volist}
            </div>
        </div>

        {notempty name="latestComments"}
        {if !$latestComments->isEmpty()}
        <div class="fb-widget">
            <h4>最新评论</h4>
            <ul class="fb-cmt">
                {volist name="latestComments" id="cmt"}
                <li>
                    <span class="who">{$cmt.user.nickname|default='匿名'}</span>：
                    <span class="txt">{$cmt.content}</span>
                </li>
                {/volist}
            </ul>
        </div>
        {/if}
        {/notempty}
    </aside>
</div>
{/block}