{% for article in articles %}
    <div class="row col-12">
        <!--标题图-->
        {% if article.avatar %}
            <div class="col-5" data-aos="fade-up" data-aos-delay="100">
                <img src="{{ article.avatar.url }}"
                     alt="avatar"
                     style="max-width: 100%; border-radius: 20px;"
                >
            </div>
        {% endif %}
        <div class="col-7">
            {% if article.column %}
                <button type="button"
                        onclick="window.open('{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ article.column.id }}')"
                        class="btn btn-sm mb-2 column_button"
                        data-aos="fade-up" data-aos-delay="120">
                    {{ article.column }}
                </button>
            {% endif %}
            <!--标签-->
            <span>
                        {% for tag in article.tags.all %}
                            <a href="{% url 'article:article_list' %}?tag={{ tag }}&column={{ column }}"
                               class="badge badge-secondary" data-aos="fade-up" data-aos-delay="120">
                            {{ tag }}
                            </a>
                        {% endfor %}
                    </span>
            <!--标题-->
            <h4 data-aos="fade-up" data-aos-delay="140">
                <b>
                    <a id="post-preview" href="{% url 'article:article_detail' article.id %}">
                        {{ article.title }}
                    </a>
                </b>
            </h4>
            <!--摘要-->
            <div data-aos="fade-up" data-aos-delay="160">
                <p style="color: gray;">
                    {{ article.summary|slice:'50' }}...
                </p>
            </div>
            <!--注脚-->
            <p style="color: #868e96;font-style: italic;font-family: 'Lora', 'Times New Roman', serif;"
               data-aos="fade-up" data-aos-delay="180">
                <!--附加消息-->
                <span>
                            <i class="fas fa-eye"></i>
                            {{ article.total_views }} viewd&nbsp;&nbsp;&nbsp;
                        </span>
                <span>
                            <i class="fas fa-comments"></i>
                            Posted at {{ article.created|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
                        </span>
                <span>
                            <i class="fas fa-clock"></i>
                            Update at {{ article.updated|date:'Y-m-d' }}
                        </span>
            </p>
            <hr data-aos="fade-up" data-aos-delay="180">
        </div>
        <hr style="width:100%;" data-aos="fade-up" data-aos-delay="180"/>
    </div>
{% endfor %}