DjangoHTML中的可迭代串列？

我想使用引導程式使用 DRY 方法制作輪播。我的想法（甚至可能不可行）是有一個串列或字典并回圈瀏覽影像位置。這是我到目前為止所寫的。

            <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 %}``` 

uj5u.com熱心網友回復：

嘗試像這樣從后端傳遞串列 -

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>

uj5u.com熱心網友回復：

將影像作為您視圖中的背景關系傳遞

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 %}

標籤：

上一篇：為串列獲取更高的粒度，同時為每個新點將另一個串列中的相應元素設定為0

下一篇：按特定索引合并python串列