我怎样才能让我的模板在两个不同的 div 标签上显示一个列表而没有冗余

Question

我有一个来自我的模型的列表，但我希望我的模板以 4 个或列表总长度的一半为一组显示列表元素示例：假设我的列表中有 10 个元素，我想要 5 个正确的大小和 5 在左侧。请看下面的截图。

这就是我希望我的页面的样子：

但这就是我得到的：

这是我的 HTML 文件。

  <div class="section-title">
    <h2>Skills</h2>
    <p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
        cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc dfkjhvxjdknfxzjxvkc.
    </p>
  </div>
  

  {% for skill in skills_list%}  
 
  <div class="row skills-content">
   
    <div class="col-lg-6" data-aos="fade-up">
      <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

    </div>
  
  
  </div>
  {% endfor %}
</div>

views.py:

#### TEST
class TestView(generic.ListView):
   model = Skills
   template_name = 'portfolio_app/test.html'


########################URL.py
from django.urls import path
from portfolio_app.models import *
from . import views


urlpatterns = [
    path('',views.fact,name='index'),
    #path('index/',views.SkillView.as_view,name='index'),
    path('about/',views.about_me,name='about'),
    path('service/',views.ServiceView.as_view(),name='service'),
    path('resume/',views.ResumeView.as_view(),name='resume'),
    path('contact/',views.ContactView.as_view(),name='contact'),
    path('test/',views.TestView.as_view(),name='test'),

]

Answer 1

您可以尝试将 <div class="row skills-content"> 移动到 for 循环之外，如下所示：

<div class="section-title">
    <h2>Skills</h2>
    <p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc
        d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
        cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc
        dfkjhvxjdknfxzjxvkc.
    </p>
</div>

<div class="row skills-content">
    {% for skill in skills_list%}
    <div class="col-lg-6" data-aos="fade-up">
        <div class="progress">
            <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
            <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}}
                     aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

    </div>
    {% endfor %}
</div>

并且您应该删除多余的最后 </div> 以使其正常工作。

Answer 2

像这样使用slice：

  <div class="row skills-content">
    <div class="col-lg-6" data-aos="fade-up">
      {% for skill in skills_list|slice:":5" %}   
        <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
     {% endfor %}
   </div>
   <div class="col-lg-6" data-aos="fade-up">
     {% for skill in skills_list|slice:"5:" %}   
       <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
       </div>
    {% endfor %}
   </div>
  </div>

要去除多余的 div，请为技能创建一个单独的模板，并使用 include 模板标签将其包含在当前模板中，如下所示：

skills.html:

<div class="progress">
   <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
     <div class="progress-bar-wrap">
       <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
     </div>
</div>

你现在的寺庙：

  <div class="row skills-content">
    <div class="col-lg-6" data-aos="fade-up">
     {% for skill in skills_list|slice:":5" %}
      {% include 'skills.html' with skill=skill %}
     {% endfor %}
   </div>
  </div>

与第二个循环类似。

我怎样才能让我的模板在两个不同的 div 标签上显示一个列表而没有冗余

How can I have my template display a list on two different div tags without having redundancies

python

html

django

django-views

django-templates