Django HTML中的可迭代列表？答案

【问题标题】：Iterable list in Django HTML?Django HTML中的可迭代列表？
【发布时间】：2022-01-17 13:13:34
【问题描述】：

我想使用引导程序使用 D.R.Y. 制作轮播。方法。我的想法（甚至可能不可行）是有一个列表或字典并循环浏览图像位置。这是我到目前为止所写的内容。

            <div class="carousel-inner">
              {% with images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg'] %}
              {% for image in images %}
              <div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
                <div class='container'>
                  <section class='time'>
                    <h3><strong>HOURS</strong></h3>
                    <h3><strong>Monday - Saturday</strong></h3>
                    <h3><strong>11 a.m. - 9 p.m.</strong></h3>
                </section>
            
                <div class='headline'>
                    <h1>Title</h1>
                    <h2>Menu</h2>
                </div>
                
                <section class='address'>
                    <h3> <strong>NAME</strong> </h3>
                    <h4>Phone</h4>
                    <h4>Address</h4>
                    <h4>City</h4>
                </section>
                </div>
              </div>
              {% endfor %}
              {% endwith %}```

【问题讨论】：

去掉你在static标签内添加的大括号
为什么不从后端传递图像列表？
@Ahtisham 我该怎么做？我对 python/django 非常陌生！
@GahanVig 在“with”语句中出现错误
你有那个模板的视图吗？

标签： html django list variables static

【解决方案1】：

尝试像这样从后端传递列表 -

Views.py 渲染模板的函数

def index(request): # Change the name of the function as per your requirements
    context = {
        "images": ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']     
    }
    return render(request, "index.html", context) # Change the path of the template as per your requirements

现在 images 是一个变量，其值为包含不同图像路径的列表的值，您可以在模板中使用这些路径

现在您的 .html 文件将如下所示 -

            <div class="carousel-inner">
              {% for image in images %}
              <div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
                <div class='container'>
                  <section class='time'>
                    <h3><strong>HOURS</strong></h3>
                    <h3><strong>Monday - Saturday</strong></h3>
                    <h3><strong>11 a.m. - 9 p.m.</strong></h3>
                </section>
            
                <div class='headline'>
                    <h1>Title</h1>
                    <h2>Menu</h2>
                </div>
                
                <section class='address'>
                    <h3> <strong>NAME</strong> </h3>
                    <h4>Phone</h4>
                    <h4>Address</h4>
                    <h4>City</h4>
                </section>
                </div>
              </div>
              {% endfor %}
              </div>

【讨论】：

【解决方案2】：

将图像作为上下文传递给您的视图

def your_view(request):
   images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
   return render(request, "your-file.html", {images: images})

现在在您的HTML 中，您将可以访问您的列表，因此您可以执行以下操作：

<div class="carousel-inner">
              {% for image in images %}
              <div class="carousel-item active" data-bs-interval="10000" style="background-image:url({% static image %})">
                <div class='container'>
                  <section class='time'>
                    <h3><strong>HOURS</strong></h3>
                    <h3><strong>Monday - Saturday</strong></h3>
                    <h3><strong>11 a.m. - 9 p.m.</strong></h3>
                </section>
            
                <div class='headline'>
                    <h1>Title</h1>
                    <h2>Menu</h2>
                </div>
                
                <section class='address'>
                    <h3> <strong>NAME</strong> </h3>
                    <h4>Phone</h4>
                    <h4>Address</h4>
                    <h4>City</h4>
                </section>
                </div>
              </div>
              {% endfor %}

【讨论】：