Das CSS-Almanach neu arbeiten

css-tricks Almanac hat einen neuen Look!

Ich glaube, Sie sind bereits mit diesem riesigen Teil von CSS -Tricks - Almanac (Jahrbuch) vertraut. Hier veröffentlichen wir Referenzdokumentation für CSS -Selektoren und Eigenschaften. Wir haben dies nur seit der Antike veröffentlicht… oder zumindest seit 2009 (als die meisten ursprünglichen Arbeiten abgeschlossen waren). Im Zeitalter der Webseiten war das fast der Beginn der Zeit. Wir können es sogar das erste Jahr vor Responsive Design (BR) oder das 14. Jahr nach Responsive Design (AR) nennen.

Sie müssen nicht sagen, dass das Schreiben von CSS im 14. Jahr nach dem reaktionsschnellen Design sehr unterschiedlich ist. Kurz gesagt, Almanac hat nicht mit dem Tempo von CSS Schritt gehalten, was viel mehr als Eigenschaften und Selektoren ist. Tatsächlich haben wir uns nur ungern Almanach ändern, weil es im Backend konfiguriert ist, und ich bin sicher, ich habe dort ein oder zwei Geister gesehen, als ich ihn berührt habe.

Zugriff auf Almanac finden Sie eine breitere Palette von CSS-Informationen, einschließlich der speziellen Abschnitte von Pseudo-Klasse-Selektoren, -funktionen und @-Regeln zusätzlich zu den vorhandenen Eigenschaften und Selektorabschnitten. Wir haben noch viel zu tun (Sie sollten helfen!), Aber die Architektur existiert bereits und es gibt Raum, um bei Bedarf zu expandieren.

Dieser Job ist nicht einfach und so beängstigend, wie ich dachte. Lassen Sie mich Sie durch einige Dinge führen, die ich tue.

aktueller Status

Wir haben seit dem ersten Tag stolz WordPress. Dies gibt viele Vorteile, insbesondere wenn es um Vorlagen geht. Es mag nicht jedermanns Favorit sein, aber ich bin sehr zufrieden damit und entschlossen dem ihm widmet- Alles!

Wenn Sie mit WordPress vertraut sind, wissen Sie, dass der Inhalt hauptsächlich in zwei Typen unterteilt ist: Seite und Artikel . Der Unterschied zwischen den beiden ist minimal - fast nicht zu unterscheiden, da beide dieselbe Bearbeitungsschnittstelle verwenden. Natürlich gibt es einige Nuancen, aber der Hauptunterschied zwischen den Seiten besteht darin, dass sie geschichtet sind, was bedeutet, dass sie am besten für die Aufbau von Eltern-Kind-Seitenbeziehungen geeignet sind und so eine gut strukturierte Sitemap schaffen. Gleichzeitig konzentrieren sich Artikel mehr auf Metadaten, und wir können Inhalte organisieren, indem wir Tags hinzufügen oder in Kategoriegruppen oder jede benutzerdefinierte Taxonomie einbringen, die wir zu unseren Fingerspitzen erhalten können.

Almanac basiert auf Seiten, nicht auf Artikeln. Seiten excel in hierarchischen Strukturen, während Almanac ein hoch strukturierter Bereich mit einem typischen Standort-Map-Fluss ist, der gerade der alphabetischen Reihenfolge folgt. Ein Eintrag für ein CSS -Attribut wie aspect-ratio hat beispielsweise den Pfad: Almanac → Eigenschaft → A → Seitenverhältnis.

Das klingt gut, oder? Nicht schlecht, aber die Abfragen von Seiten in Vorlagen ist schwieriger als Artikel, die mehr Metadaten für die Filterung haben usw. Andererseits ist die Seite nicht. (Zumindest nicht offensichtlich.) Sie werden normalerweise als strukturierte Objekte zurückgegeben, da hierarchische Strukturen. Das bedeutet aber auch, dass wir alle diese Seiten manuell erstellen müssen, im Gegensatz zu Tags und Kategorien, die automatisch Archive generieren. Erstellen einer leeren Seite für den Buchstaben "A", der eine Unterseite der Seite "Eigenschaften" ist - selbst eine Unterseite von Almanac - fühlt sich zu dumm an, nur eine logische Position zu haben, um Eigenschaften einzufügen, die mit dem Buchstaben A beginnen. A. Dies muss sowohl für Eigenschaften als auch für Selektoren erfolgen.

Das eigentliche Problem ist, dass Almanac unzureichend ist. Wir möchten dort andere CSS -Inhalte wie Funktionen und @ Regeln veröffentlichen, aber Almanac wurde ursprünglich so erstellt, dass zwei Inhalte angezeigt werden. Deshalb haben wir nie etwas anderes gepostet. Dies ist auch der Grund, warum sich der allgemeine Selektor und der Pseudo -Selektor im selben Eimer befinden.

Ausbau des Raums, um mehr aufzunehmen, ist der Umfang meiner Arbeit und ich weiß, dass ich die Möglichkeit habe, auf dem Weg zu stylen.

Eine Vorlagenregel alle

Das macht es. Der anfängliche Ansatz bestand darin, eine einzelne Vorlage zu verwenden, um die Almanach -Indexierung und alphabetische Seiten zu verarbeiten, auf denen die Selektoren und Eigenschaften aufgeführt sind. Das ist sehr klug. Auf der Seite wird erstmals überprüft, ob es sich bei der aktuellen Seite um eine Almanach -Seite befindet sich oben in der Seitenhierarchie. Wenn es sich um diese Seite handelt, gibt die Vorlage das Ergebnis des Selektors und das Attribut in zwei Spalten auf derselben Seite aus.

Diese Abfrage ist sehr beeindruckend.

<?php function letterOutput($letter, $selectorID, $propertyID) {
  $selector_query = new WP_Query(array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'post_parent' => $selectorID,
    'posts_per_page' => -1,
    'orderby' => 'title',
    'order' => "ASC"
  ));

  $html = '<div>';
  $html .= '<div><a>' . $letter . '</a></div>';
  $html .= '<div>';

  while ($selector_query->have_posts()) : $selector_query->the_post();

    $html .= '<details><summary>';
    $html .= '<h2><code>';
    $html .= get_the_title();
    $html .= '</code></h2>';
    $html .= '</summary>';
    $html .= get_the_excerpt();
    $html .= '<code>';
    $html .= get_post_meta(get_the_id(), 'almanac_example_code', true);
    $html .= '</code>';
    $html .= '<a href="'%20.%20get_the_permalink()%20.%20'">Continue Reading</a>';
    $html .= '</details>';
  endwhile;

  $html .= "</div>";
  $html .= "</div>";

  return $html;
}

Dies ist wirklich nur die Hälfte des Code -Snippets. Beachten Sie, dass es nur mit $selector_query gekennzeichnet ist. Es wird erneut über $property_query übergehen.

Von dort aus muss die Funktion 26 -mal bezeichnet werden: einmal pro Buchstaben im Alphabet. Es sind drei Parameter erforderlich, nämlich den Buchstaben (z. B. a) und die Seiten -ID der "A" -Reite (z. B. 14146, 13712), bei denen die Selektoren und Eigenschaften auftreten.

<?php echo letterOutput("A", 14146, 13712);
  // B, C, D, E F, G, etc.
?>

Was ist, wenn wir derzeit nicht auf der Indexseite sind? Die Vorlage gibt eine Liste von Buchstaben für die Unterseite dieses spezifischen Teils aus (z. B. Eigenschaften). Eine Vorlage ist genug.

Abfrage -Unterseite

Ich kann die Funktion letterOutput() ändern, um mehr Seiten -IDs zu erhalten, um die Buchstabenseiten anderer Teile anzuzeigen. Aber ehrlich gesagt will ich das einfach nicht tun. Ich habe mich entschlossen, die Funktion auf einen Seiten -ID -Parameter anstelle von zwei zu reduzieren und dann die Vorlage aufzuteilen: einen für den Hauptindex und einen für den "Unterabschnitt" (falls vorhanden). Ja, das bedeutet, dass es in meinem WordPress -Themenverzeichnis mehr Vorlagen geben wird, aber das ist hauptsächlich für mich persönlich und es macht mir nichts aus. Ich kann die Unterseite überprüfen, auf denen ich mich befinde (den Attributindex, Selektorindex, @ Rule -Index usw.) und den Inhalt dieser Unterseite separat abrufen.

Was ist ein weiteres Problem mit der Funktion

? Alle erzeugten Tags sind in der while() -Anweisung eingelassen. Auch wenn ich die Abfrage nach teilweise analysieren möchte, um ein einzelnes Vorlagenschema zu erhalten, ist es nicht so, als ob ich eine if() -Antage irgendwo darin platzieren möchte, ohne einen tödlichen Php -Fehler oder eine tödliche Benachrichtigung zu verursachen. Auch hier bin ich nicht daran interessiert, die Funktion vollständig zu ändern.

Buchstabe Archiv

leere Unterseite für alle diese Buchstabenabschnitte und das Anbringen an der richtigen übergeordneten Seite ist eine Menge manueller Arbeit. Ich weiß, weil ich es getan habe. Natürlich gibt es bessere, selbst Programmiermöglichkeiten, aber die Umwandlung von Inhalten von Seiten zu Artikeln und aus dieser Perspektive hat mich nicht angezogen, und ich hatte es zu dieser Zeit eilig. Wir sind nicht immer in der Lage, einen „idealen“ Weg zu finden, um Dinge zu tun.

Laut WordPress ist es eine Fehlbezeichnung, eines dieser Buchstabenseiten "Archive" zu bezeichnen, aber genau so betrachte ich die Unterseite verschiedener Abschnitte - wenn der Inhalt eher als Artikel als als Seiten erstellt wurde, wäre dies. Wenn ich einen Pseudo -Selektorabschnitt habe, benötige ich die einzelnen Seiten von a bis z, was wiederum als übergeordnete Seiten jedes Pseudo -Selektors fungiert. Drei neue Abschnitte mit jeweils 26 Buchstaben, was bedeutet, dass ich 78 neue Seiten erstellt habe. wunderbar.

Sie können auf die Buchstabe -Seite zugreifen, indem Sie die Breadcrumbs der Almanac -Seite (z. aspect-ratio

Wir haben diese Seiten nie ernst genommen. Sie existieren für die Struktur, aber nicht viele Menschen werden sie besuchen. Sie sind im Wesentlichen Platzhalter. Nützlich, ja, aber immer noch Platzhalter. Wir sind so skrupellos über diese Seiten, dass wir sie nie offiziell gestylt haben. Dies ist ein CSS -Erbmodell, das Ihnen sagt, was.

Hier habe ich die Gelegenheit genutzt, es visuell zu polieren. Ich habe mich mit den riesigen und groben Dingen im Design zu tun, seit ich vor ein paar Monaten zu diesem Job zurückgekehrt bin. Zum Beispiel den übergroßen Titel und die dicken Schatten, die Sie sehen.

Dies ist nicht meine natürliche Ästhetik, aber ich denke, es passt gut zu CSS-Tricks ... vielleicht, nur vielleicht, Freude werden auf Chris Coyiers Gesicht vergießen. Vielleicht.

Navigation

Eine weitere Verbesserung wurde der auf der Hauptindexseite angezeigten Navigation hinzugefügt. Ich habe die Briefnavigation oben durch eine Navigation ersetzt, die Sie in jeden Abschnitt bringt, und jetzt können wir die Seite direkt in WordPress bearbeiten, ohne die Entwicklung zu umgehen.

Das einzige, was mich stört, ist, dass ich es hartcodiert habe, anstatt es in ein ordnungsgemäßes WordPress -Menü zu machen, das ich über die Administratorschnittstelle verwalten kann.

[Fügen Sie seiner To-Do-Liste ein Todo hinzu. ]

Da ich den Almanac -Index aus der vollständig angezeigten Selektor- und Attributliste befreit habe, kann ich ihn wirklich als Index für die große Anzahl von Teilen verwenden, die wir hinzufügen.

Möglicherweise müssen wir den Inhalt der Hauptseite irgendwann mit der Navigation weniger redundant machen, aber ich denke, dies ist ein guter Start, aus dem wir erstellen können. In Bezug auf den Titel stimmt es jetzt mit anderen "Top" -Seiten überein, die im Hauptmenü der Website verknüpft sind, was nicht schlecht ist.

Oh, übrigens, wenn wir über die Navigation sprechen, wurde der neue Abschnitt in die vorhandene linke Seitenleiste der einzelnen Almanach -Seiten hinzugefügt, um zu anderen Einträgen in einem Abschnitt zu springen, ohne in den Index zurückzukehren.

Schnelle Referenz

Die letzte Verbesserung, die ich erwähnen werde, ist klein, aber ich denke, sie hat einen positiven Einfluss. Wenn Sie zu einem Teil des Index gehen, d. H.

Wir haben immer großen Wert auf das "schnelle Zugangsbeispiel" gelegt, und ich denke, dies hat dies in hohem Maße geholfen.

"Sie können [x] ..."

machen

Ja, es gibt immer noch viele Möglichkeiten, sich zu verbessern. Mein einziges Ziel ist es, die Dinge so zu verändern, dass Almanac Cover mehr als nur Selektoren und Eigenschaften und vielleicht ein Styling hier und da ist. Ich möchte auch viele Dinge tun, vielleicht werden wir es tun, wenn auch Schritt für Schritt.

Was für etwas? Nun, zuallererst diese hartcodierte Indexnavigation. Aber was noch wichtiger ist, ich möchte die Hauptseite weiter drücken. Es spielte früher eine große Rolle und ich habe es fast abgewischt. Es wäre schön, einen Weg zu finden, um alle Einträge - für alle Abschnitte - aufzulisten, was wir getan haben, als wir nur zwei Abschnitte hatten. Das habe ich zu studieren.

Ja, wir möchten dort mehr CSS -Inhalte abdecken, z. Almanac ist eine Ressource für unser Team und beziehen uns jeden Tag darauf. Wir hoffen, dass es voller nützlicher Informationen ist.

Das war's.

Sie können jetzt aufhören zu lesen und direkt zu Almanac zu gehen, um einen virtuellen Spaziergang zu erhalten.

Das obige ist der detaillierte Inhalt vonDas CSS-Almanach neu arbeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!