Schwierigkeit mit Paginierung und Zeilenformatierung in Django Vorlage

Question

Ich versuche, Seitennummerierung zu implementieren. Ich folge hauptsächlich Django-Dokumentation für die Paginierung, https://docs.djangoproject.com/en/1.8/topics/pagination/...I bin mir nicht sicher, was ich falsch gemacht habe, aber der Paginierungseffekt wird nicht aktiviert: Wenn ich Seite nur drei Posts eingestellt habe, zeigt es immer noch neun Posts. Ich habe nichts Besonderes gemacht, ich habe einfach die Dokumentation verfolgt.

def category_detail(request, slug): 

    obj = NewsCategory.objects.get(slug=slug) 
    newsInCat = obj.news_set.all() #for the list of news 
    paginator = Paginator(newsInCat, 3) # Show 25 contacts per page 
    page = request.GET.get('page') 
    try: 
     news_set = paginator.page(page) 
    except PageNotAnInteger: 
     # If page is not an integer, deliver first page. 
     news_set = paginator.page(1) 
    except EmptyPage: 
     # If page is out of range (e.g. 9999), deliver last page of results. 
     news_set = paginator.page(paginator.num_pages) 


bestInCat = obj.news_set.get_bestInCat() 
specialInCat = obj.news_set.get_special() 
mustSeeInCat = obj.news_set.get_mustSeeInCat() 
recommend = obj.news_set.get_recommend() 
ad2 = Sponsored.objects.get_ad2() 

context = { 
    "obj":obj, 
    "news_set":news_set, 
    "newsInCat":newsInCat, 
    "bestInCat":bestInCat, 
    "specialInCat":specialInCat, 
    "mustSeeInCat":mustSeeInCat, 
    "recommend":recommend, 
    "ad2":ad2 
} 

und das folgende ist mein HTML ... neben Seitennummerierung habe ich noch ein Problem. Wenn der Titel des Posts zu lang wird und eine andere Zeile unterbricht, wird das Format meiner Seite durcheinander gebracht. Es sieht aus wie dieses

<div class="row"> 
<article> 
    {% for news in newsInCat %} 
    <div class='col-sm-4'> 

    <div class="content"> 
    <figure class="story-image"> 
     <a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}" class="img-rounded" alt="Cinque Terre" width="360" height="267"></a> 
    </figure> 
     <div id="forever "style="margin-bottom:30px;"> 
     <a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><h4 style="font-size: 18px; 
    font-weight: 400;">{{news.title}}</h4></a> 
    </div> 
     </div> 
    </div> 
    {% endfor %} 
</article> 
</div> 


<div class="pagination"> 
    <span class="step-links"> 
     <!-- {% if news_set.has_previous %} 
      <a href="?page={{ news_set.previous_page_number }}">previous</a> 
     {% endif %} 

     <span class="current"> 
      Page {{ news_set.number }} of {{ news_set.paginator.num_pages }}. 
     </span> --> 

     {% if news_set.has_next %} 
      <a href="?page={{ news_set.next_page_number }}">Load More</a> 
     {% endif %} 
    </span> 
</div> 

Answer 1

Es gibt zwei getrennte Probleme bei der Arbeit hier, die in den oben genannten Antworten angegeben wurden:

1. Sie sind nicht Bootstrap mit richtig: Sie können sie aber zusammen <div class="col-sm-4"> mehrere anfügen können, werden Sie sehen, das unregelmäßige kollabierende Verhalten in deinem Screenshot, wenn sie unterschiedliche Höhen haben. Der Zweck von <div class="row"> ist sicherzustellen, dass Ihre Spalten in separaten Zeilen angezeigt werden. Weitere Informationen finden Sie unter Must Bootstrap container elements include row elements?.

   Sie können dies wie folgt in Ihrer for-Schleife mit Code lösen eine neue Zeile jedes dritte Element hinzuzufügen:

   {% if forloop.counter|divisibleby:3 %} 
   </div> 
   <div class="row"> 
   {% endif %} 
   

2. Sie sind nicht das richtige Kontextobjekt in Ihrer Vorlage mit: Die Paginatorobjekt wird in Ihrem Kontextobjekt als news_set übergeben, aber die Vorlage verwendet ein anderes Kontextobjekt: newsInCat, das nicht paginiert ist. Wenn Sie @ Vorschlag des Sayse folgen der Verwendung des news_set Objekts, sollten Sie in guter Form sein:

   {% for news in news_set %} 
   

Als letzten Vorschlag, der <article> Tag nicht zu sein scheint etwas zu tun, außer semantischen Wert geben . Warum benutze es nicht einfach anstelle des div, so dass du <article class="col-sm-4"> hast?

Und als letzter Punkt ist Camelcase im Allgemeinen in Python verpönt. Versuchen Sie es mit_underscores_with_lowercase, wie Sie es bereits mit news_set getan haben.

Hinzufügen all diese Vorschläge, würden Sie brauchen nur Ihre Vorlage, so etwas zu ändern:

<div class="row"> 
    {% for news in news_set %} 
    <article class="col-sm-4"> 
    <!-- add your article content here...and clean it up! You have unnecessary spaces, inconsistent use of single and double quotes, and inline styles that (probably) should be defined in an external stylesheet. --> 
    </article> 
{% if forloop.counter|divisibleby:3 %} 
</div> 
<div class="row"> 
{% endif %} 
    {% endfor %} 
</div> 

Answer 2

ich auf Ihre HTML/CSS-Formatierung Problem sprechen kann. col-sm-4 sagt mir, Sie verwenden Bootstrap, die Layouts in Bezug auf 12 Spaltenbreite definiert. Bootstrap wird immer versuchen, die With aller Zeilen gleich 12 zu machen.

Gerade jetzt werden Sie über alle Objekte Schleifen und Hinzufügen von jeweils n Spalten der Breite col-sm-4. Booststrap versucht sicherzustellen, dass jeder ein Drittel der Reihe einnimmt, aber Sie fügen mehr als 3 divs hinzu, was mehr als 12 Spaltenbreite insgesamt ist. Sobald die Spalte voll ist (beginnend mit der 4. Nachricht), verschiebt Bootstrap die divs so nah wie möglich an die Spitze der row, während immer noch die Regel, dass die Breite nur 12 sein kann.

In dem Fall Sie im Bild, Bootstrap verschiebt die 4. und 5. von divs, weil der Offset ermöglicht es ihnen näher an der Spitze der row.

Um dies zu beheben, müssten Sie jeden Satz von drei Nachrichten haben, in einem eigenen Reihe, so dass Ihre 3 col-sm-4 divs eine Breite von 12

Answer 3

insgesamt die Vorlage basiert weg zu urteilen, müssen Sie sein noch darunter die vollständige Liste sowie die paginierte Satz

In Ihrer Vorlage, die Sie über newsInCat Iterieren anstelle von news_set

{% for news in newsInCat %} 

sollte

{% for news in news_set %}