Flask Jinja2 不呈现 bootstrap 旋转木马

Question

我想要呈现 bootstrap 轮播和其他嵌套的 html 元素。我是 Jinja2 的新手，在互联网上没有看到任何关于这个特定问题的讨论。

这是我的 python

@app.route("/")
def index():
    r = requests.get(os.environ['AWS_Product_URL'])
    prods = list(json.loads(r.text))
    return render_template("index.html", my_products=prods)

这个有效

{% for key in my_products %}
    <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
{% endfor %}

但是这个没有

{% for key in my_products %}
     <div class="carousel-item">
         <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
     </div>
{% endfor %}

我采用了一个现有模板并尝试使其动态化。 class 存在。我很困惑为什么 Jinja2 在 html.

中的嵌套项有问题

为什么？？

Answer 1

您可能只是缺少将 class 活动添加到轮播项目

bootstrap轮播项目需要至少一个活动元素，所有其他元素将被隐藏。

所以尝试添加类似

的东西

{% for key in my_products %}
     <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
         <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
     </div>
{% endfor %}

以防万一，这是我测试过的模板，假设 my_products 不为空，它应该可以正常工作。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner text-center">
              {% for key in my_products %}
              <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
              </div>
              {% endfor %}
            </div>
            <button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

Flask Jinja2 不呈现 bootstrap 旋转木马

Flask Jinja2 not rendering bootstrap carousel

python

jinja2

flask