MyFirstBlog/MyBlog/templates/article/home_call.html

<div class="row mt-2">
    {% for article in articles %}
        <div class="row col-10 m-auto">
            <!--标题图-->
            {% if article.avatar %}
                <div class="col-4" 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">
                {% if article.column %}
                    <button type="button"
                            onclick="window.open('{% url 'article:article_list' %}?column={{ article.column.id }}')"
                            class="btn btn-sm mb-2
                                {% if article.column.title == 'Django' %}
                                    btn-success
                                {% elif article.column.title == 'Java' %}
                                    btn-danger
                                {% elif article.column.title == 'HTML' %}
                                    btn-warning
                                {% endif %}
                            "
                     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 }}"
                               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 %}" style="color: black;">
                            {{ article.title }}
                        </a>
                    </b>
                </h4>
                <!--摘要-->
                <div data-aos="fade-up" data-aos-delay="160">
                    <p style="color: gray;">
                        {{ article.body|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 %}
</div>