# 123: Erstellen des Videoarchivs, Teil 2 (Navigation) - CSS-Tricks

Anonim

Wir haben gerade einen aufregenden Teil dieses Redesigns abgeschlossen, in dem wir ein paar grobe Markups auf der Videoarchivseite wegwerfen und durch neue, intelligente, saubere und automatisch generierte Markups ersetzen mussten. Wir haben jedoch noch mehr Arbeit auf diesen Archivseiten zu erledigen. Da die Archive automatisch in Gruppen generiert werden, benötigen wir eine Navigation (wirklich Paginierung), um zu älteren Gruppen von Screencasts zu gelangen.

In der Vergangenheit konnten wir diese Paginierung zu einem statischen Teil der Seite machen, da wir das gesamte Markup manuell geschrieben haben. Das macht mir im Allgemeinen nichts aus, aber das ist einfach nicht mehr möglich. Wenn wir jetzt einen neuen Screencast veröffentlichen, wird ein Screencast vom Ende der ersten Seite auf die zweite Seite verschoben. Wenn Sie also im statischen Code so etwas wie "# 115 - # 95" sagen, ist dies nur für eine sehr kurze Zeit korrekt.

Zuerst erhalten wir das richtige Styling, indem wir einige Navigationsklassen mit schwarzen Balken verwenden, die wir an anderer Stelle verwendet haben (wie auf einzelnen Snippets-Seiten).

Dann fangen wir an, die Paginierung tatsächlich zum Laufen zu bringen. In WordPress können Sie der URL etwas wie "/ page / 2" hinzufügen, und es wird immer noch dieselbe Seite gerendert, die zuvor gerendert wurde. Nur erhalten Sie Zugriff auf eine globale Variable namens $ paged, die auf "2" gesetzt wird ”. Wir könnten diese Nummer in unserer Abfrage verwenden, um anzupassen, welche Videos wir anzeigen. Aber anstatt es so zu machen, hat WordPress eine noch intelligentere Möglichkeit, damit umzugehen, und das trägt 'paged' => $pagedzur Abfrage bei. Das erklärt einige funky Mathematik, die passiert, wenn wir versuchen, den Versatz selbst zu handhaben.

Wir passen die URLs in unserer statischen Navigation an diese neuen Links im Paginierungsstil an. Das Problem ist jetzt, dass die Zahlen in den Links nicht mehr korrekt sind. Wir versuchen zuerst etwas Einfaches wie "5, 4, 3, 2, 1". Aber das fühlt sich irgendwie lahm und langweilig an und ist nur verwirrend, da diese Zahlen nicht mit den tatsächlichen Paginierungszahlen übereinstimmen.

Wir entdecken eine seltsame Reihenfolge von Videos, die ein wenig besorgniserregend ist. Wir passen die Abfrage an, wie sie bestellt wird, aber es gibt noch einige Probleme. Letztendlich entscheiden wir, dass wir sie nach Datum bestellen müssen, und einige Anpassungen an den veröffentlichten Daten der Screencasts müssen vorgenommen werden, nachdem die Site live geschaltet wurde. Grunzen, aber langfristig gut.

Letztendlich (aus dem Video, glaube ich) verwenden wir am Ende eine Paginierung im griechischen Stil (Alpha, Beta, Gamma), die in ihrer Willkür funktioniert (ähnlich wie unsere willkürlichen drei Bären, die Medienabfragen benennen). Wie in "Zeta" klingt später und es ist dunkler grau, so dass die Metapher für "älter" vollständig ist.