Wie man den Text in einem eingebetteten Beitrag anpasst

Unterstützung
1

Ich habe eine Website, auf der ich verschiedene Tutorials und Blogs veröffentliche, und ich nutze Discourse sowohl als Forum als auch für Kommentare über die Einbettungsfunktion.

Das funktioniert meistens gut, außer dass, wenn ich eine neue Seite auf der Hauptseite erstelle, der gesamte Inhalt in den Discourse-Beitrag aufgenommen wird. Einige meiner Benutzer kennen nicht einmal die Hauptseite, da sie den vollständigen Beitrag immer im Forum lesen! Das ist ein Problem, da Funktionen wie eingebettete Code-Editoren auf Discourse nicht funktionieren, was zu einer fehlerhaften Erfahrung führt.

In einer perfekten Welt wäre der Discourse-Beitrag nur ein kurzer, sehr offensichtlicher Link zurück zum Originalbeitrag auf der Hauptseite. Vielleicht so etwas wie:

Den Originalbeitrag hier ansehen:

https://example.com

Antworten auf diesen Thread werden als Kommentare zum Originalbeitrag angezeigt!

Ich habe versucht, die Einstellung embed truncate zu deaktivieren, wie in diesem Thread beschrieben, aber das scheint den Button “Vollständigen Beitrag anzeigen” auszublenden, zeigt aber immer noch den gesamten Inhalt im Beitrag an.

Ich habe auch versucht, die Nachricht embed.imported_from zu bearbeiten, aber das ändert nur den winzigen Text am Ende, den die Leute anscheinend sowieso übersehen.

Ich habe auch versucht, den Beitrag nach der Erstellung durch Discourse manuell zu bearbeiten, aber das Markdown wird nicht in HTML gerendert und stattdessen als Klartext angezeigt. Das klingt ähnlich wie dieses Problem: Customizing the "Embedding" Behavior by Disabling Show Full Post?

Gibt es eine Einstellung, die ich übersehe, oder einen anderen Trick, den ich anwenden kann, um den Text in einem automatisch generierten Discourse-Beitrag anzupassen? Vielleicht etwas, das ich in das HTML der Hauptseite einfügen kann, um Discourse dazu zu bringen, das Richtige anzuzeigen? Oder ich bin nicht abgeneigt, es manuell zu bearbeiten, wenn es eine Möglichkeit gibt, das Problem mit der Markdown-Darstellung zu beheben.

Vielen Dank für jede Hilfe, die Sie anbieten können!

1 „Gefällt mir“
2

Entschuldigung für das Hochholen, aber ich wäre wirklich dankbar, wenn mir jemand Ideen zum Ausprobieren geben könnte!

3

Hallo Kevin, kann ich nur bestätigen, ob du das WP Discourse Plugin oder ein JavaScript-Einbettung verwendest?

1 „Gefällt mir“
4

Danke für die Antwort! Ich verwende das JavaScript-Embed. Ich habe zum Beispiel diese Seite:

die diesen Einbettungscode enthält:

<script type="text/javascript">
DiscourseEmbed = { discourseUrl: location.protocol 
	+ '//forum.happycoding.io/',
	discourseEmbedUrl: location.protocol + '//happycoding.io/tutorials/javascript/react-css' };
	
(function() {
	var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
	d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
	(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>

Das erstellt diesen Beitrag in meinem Discourse:

https://forum.happycoding.io/t/css-in-react/1092

Und wenn Sie darauf klicken, sehen Sie, dass der Beitrag den vollständigen Text der ursprünglichen Seite enthält.

5

Vielen Dank für die Klarstellung.

Warum ist die Website-Einstellung embed truncate in Discourse aktiviert? Ich bin nur etwas verwirrt, da Sie erwähnen, dass Sie sie deaktiviert haben, aber Sie sagen auch, dass Ihr Problem darin besteht:

Die Einstellung embed truncate ist teilweise aus genau diesem Grund vorhanden. Sie bedeutet, dass der Benutzer nur einen teilweisen Auszug des Beitrags auf Discourse selbst sieht.

Könnten Sie bitte genauer erklären, welches spezifische Benutzerverhalten Sie vermeiden möchten und welches spezifische Benutzerverhalten Sie fördern möchten.

1 „Gefällt mir“
6

Ich habe die Einstellung embed truncate hin und her geschoben. Wenn ich sie mir jetzt noch einmal ansehe, ist es wohl geringfügig besser, sie zu aktivieren, aber ich hoffe immer noch auf eine Möglichkeit, den vollständigen Text des Originalartikels in Discourse gar nicht erst anzuzeigen. Mit anderen Worten, ich möchte den vollständigen Text nicht hinter einem Klick auf eine Schaltfläche verstecken – ich möchte den vollständigen Text überhaupt nicht anzeigen, nur einen Link zum Originalartikel.

Das Verhalten, das ich vermeiden möchte, ist, dass Benutzer auf mein Discourse kommen und den vollständigen Artikel auf Discourse lesen, anstatt auf der Originalseite. Das ist ein Problem, weil der vollständige Text auf Discourse oft Fehler enthält (mit interaktivem JS, eingebettetem Code usw.), und dann bekomme ich Fehlerberichte, bei denen die Lösung darin besteht, das Lesen auf Discourse einzustellen und stattdessen auf die „echte“ Website zu gehen.

Mit anderen Worten, das Benutzerverhalten, das ich fördern möchte, ist, den vollständigen Artikel auf der Originalseite zu lesen, anstatt im Discourse-Post.

Das mag geringfügig erscheinen (und im Großen und Ganzen ist es das auch), aber meine Befürchtung ist, dass Benutzer auf mein Discourse kommen, denken, dass das Verhalten der Seite fehlerhaft ist, und abspringen, bevor sie erkennen, dass es eine Seite auf meiner „echten“ Website gibt, die sie anstelle des Discourse lesen sollten.

Einige mögliche Optionen, die ich in Betracht gezogen habe:

  • Gibt es eine Einstellung, die Discourse anweist, nur einen Link einzufügen und keinen Teil des Originalbeitrags überhaupt einzuschließen?
  • Gibt es eine CSS-Klasse oder ein anderes Attribut, das ich meinem ursprünglichen HTML hinzufügen kann, um anzugeben, welcher Teil des Artikels in den Discourse-Beitrag aufgenommen (oder ausgeschlossen) werden soll?
  • Vielleicht könnte ich benutzerdefiniertes CSS zu Discourse hinzufügen, um die Schaltfläche Show Full Post... auszublenden?
7

Danke für die Erklärung, Kevin. Es gibt keine spezifischen Einstellungen für dieses Problem, aber es gibt zwei Möglichkeiten, wie Sie es angehen könnten.

Anpassen, welche HTML-Elemente von Ihrer Website übernommen werden

Die Funktionsweise von Einbettungen besteht darin, dass sie den Inhalt einer Website mithilfe des Readability-Gems abrufen. Das Gem und seine Ausgabe verwenden die folgenden Optionen, um zu filtern, welche HTML-Elemente abgerufen werden:

opts[:whitelist] = SiteSetting.allowed_embed_selectors if SiteSetting.allowed_embed_selectors.present?
opts[:blacklist] = SiteSetting.blocked_embed_selectors if SiteSetting.blocked_embed_selectors.present?
allowed_embed_classnames = SiteSetting.allowed_embed_classnames if SiteSetting.allowed_embed_classnames.present?

Sie könnten also die Site-Einstellungen allowed_embed_selectors, blocked_embed_selectors oder allowed_embed_classnames festlegen, um einzuschränken, welche Inhalte aus Ihrem HTML abgerufen und im Discourse-Beitrag angezeigt werden. Sie könnten es beispielsweise auf nicht vorhandene Klassen beschränken, sodass keine Inhalte abgerufen werden.
Die von der Website abgerufenen Inhalte haben dann diese HTML-Elemente angehängt:

"\\n\\n<hr>\\n<small>#{I18n.t('embed.imported_from', link: \"<a href='#{url}'>#{url}</a>\")}</small>\\n"

Sie müssten also nur den Text embed.imported_from im Admin-Panel anpassen, um dem Benutzer mitzuteilen, dass er den Inhalt im Blog lesen soll. Beachten Sie, dass Sie den Link zum Inhalt in diesem Text interpolieren können. Die englische Version des Locale-Texts lautet beispielsweise:

This is a companion discussion topic for the original entry at %{link}

Ausblenden der Schaltfläche “Vollständigen Beitrag anzeigen”

Wie Sie vorgeschlagen haben, sollte auch das Ausblenden der Schaltfläche “Vollständigen Beitrag anzeigen” mit CSS funktionieren.

2 „Gefällt mir“
8

Ich habe Schwierigkeiten zu verstehen, warum es keine Option gibt, den vollständig eingebetteten Text anzupassen. Ich möchte keinen tatsächlichen Inhalt von der eingebetteten URL abrufen, sondern nur einen Link dazu mit einer kurzen Beschreibung (z. B. nur die Meta-Zusammenfassung).

Derzeit mache ich das mit einem automatisierten API-Aufruf, möchte aber auf die native Einbettungsfunktion umsteigen.

Ich habe versucht, ein verstecktes Element auf der gescrapten Seite speziell für Discourse zu erstellen, um nur dieses einzelne Element zu scrapen, aber der Nachteil ist, dass die Onebox für den Link nicht angezeigt wird.

Auch die Anpassung von embed.imported_from hat seine Grenzen, da es immer in ein `

<small>

`-Tag gezwungen wird, was keine tatsächliche Anpassung zulässt.

9

Es scheint, als ob Sie keine Einbettung wünschen, die von Natur aus das „Einbetten“ von Inhalten von einem anderen Ort ist.

Warum möchten Sie umsteigen?

10

Stimmt, ich möchte nur eine automatische Thread-Erstellung, sobald ein neuer Blogartikel veröffentlicht wird.

Ich möchte jedoch auch die native JS-Embed-Funktion nutzen, um Kommentare unter dem Blogbeitrag auf der externen Website anzuzeigen, was auch mit dem Einbettungsverhalten im Forum einhergeht.

Meine aktuelle Automatisierung hat eine gewisse Verzögerung (nicht in Echtzeit), und die Implementierung einer automatischen Thread-Erstellung in unserem CMS bei jeder neuen Artikelveröffentlichung ist etwas schwieriger, da es sich nicht nur um ein Blog-CMS handelt und es nicht einmal ein eindeutiges “Veröffentlichungs”-Ereignis gibt.

Auf jeden Fall wird es zu Kollisionen zwischen dem JS-Embed, das versucht, den Thread zu erstellen, und meiner Automatisierung kommen, wobei ersteres wahrscheinlich meistens schneller ist. Deshalb möchte ich auf die reine Nutzung der JS-Embed-Funktion “umsteigen”, mit dem Nachteil, dass die Threads jedes Mal manuell bearbeitet werden müssen.

Ich freue mich auf Vorschläge! :smile:

11

Danke für die Erklärung.

Ok, wenn ich Sie richtig verstehe:

  1. Sie möchten die Funktionalität zur Themen-Erstellung und Kommentar-Verknüpfung von JS-Einbettungen; und
  2. Sie möchten nur einen Link mit einer kurzen Beschreibung im ersten Beitrag des verknüpften Themas in Discourse.

Ist das richtig? Haben Sie für Punkt 2 die embed truncate-Site-Einstellung ausprobiert? Wenn ja, was hat Ihnen daran nicht gefallen? Ich verstehe, dass Sie das in Ihrer ersten Antwort bereits angesprochen haben, aber könnten Sie bitte genauer erklären, womit Sie Schwierigkeiten haben? Geben Sie vielleicht ein Beispiel dafür, was Sie daran hindert, Ihr gewünschtes Ergebnis zu erzielen (und was genau dieses gewünschte Ergebnis ist).

1 „Gefällt mir“
12

Ja, das tun Sie.

Das Problem liegt beim Link-Onebox, der nicht angezeigt wird, da der eingebettete Inhalt immer in HTML-Tags eingeschlossen wird. :smiley:

Ich weiß, das klingt nach einer Kleinigkeit (was es auch ist), aber der Nachteil für die Lebensqualität, dies für jeden Artikel manuell bearbeiten zu müssen, ist erheblich und etwas, das ich schon lange beheben wollte.

So soll es aussehen (am Beispiel eines Discourse-Blogbeitrags):

Screenshot 2024-05-20 at 12.29.45
Screenshot 2024-05-20 at 12.29.451338×840 81.9 KB

Derzeit müsste ich an versteckten Elementen auf der Website herumfummeln, um speziell die URL und die Zusammenfassung extrahieren zu können, und selbst dann ist das Problem, dass die Onebox nicht angezeigt wird. Das Einzige, was ich mehr oder weniger vollständig anpassen kann, ist der Teil „Lesen Sie den vollständigen Blogbeitrag…“ am Ende.

Ich vermute, ich bitte um die Möglichkeit, dem JS-Snippet etwas wie folgt hinzuzufügen:

DiscourseEmbed = {
    discourseUrl: 'https://forum.example.com/',
    discourseEmbedUrl: 'https://blog.discourse.org/2024/03/a-warm-welcome-to-spiceworks',
    discourseRaw: 'https://blog.discourse.org/2024/03/a-warm-welcome-to-spiceworks\\n\\nWir freuen uns, Ihnen mitteilen zu können, dass die Spiceworks-Community zu Discourse umgezogen ist! Das Spiceworks-Team hat eng mit unserem Migrationsteam zusammengearbeitet\\n\\n<small>Lesen Sie den vollständigen Blogbeitrag auf discourse.org. Dieser Beitrag wurde automatisch erstellt und Antworten werden auf der Website angezeigt.</small>'
};

discourseEmbedRaw entspricht dem raw-Wert einer regulären API-Anfrage an /posts.json.

Aber ich verstehe, dass dies möglicherweise eine Randbedingung ist und für die meisten Benutzer nicht relevant ist. Ich werde versuchen, dies zu lösen, indem ich die Themen über die API erstelle, bevor das JS-Snippet dies versucht.

13

Das würde ich nicht empfehlen.

Dies würde verschiedene Probleme verursachen. Lassen wir das vorerst beiseite.

Ich weiß es zu schätzen, dass Sie im Idealfall die volle Kontrolle über alles haben möchten. Haben Sie jedoch etwas Geduld, während ich versuche, Ihre Bedürfnisse in mögliche Verbesserungen des aktuellen Systems zu übersetzen. Denken Sie daran, dass dies nur Vorschläge sind und ich keine Kontrolle darüber habe, was vom Discourse-Team akzeptiert wird.

Ein eingebetteter Beitrag in Discourse besteht im Wesentlichen aus zwei Dingen:

  1. „Importiert von“-HTML (d. h. der Link)
  2. HTML-Inhalt von der verknüpften Seite, entweder vollständig oder gekürzt.

1. Steuerung des „Importiert von“-HTMLs

Derzeit ist dieses HTML fest codiert als

 "
<hr>
<small>#{I18n.t("embed.imported_from", link: "<a>#{url}</a>")}</small>
"

Sie möchten dies zum Beispiel nur in die URL anpassen, damit es als Onebox erscheint. Ich denke, eine praktikable Verbesserung wäre eine Website-Einstellung, die dies einfach auf „nur URL“ umschaltet, sodass Sie Administratoren nicht irgendwo HTML eingeben lassen müssten.

2. Steuerung des gekürzten HTML-Inhalts

Das können Sie bereits tun. Setzen Sie einfach die Website-Einstellung allowed embed classnames auf einen Klassennamen eines Elements, das Sie zum Umwickeln des Auszugs verwendet haben, den Sie auf Ihrer Website wünschen, z. B.

Auf Discourse

Setzen Sie diese Website-Einstellungen:

  • embed truncate auf false
  • allowed embed classnames auf „discourse-excerpt“

Auf Ihrer Blog-Seite

<div class="discourse-excerpt">
Wir freuen uns, den Umzug der Spiceworks-Community nach Discourse bekannt zu geben! Das Spiceworks-Team hat eng mit unserem Migrationsteam zusammengearbeitet
</div>

3. Steuerung der Reihenfolge des „Importiert von“-HTMLs und des HTML-Inhalts

Wenn ich Sie richtig verstehe, möchten Sie, dass der Teil „Importiert von“ (z. B. nur die URL) vor dem HTML-Inhalt (oder dem gekürzten Inhalt) steht. Auch hier wäre der einfachste Weg eine boolesche Website-Einstellung, etwas wie embed imported from above content.

Kurz gesagt, wenn ich Sie richtig verstehe, könnten Sie dies mit der Hinzufügung von zwei neuen booleschen Einstellungen und einigen kleinen Anpassungen an der TopicEmbed-Klasse erreichen. Sie werden feststellen, dass all diese Änderungen an discourse/discourse selbst vorgenommen werden, da die Verarbeitung dort stattfinden muss.

Wie oben erwähnt, sind dies nur Vorschläge, wie ich das, was Sie tun möchten, erreichen würde. Um diese oder ähnliche Änderungen umzusetzen, wäre die Zustimmung des Discourse-Teams erforderlich.

1 „Gefällt mir“
14

Danke, dass Sie das aufgeschrieben haben! :+1:

Ja, genau damit habe ich herumgespielt. Das Problem ist, dass der Inhalt in mehrere HTML-Tags eingeschlossen wird, weshalb die Onebox nicht ausgelöst wird. Ich habe versucht, die URL mit <br>-Tags zu trennen (um die Onebox auszulösen), aber so etwas scheint automatisch gekürzt zu werden.

Hmm, okay, warum? :slight_smile:

Ich würde natürlich den Wert embed_url festlegen.

15

Das Einbetten Ihrer URL zur Onebox ist ein separates Problem. Verwenden Sie allowed embed classnames, um nur den Textauszug wie in meinem Beispiel festzulegen.

Da Sie im Grunde das Rad neu erfinden würden, um ein Problem mit der TopicEmbed-Analyse zu umgehen. Dies würde auch eine neue Reihe von Problemen eröffnen, wie z. B. was passiert, wenn Ihr Code nicht in der von Ihnen erwarteten Reihenfolge ausgeführt wird, z. B. wenn eine Race Condition oder eine andere Ausnahme auftritt. Diese Art von Problemen tritt relativ häufig bei einer Mischung aus Code auf einer externen Website mit dem WP Discourse-Plugin auf. Kurz gesagt, es lohnt sich nicht.

Sie scheinen sich mit Codebasen auszukennen :slight_smile: . Sie müssen im Wesentlichen zwei einfache Änderungen an dieser Klasse vornehmen.

  1. Fügen Sie hier eine bedingte Anweisung ein, die von einer Site-Einstellung gesteuert wird
  1. Fügen Sie hier eine weitere bedingte Anweisung ein, die von einer Site-Einstellung gesteuert wird

Sie müssten nicht einmal die Discourse-App erstellen. Schreiben Sie zuerst zwei rspec-Tests, nehmen Sie dann die Änderungen vor und reichen Sie sie ein, sobald Sie sie zum Laufen gebracht haben, machen Sie einen PR :slight_smile:

1 „Gefällt mir“
16

Was es wert ist, hier ist, was ich schließlich getan habe:

  1. Auf meinem Blog habe ich ein < div > mit der ID forum-excerpt, das mit display:none ausgeblendet ist, aber den HTML-Code enthält, den ich im Discourse-Post anzeigen möchte. (Ich mache das mit etwas Jekyll / Liquid-Logik, aber das sollte eigentlich keine Rolle spielen.)

  2. Auf meinem Discourse habe ich den CSS-Selektor für Elemente, die in Einbettungen erlaubt sind auf #forum-excerpt gesetzt. Obwohl die div auf meiner tatsächlichen Seite ausgeblendet ist, wird der Inhalt im Forum angezeigt.

  3. Ich deaktiviere auch Die eingebetteten Beiträge kürzen.

  4. Im Abschnitt Eingebettetes CSS gebe ich .button eine größere Schriftart. Dies ist eine kleine Änderung, aber sie macht den Button zum Hinzufügen eines Kommentars größer.

  5. Ich habe auch den Text für embed.continue, embed.start_discussion und embed.imported_from angepasst, was ändert, was im Kommentarbereich auf meiner Website angezeigt wird.

Das bedeutet, dass ich die volle Kontrolle über den HTML-Code habe, der im Forum-Post angezeigt wird. Der HTML-Code, den ich ihm gebe, ist im Grunde das Äquivalent eines OneBox – es ist ein großer Thumbnail und ein Link zum Hauptbeitrag.

Das funktioniert für mich so ziemlich perfekt, nachträglicher Dank für die Hilfe!

2 „Gefällt mir“
17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.