{% extends 'share_layout/base.html' %}
{% load blog_tags %}

{% block header %}
    <!-- 针对文章详情页优化SEO信息 -->
    <title>{{ article.title }} - {{ SITE_NAME }}</title>
    <meta name="description" content="{{ article.body|truncatechars:150|striptags }}">
{% endblock %}

{% block content %}
    <!-- 主内容区域 -->
    <div id="primary" class="site-content">
        <div id="content" role="main">

            <!-- 使用自定义模板标签加载并显示文章主体内容 -->
            {% load_article_detail article False user %}

            <!-- “上一篇/下一篇”文章导航 -->
            {% if article.type == 'a' %}
                <nav class="nav-single">
                    <h3 class="assistive-text">文章导航</h3>

                    <!-- 上一篇文章卡片 -->
                    {% if prev_article %}
                        <div class="nav-previous">
                            <a href="{{ prev_article.get_absolute_url }}" rel="prev">
                                <span class="meta-nav">&larr; 上一篇</span>
                                {{ prev_article.title }}
                            </a>
                        </div>
                    {% else %}
                        <div></div> <!-- 这是一个占位符，当没有上一篇文章时，确保Grid布局的稳定性 -->
                    {% endif %}

                    <!-- 下一篇文章卡片 -->
                    {% if next_article %}
                        <div class="nav-next">
                            <a href="{{ next_article.get_absolute_url }}" rel="next">
                                <span class="meta-nav">下一篇 &rarr;</span>
                                {{ next_article.title }}
                            </a>
                        </div>
                    {% endif %}
                </nav>
            {% endif %}

        </div><!-- #content 结束 -->

        <!-- 评论区 -->
        {% if article.comment_status == "o" and OPEN_SITE_COMMENT %}
            <!-- 评论区统一容器，用于应用卡片化样式 -->
            <div class="comments-area">

                <!-- 加载评论列表 -->
                {% include 'comments/tags/comment_list.html' %}

                <!-- 判断用户是否登录，以显示评论框或登录提示 -->
                {% if user.is_authenticated %}
                    <!-- 加载发表评论的表单 -->
                    {% include 'comments/tags/post_comment.html' %}
                {% else %}
                    <!-- 显示登录提示和第三方登录按钮 -->
                    <h3 class="comment-meta">您还没有登录，请您<a href="{% url "account:login" %}?next={{ request.get_full_path }}" rel="nofollow">登录</a>后发表评论。</h3>
                    {% load oauth_tags %}
                    {% load_oauth_applications request %}
                {% endif %}
            </div>
        {% endif %}

    </div><!-- #primary 结束 -->
{% endblock %}

{% block sidebar %}
    <!-- 侧边栏 -->
    {% load_sidebar user "p" %}
{% endblock %}