Blog-Post-Styling

[Discourse]

	Zusammenfassung	Blog Post Styling ermöglicht die Zuweisung einer Blog-Kategorie, wodurch die Darstellung von Themen in dieser Kategorie so angepasst wird, dass sie eher traditionellen Blog-Beiträgen ähneln.
	Vorschau	Vorschau auf theme-creator.discourse.org
	Repository	github.com/discourse/discourse-blog-post-styling
	Neu bei Discourse-Themen?	Anfängerleitfaden zur Verwendung von Discourse-Themen

Dieses Theme-Modul installieren

Das Theme-Modul Blog Post Styling verwandelt Discourse-Themen in ein klassisches Blog-Layout. Wird es auf eine Kategorie angewendet, wird das erste Bild jedes Themas zu einem breiten Hero-Bild über dem Titel befördert, und der Inhalt erhält eine für Blogs geeignete Typografie sowie eine entsprechende Anzeige von Metadaten.

Einstellungen

Hier sind die verschiedenen Einstellungen dieses Theme-Moduls:

• Blog-Kategorie: Themen, die zu einer der ausgewählten Kategorien gehören, erhalten das Blog-Post-Styling.

• Blog-Tag: Wählen Sie einen oder mehrere Tags aus, die einem Thema das Blog-Post-Styling verleihen, wenn sie darauf angewendet werden.

• Bildgröße: Legen Sie fest, wie das hervorgehobene Hero-Bild den Kopfbereich ausfüllt:

  • Kein Bild: Das hervorgehobene Bild wird ausgeblendet.
  • Vollbreite (Standard): Das Bild erstreckt sich über den gesamten Inhaltsbereich.
  • Zentriert: Das Bild behält sein Seitenverhältnis bei und wird im Inhaltsbereich zentriert.

• Bildposition: Legen Sie fest, wo das Bild relativ zum Titel angezeigt werden soll:

  • Über dem Titel (Standard): Bild wird über dem Thementitel angezeigt.
  • Unter dem Titel: Bild wird unter dem Thementitel angezeigt. Bei dieser Auswahl können Sie zudem eine Zusammenfassung einfügen, die zwischen Titel und Bild erscheint. Unten sehen Sie, wie das Bild aussieht, wenn die Einstellung Bildposition auf über dem Titel bzw. unter dem Titel gesetzt ist:

• Dropcap aktivieren: Wenn aktiviert, erhält der erste Buchstabe des Blog-Beitrags eine vergrößerte Darstellung, wie hier:
  
  
• Mobil aktiviert: Wenn aktiviert, wird das Blog-Post-Styling auch beim Lesen des Themas auf mobilen Geräten angewendet.

Einen Blog-Beitrag schreiben

Sobald Sie Ihre Blog-Kategorie eingerichtet (oder Ihren Blog-Tag angewendet) haben, gibt es einige Besonderheiten zu beachten, wie das Blog-Post-Thema funktioniert.

Hervorgehobenes Bild

Platzieren Sie das Bild, das Sie als Hero-Bild verwenden möchten, auf die erste Zeile des Beitrags, gefolgt von einer Leerzeile, bevor Ihr Inhalt beginnt:

![Bildbeschreibung|1100x440](upload://your-image-hash.jpg)

Ihr Beitragsinhalt beginnt hier...

Das Modul positioniert dieses Bild automatisch entsprechend der Einstellung Bildposition (siehe oben). Wenn vor dem Bild weiterer Inhalt – einschließlich Leerzeilen – erscheint, wird es nicht als Hero-Bild befördert.

Nach dem ersten Veröffentlichen eines Beitrags die Seite neu laden, um das Bild an der vorgesehenen Position zu sehen. (Dies betrifft nur den Beitragsautor beim ersten Veröffentlichen; Mitglieder, die den Beitrag aufrufen, sehen das Bild sofort an der richtigen Stelle.)

Tipps zur Bildgröße

Der Bildcontainer ist 440 px hoch und 100 % breit. Für beste Ergebnisse, wenn die Einstellung Bildgröße auf Vollbreite gesetzt ist:

• Verwenden oder schneiden Sie Bilder auf 1100x400 px zu, bevor Sie sie hochladen, um Beschneidungen zu vermeiden, oder
• Wählen Sie Bilder mit einem zentralen Motiv oder unspezifischem Inhalt (Landschaften, Muster), sodass beim Zuschneiden keine wichtigen Details verloren gehen.

Zusammenfassungen

Wenn die Einstellung Bildposition auf unter dem Titel gesetzt ist, können Sie Ihrem Blog-Beitrag eine optionale Zusammenfassung hinzufügen, die zwischen Titel und hervorgehobenem Bild erscheint.

Dazu umschließen Sie den Inhalt, der in Ihrer Zusammenfassung erscheinen soll, wie folgt:

[summary] Hier ist der Inhalt, der Ihre Zusammenfassung sein wird. [/summary]

Stilisierte Zitate

Beim Erstellen von Themen in einer Blog-Kategorie erhalten Zitate eine besondere Gestaltung. Sie können Zitate im Editor mit dem Symbol > oder über die Editor-Schaltfläche „ erstellen.

Empfohlene Kategorieneinstellung

In den Einstellungen Ihrer Blog-Kategorie sollten Sie die Kategorieneinstellung Nach dem Lesen von Themen zum ersten Beitrag navigieren aktivieren. Dadurch werden wiederkehrende Leser direkt zum Blog-Beitrag geleitet, anstatt an ihre letzte gelesene Position zurückversetzt zu werden.

Blog Post Styling + Thumbnails in der Themenliste

Dieses Modul ist kompatibel mit Topic List Thumbnails, das das hervorgehobene Bild Ihres Blog-Beitrags in der Themenliste hervorhebt:

Hinweis: Das Modul Topic List Thumbnails ist nicht mit dem Horizon-Theme kompatibel. Der obige Screenshot verwendet das Foundation-Theme.

[amotl (Andreas Motl)]

@amotl

After bumping the defined sizes manually just slightly in the markup, the headline-image-expansion feature works flawlessly – [at least with] images [that] are actually large enough (> 690px wide).

We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.

---

JeeLink

[ohellno]

Hello, and thank you very much for dedicating the time to create this and release it for free.

I was just wondering if it would be at all possible to change this somehow to use a specific tag instead of a particular category?

I just setup a new discourse website but I’ve been writing a lot of “blog posts” but I would still like these to show up in the appropriate other categories in order to make it seem a little more integrated.

Currently I have been posting them in their own blog-posts category, which I limited to just me being able to post in there, but I just setup a tag group and made that only accessible to staff.

Thanks again!

[Howaids (Martin)]

Thanks very much @tshenry. Your theme components have all been spot on.And to @sam and @codinghorror for sharing an incredible app!! Your generosity including the support in meta is heartfelt. Discourse is indeed made for the more caring internet of the future.

[LoganRTW (Ward)]

Is there a way to make this work with a video as the featured content rather than the image? I would delete my wordpress site if I could just post the YouTube/Vimeo etc. and have that be the top content. Any ideas?

[Howaids (Martin)]

Totally! Great suggestion @LoganRTW. It’s got my vote @tshenry. Can it be done?

[tshenry (Taylor)]

Update

Wenn Sie es glauben können

Ich habe begonnen, die Komponente zu refaktorisieren und zu bereinigen, um die Plugin-Dateistruktur zu verwenden und die neuen Themen-Thumbnails zu nutzen.

FEATURE: Include optimized thumbnails for topics (#9215)

Ich habe auch ein paar neue Funktionen hinzugefügt:

• Neue Einstellungen

  • image_display_style – es gibt zwei Optionen dafür. Die Standardeinstellung entspricht dem Verhalten, das die Komponente schon immer hatte. Die alternative Option sorgt dafür, dass keine Beschneidung erfolgt und das vollständige Bild angezeigt wird. Es ist schwer zu sagen, welche davon „besser“ ist, daher sollten Sie etwas experimentieren und herausfinden, was am besten zu Ihrem Workflow und Ihren Blog-Bildern passt.

    

  • mobile_enabled – dies ist ein erster Ansatz für den Blog-Beitragsstil auf mobilen Geräten. Ich bin gespannt auf Fehlerberichte oder Ideen zur Verbesserung!

    

Ich möchte weiterhin an der Refaktorierung und Bereinigung des Codes arbeiten, aber dies ist ein guter Anfang.

Introduce mobile, image display options, and refactor

---

@Varhall

Es wäre cool, schema.org -Markierungen für diese Art von Thema hinzuzufügen. Ist das geplant?

Leider sind derzeit keine solchen Pläne vorgesehen!

[torstensson (Per Torstensson)]

Vielen Dank für diese wirklich inspirierende und tolle Komponente @tshenry

Bei meiner Auswertung habe ich zwei Probleme identifiziert:

1. Kein Blog-Bild in Unterkategorien – Nach recht umfangreicher Fehlersuche mit verschiedenen Themes sowie dem Aktivieren/Deaktivieren sowohl von Plugins als auch anderer Komponenten bin ich mir nahezu sicher, dass Blog-Bilder in Unterkategorien nicht dargestellt werden. Das erste Bild bzw. das vorgesehene Blog-Bild wird jedoch weiterhin ausgeblendet.

2. Erstes Bild nicht in Übereinstimmung mit DiscoTOC ausgeblendet – Wenn Blog Post Styling zusammen mit DiscoTOC verwendet wird, wird das Blog-Bild korrekt über dem Titel dargestellt. Es wird jedoch zweimal angezeigt, da es auch an seiner ursprünglichen Position weiterhin gerendert wird.

[tshenry (Taylor)]

Vielen Dank für das Feedback @torstensson! Beide Punkte waren tatsächlich Fehler und sollten jetzt behoben sein:

Bug fixes

Bitte lass mich wissen, falls du weiterhin Probleme hast.

---

An alle, die diese Komponente verwenden:

Wenn du aktuell nicht bei allen Blog-Beiträgen ein Beitragsbild oben einfügst, ist dies für dich!

Diese Komponente wurde mit der Absicht erstellt, bei jedem Blog-Beitrags-Thema ein Bild anzuzeigen. Es war jedoch möglich, einen Blog-Beitrag ohne Beitragsbild zu erstellen, indem man einfach kein Bild in der ersten Zeile des Beitrags einfügte. Dieses Verhalten hat sich geändert.

Die neuere Implementierung verbessert die Leistung erheblich, verwendet jedoch einen vordefinierten Wert, anstatt den Inhalt des Beitrags selbst zu analysieren. Der vordefinierte Wert wird aus dem ersten Bild gefunden im Beitrag generiert. Im Gegensatz zu früher ist er nicht notwendigerweise auf ein Bild beschränkt, das als erste Zeile des Beitrags erscheint. Das bedeutet, wenn du einen Beitrag ohne Bild in der ersten Zeile erstellst, aber ein einzelnes Bild am Ende des Beitrags einfügst, wird dieses Bild am Ende nun auch über dem Thema angezeigt.

Ich habe eine Alles-oder-Nichts-Einstellung hinzugefügt, mit der sich das „Beitragsbild

[torstensson (Per Torstensson)]

@tshenry

Vielen Dank für das Feedback @torstensson! Beide Punkte waren tatsächlich Fehler und sollten jetzt behoben sein. Bitte lass mich wissen, falls du weiterhin Probleme hast.

Toll, danke @tshenry Ich kann gerne bestätigen, dass beide Probleme mit dem Update behoben wurden und noch einmal – vielen Dank für wirklich großartige Komponente, nicht nur in der Funktion, sondern auch als Inspiration

[core]

Eine kürzlich angekündigte Funktion könnte als Alternative zu dieser Theme-Komponente dienen. Wir lassen sie hier für Interessierte stehen.

Page Publishing

This guide covers how to use the Page Publishing feature on Discourse. This feature allows Staff users to convert a topic into a standalone static page with custom styling. Examples include the Terms of Service and Privacy Policy pages. Required user level: Staff Publishing static pages on Discourse Page Publishing allows Staff users to create standalone static pages from topics. This is similar to the process for creating Terms of Service or Privacy Policy …

[nityeshaga (Nityesh Agarwal)]

@tshenry Vielen Dank für diese Komponente! Wir nutzen sie zusammen mit dem Plugin Vorschau der Themenlisten, um einen Artikelbereich für Studierende in der Dataquest-Community zu erstellen.

Ich habe eine Funktionsanfrage für zukünftige Versionen dieser Komponente: Könnten Sie bitte die Möglichkeit hinzufügen, kanonische URLs zu den Artikeln hinzuzufügen?

Suchmaschinen verwenden kanonische Links, um die endgültige Quelle von Inhalten zu bestimmen und zu priorisieren, was Verwirrung vermeidet, wenn mehrere Kopien desselben Dokuments an verschiedenen Orten vorhanden sind.

Vielen Dank!

[sebastianh (Rebastion)]

Ich finde, das ist eine großartige Komponente. Tatsächlich teste ich sie gerade auf einem live Discourse-Server und experimentiere damit. Ohne eine bestimmte Reihenfolge möchte ich meine ersten Gedanken und Rückmeldungen teilen – ich hoffe, das hilft. Entschuldigt bitte, falls einige Punkte eher wie Fragen klingen:

• Die Darstellung des Autors wirkt etwas fehl am Platz und könnte vielleicht platzsparender gelöst werden, um sie enger mit dem Titel oder dem Kategorienschild usw. zu verbinden. Außerdem ist zwischen der Zeile, die die Autoreninformationen abschließt, und dem Beginn des Textes ziemlich viel Weißraum.
• Es ist für einen Besucher, der direkt zu einem Blogbeitrag geleitet wird, schwer zu erkennen, wo er sich befindet, da es keine klare Breadcrumb-Navigation oder Ähnliches gibt. Der Hauptgrund ist, dass die Titelleiste inaktiv zu sein scheint, während sie bei normalen Themen transformiert wird und Titel, Kategorie usw. enthält.
• Es wäre toll, wenn die Kategorienansicht eher einen Blog-Look hätte, mit kleinen Vorschaubildern und Ähnlichem. Wäre das schwer umzusetzen?
• Ich sehe in der Kategorienansicht keine Kategoriendescription?

[sebastianh (Rebastion)]

@nityeshaga

einen Artikelbereich für Studierende in der Dataquest-Community.

Wow, welche Theme-Komponente wird für diese Kategorienansicht verwendet? Sieht cool aus.

[tshenry (Taylor)]

Vielen Dank für das Feedback

@sebastianh

• Die Darstellung des Autors wirkt etwas deplatziert und könnte vielleicht platzsparender gelöst werden, um sie besser an den Titel oder Kategorie-Tag etc. anzupassen. Zudem gibt es zwischen der Zeile, die die Autoreninfo beendet, und dem Beginn des Textes ziemlich viel Weißraum.

Ich stimme zu, dass um den Bereich Autor/Titel herum viel Weißraum vorhanden ist. Ich werde dieses Feedback beim nächsten Mal, wenn ich an der Komponente arbeite, im Hinterkopf behalten und sehen, ob ich eine Lösung finde.

@sebastianh

Es ist für einen Besucher, der direkt zu einem Blogbeitrag geleitet wird, schwer zu erkennen, wo er sich befindet, da es keine klare Breadcrumb-Navigation oder Ähnliches gibt. Der Hauptgrund ist, dass die Titelleiste inaktiv wirkt, während sie bei normalen Themen transformiert wird und Titel, Kategorie usw. enthält.

Ich bin mir nicht zu 100 % sicher, was du damit meinst. Die Kopfzeile wechselt und zeigt Titel/Breadcrumbs an, sobald du über das Bild und den Blogtitel hinaus nach unten scrollst. Du hast recht, dass es am oberen Rand der Seite nicht besonders offensichtlich ist. Auch das werde ich im Hinterkopf behalten.

@sebastianh

• Es wäre toll, wenn die Kategorienansicht mehr nach einem Blog aussehen könnte, mit kleinen Vorschau-Bildern und ähnlichem. Wäre das schwer umzusetzen?
• Ich sehe in der Kategorienansicht keine Kategorienbeschreibung?

Das liegt außerhalb des Umfangs dieser Komponente. Für die Kategorienansicht könntest du dir Folgendes ansehen: Topic List Thumbnails

[sebastianh (Rebastion)]

Danke für das Feedback Ich denke, dass sich das meiste geklärt hat, und ich sehe jetzt auch die Kategorienbeschreibung. Ich bin mir nicht sicher, warum sie vorher nicht sichtbar war; ich dachte, es läge an der Komponente. Ich werde weiter testen und später mehr Feedback geben. Exzellente Arbeit!

[sebastianh (Rebastion)]

Ich denke, der übermäßige Abstand oben rührt von dem verbleibenden Platz her, nachdem das Bild in die Kopfzeile des Blogbeitrags „verschoben

[sebastianh (Rebastion)]

@sebastianh

Ich denke, der überschüssige Abstand oben entsteht durch den verbleibenden Platz, nachdem das Bild in die Kopfzeile des Blogbeitrags „verschoben“ wurde. Dadurch entsteht kein zusätzlicher Platz darunter, sondern es bleibt einfach leer.

Hier ist ein Screenshot dessen, was ich meine:

[tshenry (Taylor)]

Ich bin mir ziemlich sicher, dass das daran liegt, dass du einen Zeilenumbruch zwischen dem Bild-Upload-Link und dem ersten Absatz ausgelassen hast. Könntest du es bitte so bearbeiten, dass es wie folgt aussieht:

![spagh|690x390](upload://nVi42gGIwt03DAYSzVEc4RvwS6h.jpeg) 

<b>Während</b> es im Internet reichlich Platz zum Posten, Bloggen, Teilen und Tweeten und all dem gibt, ist mein Lieblingsort, um mit euch allen über den Spaghetti-Western Ideen auszutauschen, dieses Forum. Einige von euch erinnern sich vielleicht an einen Versuch vor einigen Jahren, der „Planet Spaghetti Western“ hieß. Die Idee war, einen Blog zu haben, der automatisch Beiträge von allen Spaghetti-Western-Blogs im Internet sammelt und sie gewissermaßen als Digest präsentiert. Das war technisch gesehen ziemlich kompliziert und am Ende mehr Arbeit als es wert war, also musste ich das abschalten.

Wenn das funktioniert, füge ich eine Anmerkung im OP zu dieser Anforderung hinzu.

[sebastianh (Rebastion)]

Hallo. Das verringert den Rand tatsächlich etwas, danke. Im Editor hatte ich genau das Gegenteil gemacht: so wenig Platz wie möglich zwischen Bild und Textbeginn lassen.