Selektives Ausblenden von Help Center-Komponenten mithilfe von Curlybars

Mit unserer Vorlagensprache Curlybars für Help Center wurde die Möglichkeit, Bedingungsanweisungen hinzuzufügen, die es ermöglichen, die Darstellung Ihrer Help Center-Seiten dynamisch zu beeinflussen, offengelegt. Durch die Verwendung von Bedingungsanweisungen können wir die eindeutige ID-Nummer einer Kategorie, eines Abschnitts, eines Beitrags, eines Themas oder eines Postings festlegen und dieses Element ausblenden, während andere angezeigt werden.

Wenn Sie die ID des Elements finden möchten, das ausgeblendet werden soll, navigieren Sie einfach zu der Seite für dieses Element und suchen Sie nach der URL. Sie sollten so etwas wie /hc/en-us/categories/200420805-General finden. Die Nummer 200420805 ist die ID meiner Kategorie.

Hier ist eine kleine Animation, um zu verdeutlichen, was ich erreichen möchte, wenn ich eine Kategorie auf der Startseite des Help Centers ausblende (siehe 'Kategorie 1'):

Der Code

Ich werde hier auf einige Szenarien eingehen, um zu erläutern, wie diese verwendet werden können. In diesen Beispielen werde ich den Standard-Code verwenden, der im Copenhagen Help Center Theme zu finden ist. Ich werde in erster Linie den isnt-Helfer verwenden, da die Grundidee dabei ist, dass, wenn der Wert nicht übereinstimmt, der angezeigte Code gerendert und somit das identifizierte Element effektiv ausgeblendet (oder nicht gerendert) wird. Sie können hier sehen, dass ich eine bestimmte Kategorie auf der Homepage ausschließen möchte. Daher habe ich sie durch das isnt-Statement geleitet:

Ich habe hier den gesamten Code meiner Homepage-Vorlage aus diesem Beispiel hinzugefügt. Sie können meine Kategorie-ID in Ihre eigene abändern und anschließend Ihre Kategorien ausblenden.

Mehrere Elemente ausblenden

Das Ausblenden mehrerer Elemente fügt weitere Zeilen mit Code hinzu, da wir nicht mehrere ID-Nummern an eine einzelne Bedingungsanweisung übergeben können. Stattdessen möchten wir die Bedingungsanweisungen verschachteln, damit sie entsprechend analysiert werden können. Hier ist ein Beispiel:

Wenn Sie den Code zum Ausblenden mehrerer Kategorien herunterladen möchten, so finden Sie ihn hier.

Ein weiteres Beispiel mit Beiträgen

Ich weiß, dass ich schon viel über Kategorien gesprochen habe. Daher wollte ich zeigen, wie man dies in einem anderen Raum implementieren kann. Mein Szenario sieht folgendermaßen aus: ich möchte die Exponierung eines bestimmten Beitrags verringern, ihn für meine Kunden aber über die Suche oder einen direkten Link zugänglich machen. Ich habe die Beitragsseite im Copenhagen-Thema ausgewählt, wo andere Beiträge in der Seitenleiste im gleichen Abschnitt wie der aktuelle Beitrag erscheinen:

Sie haben Ihren Beitrag vielleicht bereits auf Abschnittsebene ausgeblendet, wir möchten diesen Beitrag aber auch hier ansprechen:

Und hier ist wieder der Code, falls Sie ihn in Ihrer Beitragsvorlage ausprobieren möchten.

Einige technische Hinweise zu dieser Funktionalität

Möglicherweise haben Sie hier ein Muster bemerkt, denn der Code wurde im {{#each}}-Helfer implementiert, der durch das Array der angeforderten spezifischen Elemente iteriert wird. Der each-Helfer ist nativ zur handlebars.js-Datei. Sie können mehr darüber hier in der Dokumentation lesen. Im letzten Bild oben sehen Sie {{#each section.articles}} im Code, der die Beiträge für den aktuellen Abschnitt rendert, aber wenn der Beitrag mit der ID 219527708 gefunden wird, wird dieser Code stattdessen übersprungen und das Rendering im nächsten Beitrag fortgesetzt.

Es gibt vielleicht noch andere Möglichkeiten, ein ähnliches Verhalten zu erreichen. Zögern Sie also nicht, sich an anderen bedingten Helfern zu versuchen, dies sollte jedoch ein guter Anfang sein.