shixun_linshi/woniu2/template/index.html

{% extends 'base.html' %}
{% block content %}

<div class="col-sm-9 col-12" style="padding: 0 10px;" id="left">
    <!-- 轮播图组件应用，除了修改图片路径外，其它内容可不修改 -->
    <div id="carouselExampleIndicators" class="col-12 carousel slide"
         data-ride="carousel" style="padding: 0px">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0"
                class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../resource/img/b1.png" class="d-block w-100" alt="Banner广告一">
            </div>
            <div class="carousel-item">
                <img src="../resource/img/b2.png" class="d-block w-100" alt="Banner广告二">
            </div>
            <div class="carousel-item">
                <img src="../resource/img/b3.png" class="d-block w-100" alt="Banner广告三">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators"
           role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators"
           role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!--            以下是步入循环的十个界面-->
    {% for article in result %}
    <div class="col-12 row article-list">
        <div class="col-sm-3 col-3 thumb d-none d-sm-block">
            <img src="../resource/img/thumb.jpg" class="img-fluid"/>
        </div>
        <div class="col-sm-9 col-xs-12 detail">
            <div class="title"><a href="/article/{{article.articleid}}">{{ article.headline }}</a></div>
            <div class="info">作者：{{ article.user.nickname }}&nbsp;&nbsp;&nbsp;类别：{{ article_type[article.type |
                string] }}&nbsp;&nbsp;&nbsp;
                日期：{{ article.createtime }}&nbsp;&nbsp;&nbsp;阅读：{{ article.readcount }} 次&nbsp;&nbsp;&nbsp;消耗积分：{{
                article.credit }} 分
            </div>
            <div class="intro">
                {{article.content | striptags | truncate(80) }}
            </div>
        </div>
    </div>
    {% endfor %}


    <div class="col-12 paginate">

<!--        这里是主页面，默认显示第一页，无论点击哪一个页面，都会跳转到/article/n 页-->
        {% if page == 1 %}
        <a href="/page/{{1}}">上一页</a>&nbsp;&nbsp;
        {% else %}
        <a href="/page/{{ page-1 }}">上一页</a>&nbsp;&nbsp;
        {% endif %}

        {% for i in range(1,total+1) %}
        <a href="/page/{{ i }}">{{ i }}</a>
        {% endfor %}&nbsp;&nbsp;

        {% if page == total %}
        <a href="/page/{{total}}">下一页</a>&nbsp;&nbsp;
        {% else %}
        <a href="/page/{{ page+1 }}">下一页</a>&nbsp;&nbsp;
        {% endif %}
    </div>

</div>
{# 按需引入side.html，首页需要 #}
{% include 'side.html' %}

{% endblock %} {# 定义插入内容结束 #}