Benutzerdefiniertes HTML auf der Gruppen-Seite

Hallo zusammen,

ich entwerfe eine Community, in der jeder Benutzer eine Genehmigung anfragen muss, um einer Gruppe beizutreten, und jede Gruppe den Zugang zu einer Kategorie steuert.

Ich möchte den Gruppenseiten (https://community.horbitercafe.com/g) eine Willkommens-/Erklärung-HTML-Seite hinzufügen.

Was ist der einfachste Weg, dies zu erreichen?

Danke,

F.

Ich bin mir nicht sicher, ob dies der richtige Plugin-Outlet ist, aber du kannst es versuchen.

Gehe zu Anpassen > <head>

Füge Folgendes hinzu:

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

Hier dein HTML

</script>
1 „Gefällt mir“

Wie kann ich dies nur auf die /g-Seite beschränken?

Ja, das ermöglicht tatsächlich das „Einfügen

Richtig, ich möchte HTML nur auf der Hauptseite der Gruppenliste hinzufügen.

Füge eine Klasse zu deinem HTML-Code hinzu, z. B. gr-horbiter

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

<div class="gr-horbiter">
  dein HTML-Code
</div>

</script>

Füge diesen CSS-Code im Common-Bereich hinzu:

.gr-horbiter {
    display: none;
}

body.groups-page .gr-horbiter {
    display: block;
}

Ich habe den Code nicht getestet, aber er sollte funktionieren.

1 „Gefällt mir“

Danke @Steven, gehört der Skript-Teil in den HTML-Abschnitt einer Komponente? Oder muss ich das HTML direkt bearbeiten?

Entschuldigung, ich bin mir nicht sicher, ob ich die Frage richtig verstehe. Englisch ist nicht meine Muttersprache, daher könnte ich einige Dinge missverstehen.

Du kopierst das Skript und den HTML-Code in den <head>-Bereich und fügst deine Willkommensnachricht hinzu. Falls du sie anpassen möchtest, kannst du dafür ein div oder span verwenden. Dann sollte alles funktionieren.

1 „Gefällt mir“

Danke @Steven, es funktioniert jetzt.
Das einzige Problem ist, dass dies auf der Gruppenindexseite und nicht auf der Gruppendetailseite hinzugefügt werden muss.
Zumindest habe ich jetzt die Logik dahinter verstanden. Ich werde weiter recherchieren.
Ich kann auf der Gruppenindexseite keinen Connector finden.

Ich hätte testen sollen, jetzt sehe ich, was das Problem ist :man_facepalming:
Der Plugin-Ausgang funktioniert nicht für die Hauptseite der Gruppe.

Ich habe zwar noch eine Möglichkeit, ein Banner hinzuzufügen, aber das ist wahrscheinlich nicht die sauberste Lösung. Das Discourse-Team könnte einen besseren Weg kennen.

Dieser CSS-Code ermöglicht es dir, Text hinzuzufügen und zu stylen, aber du hast nur diese Klasse, und ich glaube nicht, dass man einen Link im Textbanner hinzufügen kann.

body.groups-page .groups-header::before {
    content: "Dein Text";
    width: 100%;
    margin: 0 0 15px 0;
}

Du kannst Hintergrund, Rahmen usw. in dieser Klasse anpassen, um das Banner zu gestalten.

2 „Gefällt mir“

Danke,
damit kann ich mein Ziel nicht erreichen. Ich wollte eine Landingpage für Gruppen erstellen, damit neue Nutzer den Zugang zu den gewünschten Gruppen anfordern können. Dafür wollte ich einige Erklärungen mit HTML einfügen.

Wie schwierig ist es, auf der Gruppenindexseite einen neuen Outlet-Namen anzufordern?

Wenn du nur so etwas brauchst, ist es ganz einfach

.welcome-message {
    display:none;
}
.groups-page .welcome-message {
    display:block;
    margin: 20px;
}

Füge dies dann im Bereich „Nach Header“ hinzu

<div class="welcome-message">Füge hier deine Willkommensinformationen und Anweisungen ein</div>

3 „Gefällt mir“

Ja, das ist mit Abstand die beste Lösung

Manchmal mache ich die Sache unnötig kompliziert :man_facepalming:

3 „Gefällt mir“

Toll, das funktioniert!
Was ist, wenn ich dasselbe tun möchte, aber nur auf der Startseite anzeigen lassen will? Was sollte ich durch .groups-page ersetzen?

Schauen Sie sich die Klasse an, die im body Ihrer HTML-Startseite verwendet wird.

Zum Beispiel hier auf meta.discourse.org:
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">

Die verwendete Klasse ist navigation-topics.

1 „Gefällt mir“

Oder wenn Sie etwas Eleganteres wünschen, probieren Sie

Interessant, auf meiner Startseite habe ich folgendes

image

Welche Seite ist Ihre Startseite?

image

Ist das das, was du meinst?

Ich habe das Problem mit Ihrer leeren body-Klasse verstanden. Öffnen Sie statt der Seitenquelle die Entwicklertools von Chrome/Firefox/Edge mit der Taste F12 und wechseln Sie zum Tab „Elemente“. Schauen Sie sich dort den HTML-Code an – Ihr -Tag wird nun die richtigen Klassen anzeigen.