{% extends 'shop/basic.html' %}
{% block css %}
        .col-md-3 {
            display: inline-block;
            margin-left: -4px;
        }

        .col-md-3 {
            width: 100%;
            height: auto;
        }



        body .no-padding {
            padding-left: 0;
            padding-right: 0;
        }

        .carousel-control-prev-icon {
            background: black no-repeat center center;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
        }

        .carousel-control-next-icon {
            background: black no-repeat center center;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");

        }
        body .carousel-indicators{
        bottom:0;
        }

        .carousel-indicators .active{
        background-color: blue;
        }


{% endblock css %}
  {% block body %}
  {% load static %}



<!--        carousel indicators starts from here-->

<div class="container" xmlns:data="http://www.w3.org/1999/xhtml">
    <div id="demo" class="carousel slide my-3" data-ride="carousel">'
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
    {% for i in range %}
       <li data-target="#demo" data-slide-to="{{i}}" ></li>
    {% endfor %}
</ul>

<!--        slideshow starts here-->

<div class="carousel-inner">
  <div class="carousel-item active">

      <div class="col-xs-3 col-sm-3 col-md-3">
        <div class="card" style="width: 18rem;">
          <img src='/media/{{product.0.image}}' class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
              card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      {% for i in product|slice:"1:" %}
      <div class="col-xs-3 col-sm-3 col-md-3">
        <div class="card" style="width: 18rem;">
          <img src='/media/{{i.image}}' class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
              card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

            {% for i in product|slice:"1:" %}
            <div class="col-xs-3 col-sm-3 col-md-3">
              <div class="card" style="width: 18rem;">
                <img src='{% static "shop/test.jpg" %}' class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>

            {% if forloop.counter|divisibleby:3 and forloop.counter > 0 and not forloop.last %}
             </div><div class="carousel-item">
            {% endif%}

            {% endfor %}
      </div>

      </div>
        </div>

<a class="carousel-control-prev " href="#demo" 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="#demo" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  {% endblock %}
</div>

这是我在index.html中的代码,我收到以下错误: Invalid block tag on line 117: 'endblock', expected 'empty' or 'endfor'. Did you forget to register or load this tag?

现在如何进行故障排除?

我得到的错误是: enter image description here

如何进行故障排除? 请帮我调试一下代码. 附注:浏览器说缺少结束块,但我在那里添加了结束块.

推荐答案

该错误是由代码中重复的for loop block引起的.此外,在扩展基本模板后,您应该将load static放在脚本的顶部

下面的代码应该可以工作:

{% extends 'shop/basic.html' %}
{% load static %}
{% block css %}
    .col-md-3 {
        display: inline-block;
        margin-left: -4px;
    }

    .col-md-3 {
        width: 100%;
        height: auto;
    }



    body .no-padding {
        padding-left: 0;
        padding-right: 0;
    }

    .carousel-control-prev-icon {
        background: black no-repeat center center;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
    }

    .carousel-control-next-icon {
        background: black no-repeat center center;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");

    }
    body .carousel-indicators{
    bottom:0;
    }
    .carousel-indicators .active{
    background-color: blue;
    }

    {% endblock css %}

{% block body %}

<!--   carousel indicators starts from here-->

<div class="container" xmlns:data="http://www.w3.org/1999/xhtml">
<div id="demo" class="carousel slide my-3" data-ride="carousel">'
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
{% for i in range %}
   <li data-target="#demo" data-slide-to="{{i}}" ></li>
{% endfor %}
</ul>

<!--        slideshow starts here-->

  <div class="carousel-inner">
  <div class="carousel-item active">

  <div class="col-xs-3 col-sm-3 col-md-3">
    <div class="card" style="width: 18rem;">
      <img src='/media/{{product.0.image}}' class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

    {% for i in product[1:] %}
    <div class="col-xs-3 col-sm-3 col-md-3">
        <div class="card" style="width: 18rem;">
        <img src='{% static "shop/test.jpg" %}' class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
            card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
        </div>
    </div>

        {% if forloop.counter|divisibleby:3 and forloop.counter > 0 and not forloop.last %}
         <div class="carousel-item"></div>
        {% endif%}

    {% endfor %}
  </div>

  </div>
    </div>

<a class="carousel-control-prev " href="#demo" 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="#demo" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
{% endblock %}
</div>

Html相关问答推荐

我如何 Select 外部html文件元素作为选项,并显示在一个div与jQuery?

如何从ThymeLeaf模板中分离CSS

浏览器是在调整大小还是在全屏上交换视频源?

将弹性容器设置为内容宽度

在窄屏幕上显示表格,每个单元格占一行

你将如何为手机制作导航栏

Vutify中看不见的V行

Django HTML标记-Merge for Loop with Conditional语句

如何在css中旋转块时调整内容宽度、高度

是否有语义 HTML 可以澄清含义?

如何保持块扩展以填充视口?

并排放置两个 div,同时 div2 环绕 div1

图像如何能达到 HTML 表格的全宽?

网页设计不适合移动设备

具有 css 高度的输入元素:100% 溢出父 div

屏幕缩小时背景图像裁剪高度

修复 Vue 3 Component 中的 CSS 以显示后面的 Select 器样式而无需 !important

pull-right 不适用于 bootstrap alert 内的按钮

如何使用动画拆分和对齐文本块

粘性定位的子元素忽略父母的填充