Comment personnaliser le texte dans un message intégré ?

[KevinWorkman]

J’ai un site sur lequel je publie divers tutoriels et blogs, et j’utilise Discourse à la fois comme forum et comme système de commentaires grâce à la fonctionnalité d’intégration.

Cela fonctionne très bien la plupart du temps, sauf que lorsque je crée une nouvelle page sur le site principal, tout le contenu est inclus dans le message Discourse. Certains de mes utilisateurs ne connaissent même pas le site principal, car ils lisent toujours l’intégralité du message sur le forum ! Ce qui pose problème car des fonctionnalités comme les éditeurs de code intégrés ne fonctionnent pas sur Discourse, ce qui donne une expérience buggée.

Dans un monde idéal, le message Discourse ne serait qu’un lien court et très évident vers le message original sur la page principale. Peut-être quelque chose comme ceci :

Voir le message original ici :

https://example.com

Les réponses à ce fil de discussion apparaîtront comme des commentaires sur le message original !

J’ai essayé de désactiver le paramètre embed truncate comme décrit dans ce fil de discussion, mais cela semble masquer le bouton “afficher le message complet” tout en affichant toujours tout le contenu du message.

J’ai également essayé de modifier le message embed.imported_from, mais cela ne fait que changer le petit texte en bas que les gens semblent déjà manquer.

J’ai également essayé de modifier manuellement le message après que Discourse l’ait créé, mais le markdown n’est pas rendu en HTML et s’affiche comme du texte brut. Cela ressemble à ce problème : Customizing the "Embedding" Behavior by Disabling Show Full Post?

Y a-t-il un paramètre que j’ai manqué, ou une autre astuce que je peux utiliser pour personnaliser le texte d’un message Discourse généré automatiquement ? Peut-être quelque chose que je peux inclure dans le HTML du site principal pour tromper Discourse et lui faire afficher la bonne chose ? Ou je ne suis pas contre le modifier manuellement, s’il existe un moyen de corriger le problème de rendu du markdown.

Merci pour toute aide que vous pourrez m’apporter !

[KevinWorkman]

Désolé pour le dérangement, mais je serais vraiment reconnaissant si quelqu’un avait des idées à me suggérer !

[angus (Angus McLeod)]

Salut Kevin, puis-je juste confirmer si vous utilisez le plugin WP Discourse ou un embed javascript ?

[KevinWorkman]

Merci pour votre réponse ! J’utilise l’intégration JavaScript. Par exemple, j’ai cette page :

React CSS Tutorial

Qui contient ce code d’intégration :

<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>

Cela crée ce message sur mon Discourse :

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

Et si vous cliquez dessus, vous verrez que le message contient le texte intégral de la page d’origine.

[angus (Angus McLeod)]

Merci pour la clarification.

Pourquoi avez-vous activé le paramètre de site embed truncate dans Discourse ? Je suis juste un peu confus car vous mentionnez l’avoir désactivé, mais vous dites aussi que votre problème est

@KevinWorkman

Cela fonctionne très bien, sauf que lorsque je crée une nouvelle page sur le site principal, tout le contenu est inclus dans la publication Discourse. Certains de mes utilisateurs ne connaissent même pas le site principal, car ils lisent toujours la publication complète sur le forum ! Ce qui pose problème car des fonctionnalités comme les éditeurs de code intégrés ne fonctionnent pas sur Discourse, ce qui donne une expérience buggée.

Le paramètre embed truncate est là en partie pour cette raison. Il signifie que l’utilisateur ne verra qu’un extrait partiel de la publication sur Discourse lui-même.

Pourriez-vous expliquer un peu plus quel comportement utilisateur spécifique vous essayez d’éviter et quel comportement utilisateur spécifique vous essayez d’encourager.

[KevinWorkman]

@angus

Pourquoi avez-vous activé le paramètre du site embed truncate dans Discourse ?

J’ai fait des allers-retours avec le paramètre embed truncate. En y regardant à nouveau maintenant, je suppose que l’activer est marginalement mieux, mais j’espère toujours trouver un moyen d’éviter d’afficher le texte intégral de l’article original dans Discourse. En d’autres termes, je ne veux pas cacher le texte intégral derrière un clic de bouton - je ne veux jamais afficher le texte intégral, juste un lien vers l’article original.

@angus

Pourriez-vous expliquer un peu plus quel comportement utilisateur spécifique vous essayez d’éviter, et quel comportement utilisateur spécifique vous essayez d’encourager.

Le comportement que j’essaie d’éviter est que les utilisateurs viennent sur mon Discourse et lisent l’article complet sur Discourse, plutôt que sur la page d’origine. C’est un problème car le texte intégral sur Discourse contient souvent des bugs (avec du JS interactif, du code embarqué, etc.), et ensuite je reçois des rapports de bugs où la solution est d’arrêter de lire sur Discourse et d’aller sur le “vrai” site à la place.

En d’autres termes, le comportement utilisateur que j’essaie d’encourager est de lire l’article complet sur la page d’origine, plutôt que dans le post Discourse.

Cela peut sembler mineur (et dans l’ensemble, ça l’est) mais ma crainte est que les utilisateurs viennent sur mon Discourse, pensent que le comportement de la page est bogué, et repartent avant de réaliser qu’il y a une page sur mon site “réel” qu’ils devraient lire à la place de Discourse.

Quelques options possibles que j’ai envisagées :

• Existe-t-il un paramètre qui indique à Discourse d’inclure uniquement un lien, et de ne pas inclure du tout une partie de l’article original ?
• Existe-t-il une classe CSS ou un autre attribut que je peux ajouter à mon HTML d’origine pour indiquer quelle partie de l’article doit être incluse (ou exclue) dans le post Discourse ?
• Peut-être pourrais-je ajouter du CSS personnalisé à Discourse pour masquer le bouton Show Full Post... ?

[angus (Angus McLeod)]

Merci pour l’explication Kevin. Il n’y a pas de paramètres spécifiquement dirigés vers ce problème, mais il y a deux façons d’aborder cela.

Personnaliser le HTML extrait de votre site

La façon dont les intégrations fonctionnent est qu’elles extraient le contenu d’un site à l’aide de la gem Readability. La gem et sa sortie utilisent les options suivantes pour filtrer le HTML extrait.

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?

Vous pourriez donc définir les paramètres du site allowed_embed_selectors, blocked_embed_selectors ou allowed_embed_classnames pour restreindre le contenu extrait de votre HTML et affiché dans la publication Discourse, par exemple, vous pourriez le restreindre à des classes inexistantes afin qu’aucun contenu ne soit extrait.
Le contenu extrait du site se voit ensuite ajouter ce HTML :

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

Il vous suffirait donc de personnaliser le texte embed.imported_from dans le panneau d’administration pour demander à l’utilisateur de lire le contenu sur le blog. Notez que vous pouvez interpoler le lien vers le contenu dans ce texte, par exemple, la version anglaise du texte de la locale est :

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

Masquer le bouton Afficher le message complet

Comme vous l’avez suggéré, masquer le bouton Afficher le message complet avec CSS devrait également fonctionner.

[sutterseba]

J’ai du mal à comprendre pourquoi il n’y a pas d’option pour personnaliser le texte intégré complet. Je ne veux pas extraire de contenu de l’URL intégrée, mais simplement avoir un lien vers celle-ci avec une courte description (par exemple, juste le résumé des métadonnées).

Pour l’instant, je le fais avec un appel API automatisé, mais je souhaite passer à la fonctionnalité d’intégration native.

J’ai essayé de créer un élément caché sur le site extrait spécifiquement pour Discourse afin qu’il n’extraie qu’un seul élément, mais le problème est que le onebox ne sera pas affiché pour le lien.

@angus

vous pourriez le restreindre à des classes inexistantes afin qu’aucun contenu ne soit extrait

La personnalisation de embed.imported_from a également ses limites, car elle est toujours forcée dans une balise <small>, ne permettant aucune personnalisation réelle.

[angus (Angus McLeod)]

@sutterseba

Je peine à comprendre pourquoi il n’y a pas d’option pour personnaliser le texte intégré complet. Je ne veux pas extraire de contenu réel de l’URL intégrée, mais juste avoir un lien vers celle-ci avec une courte description (par exemple, juste le résumé méta).

Il semble que vous ne vouliez pas d’une intégration, qui est, par nature, “l’intégration” de contenu provenant d’un autre endroit.

@sutterseba

Pour l’instant, je fais cela avec un appel API automatisé, mais je veux passer à la fonctionnalité d’intégration native.

Pourquoi voulez-vous changer ?

[sutterseba]

@angus

Il semble que vous ne vouliez pas d’une intégration

C’est vrai, je veux juste une création automatique de fil de discussion chaque fois qu’un nouvel article de blog est publié.

Cependant, je veux aussi utiliser la fonctionnalité d’intégration JS native pour afficher les commentaires sous l’article de blog sur le site externe, ce qui s’accompagne également du comportement d’intégration dans le forum.

Mon automatisation actuelle a un peu de retard (pas en temps réel), et la mise en œuvre d’une création automatique de fil de discussion dans notre CMS chaque fois qu’un nouvel article est publié est un peu plus difficile, car ce n’est pas juste un CMS de blog et il n’y a même pas d’événement distinct de « publication ».

Dans tous les cas, il y aura des collisions entre l’intégration JS qui essaie de créer le fil de discussion et mon automatisation, le premier étant probablement plus rapide la plupart du temps. C’est pourquoi je veux « passer » à l’utilisation de la fonctionnalité d’intégration JS, avec l’inconvénient que les fils de discussion devront être modifiés manuellement à chaque fois.

Je suis ouvert aux suggestions !

[angus (Angus McLeod)]

Merci pour l’explication.

Ok, si je vous comprends bien :

1. vous souhaitez la fonctionnalité de création de sujet et de liaison de commentaires des intégrations JS ; et
2. vous souhaitez juste un lien avec une courte description dans le premier message du sujet lié dans Discourse.

Est-ce exact ? Pour le point 2, avez-vous essayé le paramètre du site embed truncate ? Si oui, qu’est-ce qui ne vous a pas plu ? Je comprends que vous en avez déjà parlé un peu dans votre première réponse, mais pourriez-vous expliquer spécifiquement ce qui vous pose problème ? Donnez peut-être un exemple de ce qui vous empêche d’atteindre le résultat souhaité (et quel est exactement ce résultat souhaité).

[sutterseba]

@angus

Si je vous comprends bien

Oui, c’est le cas.

Le problème vient du onebox de lien, qui n’est pas affiché car le contenu intégré est toujours encapsulé dans des balises HTML.

Je sais que cela peut sembler un détail mineur (ce qu’il est), mais l’inconvénient en termes de qualité de vie, à devoir modifier cela manuellement pour chaque article, est important et quelque chose que je voulais corriger depuis longtemps.

Ce à quoi je veux que cela ressemble (en utilisant un exemple de publication de blog Discourse) :

Actuellement, je devrais tripoter des éléments cachés sur le site web pour pouvoir extraire spécifiquement l’URL et le résumé, et même dans ce cas, le problème est que le onebox n’est pas affiché. La seule chose que je peux personnaliser plus ou moins entièrement est la partie “Lire l’article de blog complet…” en bas.

Je suppose que ce que je demande, c’est la possibilité d’ajouter quelque chose au snippet JS comme ceci :

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\nNous sommes ravis de partager le déménagement de la communauté Spiceworks vers Discourse ! L\'équipe Spiceworks a travaillé en étroite collaboration avec notre équipe de migration\n\n<small>Lire l\'article de blog complet sur <a href="https://blog.discourse.org/2024/03/a-warm-welcome-to-spiceworks/">discourse.org</a>. Cet article a été créé automatiquement et les réponses seront affichées sur le site web.</small>'
};

discourseEmbedRaw étant équivalent à la valeur raw d’une requête API régulière vers /posts.json.

Mais je comprends que cela pourrait être une exigence de cas extrême et n’est pas pertinent pour la plupart des utilisateurs. Je suppose que je vais essayer de résoudre cela en créant les sujets via l’API avant que le snippet JS ne tente de le faire.

[angus (Angus McLeod)]

@sutterseba

Je suppose que je vais essayer de résoudre ce problème en créant les sujets via l’API avant que l’extrait JavaScript ne tente de le faire.

Je ne recommanderais pas cela.

@sutterseba

discourseEmbedRaw

Cela causerait divers problèmes. Laissons cela de côté pour l’instant.

J’apprécie que vous souhaitiez un contrôle total sur tout, mais soyez patient pendant que j’essaie de traduire vos besoins en améliorations réalisables du système actuel. Gardez à l’esprit qu’il ne s’agit que de suggestions et que je n’ai aucun contrôle sur ce qui est accepté par l’équipe Discourse.

Un article intégré dans Discourse est essentiellement composé de deux choses :

1. Le HTML « importé de » (c’est-à-dire le lien)
2. Le contenu HTML de la page liée, soit intégralement, soit tronqué.

1. Contrôle du HTML « importé de »

Actuellement, ce HTML est codé en dur comme suit :

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

Vous aimeriez le personnaliser pour qu’il ne s’agisse, par exemple, que de l’URL afin qu’il soit en onebox. Je pense qu’une amélioration réalisable serait un paramètre de site qui le bascule simplement sur « URL uniquement », afin que vous n’ayez pas à permettre aux administrateurs de saisir du HTML quelque part.

2. Contrôle du contenu HTML tronqué

Vous pouvez déjà le faire. Définissez simplement le paramètre de site allowed embed classnames sur un nom de classe d’un élément que vous avez utilisé pour envelopper l’extrait que vous souhaitez sur votre site, par exemple :

Sur Discourse

Définissez ces paramètres de site :

• embed truncate sur false
• allowed embed classnames sur “discourse-excerpt”

Sur votre page de blog

<div class="discourse-excerpt">
Nous sommes ravis de partager le déménagement de la communauté Spiceworks vers Discourse ! L'équipe Spiceworks a travaillé en étroite collaboration avec notre équipe de migration
</div>

3. Contrôle de l’ordre du HTML « importé de » et du contenu HTML

Si je vous comprends bien, vous souhaitez que la partie « importé de » (par exemple, juste l’URL) précède le contenu HTML (ou le contenu tronqué). Encore une fois, le moyen le plus simple de le faire serait un paramètre de site booléen, quelque chose comme embed imported from above content.

En bref, si je vous comprends bien, vous pourriez y parvenir en ajoutant deux nouveaux paramètres booléens et quelques petites modifications à la classe TopicEmbed. Vous noterez que toutes ces modifications concernent discourse/discourse lui-même, car le traitement doit s’y dérouler.

Comme je l’ai mentionné ci-dessus, il ne s’agit que de suggestions sur la façon dont j’atteindrais ce que vous voulez faire. Pour que ces changements, ou quelque chose de similaire, soient mis en œuvre, il faudrait l’accord de l’équipe Discourse.

[sutterseba]

Merci d’avoir noté cela !

@angus

Contrôle du contenu HTML tronqué

Vous pouvez déjà le faire. Définissez simplement le paramètre du site allowed embed classnames sur un nom de classe d’un élément que vous avez utilisé pour envelopper l’extrait que vous souhaitez sur votre site.

Oui, c’est exactement ce avec quoi j’ai joué, le problème étant que le contenu sera enveloppé dans plusieurs balises HTML, c’est pourquoi le onebox ne se déclenchera pas. J’ai essayé de séparer l’URL avec des balises <br> (pour déclencher le onebox), mais ce genre de choses semble être automatiquement tronqué.

@angus

Je ne recommanderais pas cela.

Hmm, d’accord, pourquoi ?

Je définirais la valeur embed_url, bien sûr.

[angus (Angus McLeod)]

@sutterseba

le problème est que le contenu sera encapsulé dans plusieurs balises HTML, c’est pourquoi le onebox ne se déclenchera pas.

Obtenir l’URL de votre intégration pour le onebox est un problème distinct. Utilisez allowed embed classnames juste pour définir l’extrait de texte comme dans mon exemple.

@sutterseba

Hmm, d’accord, pourquoi ?

Parce que vous réinventerez effectivement la roue en essayant de contourner ce qui est vraiment un problème d’analyse de TopicEmbed. Cela ouvrira également un nouvel ensemble de problèmes, par exemple si votre code ne s’exécute pas dans l’ordre attendu, par exemple en cas de condition de concurrence ou d’une autre exception intermédiaire. Ces types de problèmes surviennent relativement souvent avec un mélange de code sur un site externe et le plugin WP Discourse. En bref, cela n’en vaut pas la peine.

Vous semblez bien connaître une base de code . Vous devez en fait apporter deux modifications simples à cette classe.

1. Insérez une condition contrôlée par un paramètre de site ici
   discourse/app/models/topic_embed.rb at main · discourse/discourse · GitHub

2. Insérez une autre condition contrôlée par un paramètre de site ici
   discourse/app/models/topic_embed.rb at main · discourse/discourse · GitHub

Vous n’auriez même pas besoin de créer l’application discourse. Écrivez simplement deux tests rspec d’abord, puis apportez les modifications, puis une fois que vous les aurez fait fonctionner, faites une PR

[KevinWorkman]

Pour ce que ça vaut, voici ce que j’ai fini par faire :

1. Sur mon blog, j’ai une <div> avec un id forum-excerpt, qui est masquée avec display:none mais contient le HTML que j’aimerais montrer dans la publication Discourse. (Je fais cela en utilisant une logique Jekyll / Liquid, mais cela ne devrait pas vraiment avoir d’importance.)

2. Sur mon Discourse, j’ai défini le Sélecteur CSS pour les éléments autorisés dans les intégrations sur #forum-excerpt. Bien que la div soit masquée sur ma page réelle, le contenu apparaît sur le forum.

3. J’ai également décoche Tronquer les publications intégrées.

4. Dans la section CSS intégré, j’ai donné à .button une police plus grande. C’est un petit changement, mais il rend le bouton pour ajouter un commentaire plus grand.

5. J’ai également personnalisé le texte embed.continue, embed.start_discussion et embed.imported_from, ce qui modifie ce qui apparaît dans la section des commentaires sur mon site Web.

Cela signifie que j’ai un contrôle total sur le HTML qui apparaît dans la publication du forum. Le HTML que je lui donne est essentiellement l’équivalent d’un OneBox : c’est une grande vignette et un lien vers la publication principale.

Cela fonctionne à peu près parfaitement pour moi, merci en retard pour votre aide !

[system (system) A fermé ce sujet ()]

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