如何使用 django 模板限制 html 中的数据？

Question

我正在使用引导轮播，我正在使用 for 模板来迭代数据，但我想要一次有两个数据，所以我想做的是如果数据超过 2，我不想显示任何内容，有人可以告诉我该怎么做它。

<section id="latest-trip">
  <div class="container">
    <div class="row col-md-12">
      <!-- Latest trip left part(carousel part) Start -->
      <div id="treaking-list" class="col-md-7 ml-4">
        <div
          id="carouselExampleIndicators-three"
          class="carousel slide"
          data-ride="carousel"
        >
          <ol class="carousel-indicators">
            <li
              data-target="#carouselExampleIndicators-three"
              data-slide-to="0"
              class="active"
            ></li>
            <li
              data-target="#carouselExampleIndicators-three"
              data-slide-to="1"
            ></li>
            <li
              data-target="#carouselExampleIndicators-three"
              data-slide-to="2"
            ></li>
          </ol>
          <div class="carousel-inner">
            {% for tour in tours %}
            <div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
              <div class="row">
                {% for tour in tours %}
                <div class="treaking col-md-6">
                  <img
                    src="{{tour.image}}"
                    alt="Real Adventure Nepal - {{tour.tour_name}}"
                    title="{{tour.tour_name}}"
                  />
                  <div class="treaking-head">
                    <h3>{{tour.tour_name}}</h3>
                    <p>
                      {{tour.description}}
                    </p>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <!-- Latest trip left part(carousel part) End -->

      <!-- Latest trip right part(Description part) Start -->
      <div class="col-md-4 ml-5 title">
        <h2 class="treaking-title">Latest Trips</h2>
        <span class="right-styled-para">Explore the unexplored world</span>
        <p class="treaking-description">
          Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
          tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
          veniam quiso.
        </p>
        <button type="button" class="btn btn-primary join-us">
          <a href="treks.html">Join us now</a>
        </button>
      </div>
      <!-- Latest trip right part(Description part) End -->
    </div>
  </div>
</section>

目前正在发生的事情是数据正在下降，并且在轮播中不断发生同样的事情：

Answer 1

<section id="latest-trip">
  <div class="container">
    <div class="row col-md-12">
      <!-- Latest trip left part(carousel part) Start -->
      <div id="treaking-list" class="col-md-7 ml-4">
        <div
          id="carouselExampleIndicators-three"
          class="carousel slide"
          data-ride="carousel"
        >
          <ol class="carousel-indicators">
            <li
              data-target="#carouselExampleIndicators-three"
              data-slide-to="0"
              class="active"
            ></li>
            <li
              data-target="#carouselExampleIndicators-three"
              data-slide-to="1"
            ></li>
            <li
              data-target="#carouselExampleIndicators-three"
              data-slide-to="2"
            ></li>
          </ol>
          <div class="carousel-inner">
            {% for tour in tours[:2] %}
            <div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
              <div class="row">
                {% for tour in tours %}
                <div class="treaking col-md-6">
                  <img
                    src="{{tour.image}}"
                    alt="Real Adventure Nepal - {{tour.tour_name}}"
                    title="{{tour.tour_name}}"
                  />
                  <div class="treaking-head">
                    <h3>{{tour.tour_name}}</h3>
                    <p>
                      {{tour.description}}
                    </p>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <!-- Latest trip left part(carousel part) End -->

      <!-- Latest trip right part(Description part) Start -->
      <div class="col-md-4 ml-5 title">
        <h2 class="treaking-title">Latest Trips</h2>
        <span class="right-styled-para">Explore the unexplored world</span>
        <p class="treaking-description">
          Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
          tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
          veniam quiso.
        </p>
        <button type="button" class="btn btn-primary join-us">
          <a href="treks.html">Join us now</a>
        </button>
      </div>
      <!-- Latest trip right part(Description part) End -->
    </div>
  </div>
</section>

在游览后添加 [:2] 将解决此问题。请参阅我上面的答案。