Styling -Kommentar -Threads

Ein gut gestalteter Bewertungs-Thread scheint einfach zu sein, aber nicht. Dieser Artikel führt Sie nach und nach, schöne und benutzerfreundliche Kommentar-Threads zu erstellen.

Elemente eines guten Kommentar -Threads

Lassen Sie uns vor dem Entwerfen und Schreiben von Code die Eigenschaften eines guten Kommentar -Threads verstehen:

1. Kommentare sind lesbar und alle wichtigen Informationen (Autor, Stimmen, Zeitstempel und Inhalt) sind auf einen Blick klar.
2. Die verschiedenen Teile des Kommentars sind visuell unterschiedlich, so dass der Benutzer die Funktionen jedes Teils sofort verstehen kann. Dies ist besonders wichtig für Aktionsschaltflächen (z. B. Antwort, Bericht) und Links.
3. Es gibt klare hierarchische visuelle Hinweise zwischen Kommentaren . Dies ist eine notwendige Bedingung für verschachtelte Kommentare (d. H. Ein Kommentar antwortet auf einen anderen).
4. Scrollen Sie einfach und schnell zu bestimmten Kommentaren , insbesondere zu übergeordneten Kommentaren in Kindern -Kommentaren (Antwort).
5. Kommentare haben Umschaltungen , mit denen Benutzer Kommentare und ihre Antworten verbergen und anzeigen können.

Außerdem gibt es einige Zuckergüsse auf dem Kuchen:

1. Benutzer können Kommentare markieren, damit Moderatoren unangemessene Inhalte bemerken können.
2. Kommentare können gemocht oder geschlagen werden, um zu zeigen, ob der Kommentar nützlich ist.
3. Nur die ersten Kommentare werden angezeigt , und Benutzer können weitere Kommentare laden.

Diese erweiterten Funktionen erfordern JavaScript -Unterstützung. Abhängig vom Technologiestapel können diese Funktionen auch auf der Serverseite implementiert werden, insbesondere die Anzahl der Stimmen und den Tag -Status von Kommentaren. Daher konzentriert sich dieser Artikel auf das Style -Design von Kommentar -Threads .

Basis -Kommentar -Thread

Die Struktur eines einzelnen Kommentars ist einfach. Hier ist ein Framework für einen einzigen Kommentar:

Antworten haben eine zusätzliche linke Eindrückung, um die Anforderungen der visuellen Hierarchie zu erfüllen. Die Markierungen der obigen Struktur können so aussehen:

<div>
  <div>
    <div>
      Gefällt mir</div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{Autor}}</a>
      <p>
        {{Stimmen}} • {{{add time}}
      </p>
    </div>
  </div>
  <div>
    <p>
      {{Kommentarinhalt}}
    </p>
    Antwort auf den Bericht</div>
  <div>
    
  </div>
</div>

Die zusätzliche linke Eindrücke der Antwort bietet visuelle Hierarchie -Eingabeaufforderungen. Gefällt mir und tippen Sie auf Schaltflächen und verwenden Sie den HTML -Zeichencode als Symbole. sr-only Klasse verbirgt Elemente auf allen Geräten mit Ausnahme der Bildschirmleser und verbessert die Zugänglichkeit von Stimmbildern.

Fügen Sie einen Link hinzu, um zum Kommentar zu springen

Fügen Sie als nächstes eine Funktion hinzu, die den Benutzern dabei hilft, schnell zu Kommentaren zu scrollen. Dies ist besonders nützlich, wenn der Benutzer zu dem übergeordneten Kommentar springen möchte, auf den er reagiert.

Ein Design besteht darin, "Rand" auf der linken Seite des Kommentars zu klicken:

Dazu drücken wir den Kommentarkörper nach rechts und richten ihn mit der Antwort aus. Dieses Design verbessert auch die Hierarchie zwischen Kommentaren und Sie können die Verschachtelung des aktuell gelesenen Kommentars bestimmen, indem Sie einfach die Anzahl der Links an der linken Grenze betrachten. Natürlich können Sie auch sofort zu einem höheren Kommentar springen, indem Sie auf den Rand-Link klicken.

Dazu müssen wir jedem Kommentar ein Ankerelement hinzufügen (<a></a> ) und entwerfen Sie diese Ankerelemente in klickbare Grenzen.

Hier sind einige Änderungen zu verstehen:

• Fügen Sie jedem Kommentar einen Ankerlink hinzu und stylen Sie ihn links mit einem Rand.
• Der Kommentar -Hauptcharakter ist mit der Antwort ausgerichtet.
• .comment-heading (einschließlich Abstimmung, Autor und Hinzufügen von Zeit) hat eine feste Höhe von 50px. Stellen Sie sicher, dass sie unter dem Titel beginnen und bis zum Ende des Kommentars erstrecken, indem Sie position: absolute; top: 50px; height: calc(100% - 50px); Für Grenzverknüpfungen.
• Der Grenzverknüpfung hat einen verkürzten Hintergrund und die Grenzen links und rechts sind 4px breit und 12px breit. Dies bedeutet, dass der sichtbare Bereich zwar nur 4px breit ist, der tatsächliche klickbare Bereich 12px breit ist. Eine breitere Oberfläche hilft dem Benutzer, den Zeiger auf dem Link leichter zu positionieren und darauf zu klicken, da der 4px zu eng ist, aber die breitere Breite wird visuell inkonsistent erscheint.

Ermöglichen Sie Benutzern, Kommentare auszublenden/anzeigen

Jetzt haben wir einen ziemlich befriedigenden Kommentar -Thread. Dieses Design selbst kann auf viele praktische Anwendungsfälle angewendet werden. Gehen wir jedoch noch einen Schritt weiter und fügen Sie die Umschaltfunktion hinzu, d. H. Durch Klicken Kommentare ausblenden und anzeigen.

Der einfachste Weg ist zu verwenden<details></details> Und<summary></summary> Element. Kurz gesagt, Sie können klicken<summary></summary> Um die gesamte zu wechseln<details></details> Sichtweite. Dies erfordert kein JavaScript, und diese Tags werden derzeit von etwa 96% der Browser unterstützt.

Um dies zu erreichen, müssen wir die folgenden Änderungen am Code vornehmen:

• Den Kommentar ausgeben
  Wechseln zu<details></details> .
• Wickeln Sie den .comment-heading (.<summary></summary> Im Etikett.
• Geben Sie den Benutzern visuelle Tipps zur Verfügung, um ihnen zu sagen, ob die Kommentare verborgen sind.

Hier sind einige Änderungen zu verstehen:

• Kommentar ist jetzt<details></details> und beide haben das open Attribut, so dass es standardmäßig sichtbar (Ein) ist.
• Kommentartitel ist jetzt verpackt in<summary></summary> Im Etikett. Der Standardpfeil wurde ebenfalls gelöscht.
• Tipps für den Sichtbarkeitsstatus für den Kommentar werden hauptsächlich über den kleinen Text auf der rechten Seite des Kommentars erstellt. Der Inhalt dieses Textes basiert auf dem Elternteil<details></details> Ob das Element ein open Attribut ändert. Der Text selbst ist ein einfaches Pseudoelement, das mit ::after Selector erstellt wurde. Darüber hinaus befindet sich am Ende des geschlossenen Kommentars eine Grenze und zeigt Benutzern mehr Inhalte.
• Am Ende des CSS-Code finden Sie einige Stile im @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...} Selektor. Dies ist ein Hack, der nur für Internet Explorer ist. IE unterstützt es nicht<details></details> Es ist also standardmäßig immer eingeschaltet. Durch das Löschen des Textes und das Zurücksetzen des Cursors sehen IE -Benutzer einen normalen Kommentar -Thread, der die Sichtbarkeit des Kommentars nicht wechseln kann.

Andere Vorsichtsmaßnahmen

Keine Kommentare

Wenn der Kommentar -Thread keine Kommentare enthält (leerer Zustand), müssen wir dies dem Benutzer klar mitteilen. Ein einfacher Absatz, der die Zeile "keine Kommentare" und ein Formular mit einem Textfeld und einer Sendetaste enthält, reicht einen langen Weg, was die Mindestanforderung bei einem leeren Zustand sein sollte. Wenn Sie es besser machen möchten, können Sie auch ein Bild hinzufügen, das dem Formular entspricht.

Antwort auf das Kommentarformular

Verschiedene Websites haben unterschiedliche Implementierungsmethoden für die Beantwortung von Kommentaren. Einige Websites verwenden die Methode im alten Stil, um Benutzer in eine neue Seite mit dem Formular umzuleiten-ein einfaches Textfeld und eine Schaltfläche Senden. Andere Websites öffnen Formulare direkt im Kommentar -Thread, normalerweise mit einfachen Switches. Letzteres benötigt offensichtlich JavaScript, ist aber jetzt populärer. Zum Beispiel können wir im obigen Beispiel ein einfaches Formular hinzufügen, das seine Sichtbarkeit durch Klicken auf die Antwortschaltfläche umschalten kann.

Platzieren Sie den Benutzer, nachdem Sie eine neue Antwort veröffentlicht haben

Angenommen, der Benutzer reagiert auf Kommentare, die ein ähnliches Formular ähnlich wie oben gezeigt. Zeigen Sie es oben oder unter einer vorhandenen Antwort? Die Antwort ist, dass es immer über anderen Antworten angezeigt werden sollte. Wenn Benutzer das Formular ausfüllen und einreichen, möchten sie ein sofortiges Feedback, um ihnen mitzuteilen, dass die Operation erfolgreich war. Durch die Eingabe neuer Antworten über andere Antworten können wir diesen Benutzern dieses Feedback geben, ohne nach unten zu scrollen. Beim späteren Laden können Sie Kommentare und Antworten gemäß dem Algorithmus der Website anordnen.

Behandeln Sie Markdown- und Codeblöcke

Viele Websites, insbesondere Entwicklerblogs, müssen Markdown- und Codeblöcke in ihren Kommentaren unterstützen. Dies ist ein größeres Diskussionsthema und kann einen speziellen Artikel erfordern, um zu diskutieren. Um diesen Artikel willen, sagen wir einfach, es gibt viele Markdown -Editoren, die leicht an Textfelder angeschlossen werden können. Die meisten von ihnen verwenden JavaScript, daher sollte es einfach sein, sich in unsere Beispiele zu integrieren. Ein solches Plugin ist Markdown-it, das eine lose MIT-Lizenz hat. Sie können auch die WYSIWYG -Editoren ansehen, die bei der Bearbeitung von Web -Kommentaren ähnliche Funktionen haben.

Spamschutz und Benutzerauthentifizierung

Wenn Sie dem Benutzer erlauben, das Eingabeformular anzugeben, können Sie Spam garantieren. Dies ist daher ein Muss beim Erstellen des Kommentar-Threads. Eine gute Möglichkeit, Spam zu reduzieren, besteht darin, Dienste wie die Wiederholung von Google zu nutzen. Beispielsweise kann im obigen Beispiel ein Recaptcha -Feld unter die Schaltfläche Senden gesetzt werden. Dies schützt unsere Website vor Missbrauch.

Eine andere Möglichkeit, Spam zu verhindern, besteht darin, nur verifizierte Benutzer zu ermöglichen, Kommentare zu veröffentlichen, d. H. Der Benutzer muss ein Konto haben und sich anmelden, um Kommentare zu veröffentlichen. Jeder Kommentar wird mit einem Konto verknüpft, sodass Moderatoren mit Benutzern umgehen können, die kontinuierlich Spam- oder Inhalte mit geringer Qualität veröffentlichen. Auf der UI -Seite besteht ein guter Weg darin, Benutzer auf ihre Anmeldeseite umzuleiten, wenn sie auf die Schaltfläche Antwort oder Kommentar klicken, wenn sie auf die Schaltfläche "Antwort" oder "Kommentar schreiben" klicken. Sobald sie den Authentifizierungsprozess abgeschlossen haben, können wir sie einfach wieder zum Kommentar -Thread umleiten und das Formular öffnen.

Schließlich haben wir einen schönen, einfach zu bedienenden und zugänglichen Kommentar -Thread mit coolen Funktionen wie dem Springen zu Kommentaren und dem Umschalten der Sichtbarkeit jedes Kommentars entworfen. Wir diskutieren auch Formulare in Kommentar -Threads und diskutieren andere Dinge, die in praktischen Anwendungen zu berücksichtigen sind. Unsere Kommentar -Threads verwenden hauptsächlich CSS (ohne JavaScript), was zeigt, wie weit sich CSS entwickelt hat.

Das obige ist der detaillierte Inhalt vonStyling -Kommentar -Threads. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!