Einbetten einer Liste von Discourse-Themen auf einer anderen Website

Nachrichten und Veranstaltungen Ankündigungen
59

Ich glaube nicht, dass dies möglich ist. Der Discourse-Code, der zum Abrufen der Themen verwendet wird, lädt nur die neuesten Themenlisten. Die mir bekannten verfügbaren Filter zur Sortierung der Listen sind replies, views, activity und likes. Du könntest versuchen, die Listen mit einem dieser Filter zu sortieren, um die besten Themen auszuwählen. Zum Beispiel:

<d-topics-list discourse-url="http://localhost:3000" category="14" per-page="5" order="replies"></d-topics-list>

Die Schriftart, die im Iframe verwendet wird, wird in Discourse festgelegt. In der neuesten Version von Discourse habe ich ein Problem beim Festlegen der Schriftart, wenn ich eine Themenliste auf meiner WordPress-Website einbinde. Ich teste dies lokal und nicht auf einer Produktionswebsite, was möglicherweise mit dem Problem zusammenhängt. Ich stelle fest, dass dieser Stil für die Schriftart des Iframes übergeben wird:

font-family: var(--font-family);

Dieser Stil wird in Discourse festgelegt, aber WordPress hat keinen Zugriff auf die Variable, sodass die Schriftart auf meiner Website auf Times New Roman gesetzt wird. Ich werde mich weiter mit diesem Problem befassen. (Bearbeitung: Das Problem beim Festlegen der Schriftart liegt an kürzlichen Änderungen in Discourse. Wir werden dies beheben.)

Das kann knifflig sein. Das Iframe, das erstellt wird, befindet sich innerhalb des d-topics-list-Elements, das du zur Seite hinzufügst. Das Festlegen eines expliziten Breitenwerts im CSS meiner Website funktioniert bei mir. Ich denke, dies könnte jedoch verbessert werden:

d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}
6 „Gefällt mir“
61

In der oberen linken Ecke des Iframes befindet sich eine Zahl (z. B. 110,5 ms), die auf einen Link zu /embed/topics verweist. Gibt es eine Möglichkeit, dies zu entfernen?

Edit: Die Antwort lautet, dass dies nur für den „Discourse-Entwickler

7 „Gefällt mir“
75

Hallo! Ich versuche, Beiträge auf einer WordPress-Seite einzubetten, und der Einbettungsteil funktioniert bereits. Gibt es eine Möglichkeit, die mobile Ansicht etwas ansprechender zu gestalten? Wenn Beiträge Bilder enthalten, werden die Spalten mit Bildern zusammengedrückt. Ein einfacher CSS-Code wie:

@media (max-width: 768px) {
	.topics-list .topic-list-item .topic-column-wrapper {
	    flex-direction: column;
	}
}

würde dieses Problem beheben. Besteht die Möglichkeit, etwas in dieser Richtung umzusetzen?

Viele Grüße, M

3 „Gefällt mir“
76

Du solltest beim Bearbeiten deines Themes in der Lage sein, hier dein eigenes benutzerdefiniertes CSS hinzuzufügen. Gibt es einen Grund, warum es im Kern sein soll?

2 „Gefällt mir“
77

Oh, mir war nicht klar, dass damit mein Discourse-Theme-CSS geladen wird. Ich probiere das aus und melde mich wieder bei dir!

2 „Gefällt mir“
78

Es gibt einen Abschnitt unter ‘Themes’ für das Einbetten für diesen Zweck!

4 „Gefällt mir“
79

Hallo, ich habe bereits eine Liste von Themen auf meiner Website eingebettet, versuche jetzt aber, ein einzelnes Thema basierend auf einem Tag hervorzuheben. Ich habe zwar erfolgreich eine weitere Liste eingebettet (mit per-page=1), aber das Problem ist, dass ich keine CSS-Klassen oder IDs hinzufügen kann. Daher gibt es absolut keinen Unterschied zwischen der ersten Liste und dieser.

Das bedeutet, dass selbst einfache Dinge wie die Verwendung einer anderen Hintergrundfarbe für eine der eingebetteten Listen unmöglich sind.

Gibt es überhaupt einen Workaround?

Ich würde mich sehr über Ihre Hilfe freuen.

2 „Gefällt mir“
80

Danke @eviltrout, das Hinzufügen dieses Codes zu “Embedded CSS” hat den Trick gemacht!

2 „Gefällt mir“
82

Derzeit gibt es keine Möglichkeit, verschiedene CSS-Regeln für unterschiedliche Embeds hinzuzufügen. Sie können nur benutzerdefinierte Stile hinzufügen, die für alle Embeds gelten.

4 „Gefällt mir“
83

Ich erhalte beim Einbetten der neuesten Themen hier unter https://vceliquidrecipes.com/ folgende Fehlermeldung:

includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168 POST https://vapingcommunity.co.uk/mini-profiler-resources/results 404

(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168
fetchResults @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:169
initPopupView @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:763
doInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1050
sc.onload.sc.onreadystatechange @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1065
load (async)
load @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1061
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1109
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1089
setTimeout (async)
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1085
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1118
(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1463

Mein Einbettungscode sieht wie folgt aus:

<d-topics-list discourse-url="https://vapingcommunity.co.uk" status="open" order="replies" per-page="10"></d-topics-list>
2 „Gefällt mir“
84

Diese Fehler scheinen vom Mini-Profiler zu stammen und haben wahrscheinlich nichts damit zu tun, was ein normaler Benutzer sieht. Ich habe deine Seite besucht und eine Liste von Themen ohne Fehler gesehen.

4 „Gefällt mir“
85

Ah, ist das also normal, dass sie in den Logs erscheinen, richtig?

2 „Gefällt mir“
86

Ich bin mir nicht sicher, ob das normal ist, aber es gibt keinen Grund zur Sorge. Die meisten Benutzer haben keinen Zugriff auf den Mini Profiler, daher wird er wahrscheinlich nur angezeigt, wenn du ihn verwendest.

3 „Gefällt mir“
87

Ok, danke für deine Hilfe, das wird wie immer sehr geschätzt. Mach weiter so!

2 „Gefällt mir“
88

Hallo, vielen Dank für Ihre gute Arbeit.

Unter Firefox und Chrome funktioniert die Liste für uns nicht wie erwartet. Obwohl wir sie so eingerichtet haben, dass 10 Themen angezeigt werden, werden nur 4 angezeigt.

Unter Chrome beobachten wir diesen JS-Fehler beim Einbetten der Liste:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    at u (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:105)
    at window.onload (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:515)

Interessanterweise tritt dies unter Safari nicht auf.

Die Liste ist auf dieser Website eingebettet: https://rebetiko.sealabs.net (am Ende der Seite, falls Sie es selbst testen möchten).

4 „Gefällt mir“
89

Kann das jemand von euch nachvollziehen? :slight_smile:

CC: @JimPas, @simon, @Vaping_Community

3 „Gefällt mir“
90

Auf der Seite sind 10 Themen-Links vorhanden, 6 sind aus irgendeinem Grund versteckt. Ich habe keine Ahnung von diesem Fehler.

Das Hinzufügen einer Höhe für das iframe funktioniert, um die versteckten Themen-Links anzuzeigen:

d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}
4 „Gefällt mir“
91

Ich hatte auch ein Problem damit. Manchmal sah alles in Ordnung aus. Manchmal wurde die Liste der Themen abgeschnitten (als würde sie nach Pixeln und nicht nach der Anzahl der Themen entschieden), und die Schriftart war nicht wie erwartet (ich erinnere mich nicht mehr an die Details). Ich habe stattdessen auf den Discourse-RSS-Feed umgestellt. Ich verwende nur Chrome und habe nicht vermutet, dass es ein Problem nur mit Chrome sein könnte.

3 „Gefällt mir“
92

Hallo!

Gibt es eine Möglichkeit, Themen von der Liste auszuschließen?

2 „Gefällt mir“
93

Vielleicht könntest du dafür Tags verwenden? Die Themen, die in der Liste erscheinen sollen, mit Tags versehen und dann danach filtern?

5 „Gefällt mir“