Intégration d'une liste de sujets Discourse dans un autre site

Nouvelles et événements Annonces
59

Je ne pense pas que cela soit possible. Le code Discourse utilisé pour récupérer les sujets ne charge que les listes de sujets les plus récents. Les filtres disponibles dont j’ai connaissance pour trier les listes sont replies, views, activity, likes. Vous pouvez essayer de trier les listes avec l’un de ces filtres pour sélectionner les meilleurs sujets. Par exemple :

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

La police utilisée dans l’iframe est définie sur Discourse. Sur la dernière version de Discourse, je rencontre un problème lors de la définition de la police lorsque j’intègre une liste de sujets sur mon site WordPress. Je teste cela localement, et non sur un site de production, ce qui pourrait être lié au problème. Ce que je constate, c’est que ce style est transmis pour la police de l’iframe :

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

Ce style est défini sur Discourse, mais WordPress n’a pas accès à la variable, donc la police est définie comme Times New Roman sur mon site. Je vais examiner ce problème plus en détail. (Édition : le problème de définition de la police est dû à des modifications récentes de Discourse. Nous allons régler cela.)

Cela peut être délicat. L’iframe créée se trouve à l’intérieur de l’élément d-topics-list que vous ajoutez à la page. Définir la valeur sur une largeur explicite dans le CSS de mon site fonctionne pour moi. Je pense que cela pourrait être amélioré cependant :

d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}
6 « J'aime »
61

Dans le coin supérieur gauche de l’iframe, il y a un nombre (par exemple 110,5 ms) qui mène à un lien vers /embed/topics. Y a-t-il un moyen de s’en débarrasser ?

Édition : La réponse est que cela n’est affiché qu’au « développeur Discourse » : What is this box at the upper left displaying timings in milliseconds when I am logged in as admin? :slight_smile:

7 « J'aime »
75

Salut ! J’essaie d’intégrer des publications sur un site WordPress et j’ai réussi à faire fonctionner la partie intégration. Existe-t-il un moyen de rendre l’affichage mobile un peu plus attrayant ? Si les publications contiennent des images, la mise en page des colonnes avec images se retrouve serrée les unes contre les autres. Un simple :

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

résoudrait ce problème. Y a-t-il une possibilité d’implémenter quelque chose dans ce genre ?

Salutations, M

3 « J'aime »
76

Vous devriez pouvoir ajouter votre propre CSS personnalisé ici lors de l’édition de votre thème. Y a-t-il une raison pour laquelle vous souhaiteriez l’inclure dans le cœur du système ?

2 « J'aime »
77

Ah, je ne réalisais pas que cela chargerait le CSS de mon thème Discourse. Je vais essayer et je reviens vers toi !

2 « J'aime »
78

Il y a une section dédiée à l’intégration dans les thèmes pour cet usage !

4 « J'aime »
79

Bonjour, j’ai déjà intégré une liste de sujets sur mon site web, mais je tente maintenant de mettre en avant un seul sujet basé sur un tag. J’ai donc intégré avec succès une autre liste (avec per-page=1), mais le problème est que je ne peux pas ajouter de classes CSS ou d’ID. Il n’y a donc absolument aucune différence entre la première liste et celle-ci.

Cela signifie que même une chose simple, comme utiliser une couleur de fond différente pour l’une des listes intégrées, est impossible.

Existe-t-il une solution de contournement ?

Je vous serais très reconnaissant de votre aide.

2 « J'aime »
80

Merci @eviltrout, l’ajout de ce code dans « CSS intégré » a fait l’affaire !

2 « J'aime »
82

Il n’existe actuellement aucun moyen d’ajouter des règles CSS différentes à différents éléments intégrés. Vous ne pouvez ajouter qu’un style personnalisé qui s’applique à tous les éléments intégrés.

4 « J'aime »
83

Je rencontre l’erreur suivante lors de l’intégration des derniers sujets ici https://vceliquidrecipes.com/ :

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

Mon code d’intégration ressemble à ceci :

<d-topics-list discourse-url="https://vapingcommunity.co.uk" status="open" order="replies" per-page="10"></d-topics-list>
2 « J'aime »
84

Ces erreurs semblent provenir de mini profiler et ne sont probablement pas liées à ce qu’un utilisateur ordinaire voit. J’ai visité votre site et j’ai vu une liste de sujets sans aucune erreur.

4 « J'aime »
85

Ah, donc c’est normal, ils apparaîtraient dans les journaux, c’est bien ça ?

2 « J'aime »
86

Je ne suis pas sûr que ce soit normal, mais il n’y a pas lieu de s’inquiéter. La plupart des utilisateurs n’ont pas accès à mini profiler, donc cela n’apparaît probablement que lorsque vous le faites.

3 « J'aime »
87

Ok, merci pour votre aide, c’est toujours très apprécié. Continuez ce excellent travail.

2 « J'aime »
88

Bonjour, merci pour votre travail acharné sur ce projet.

Sur Firefox et Chrome, la liste ne fonctionne pas comme prévu pour nous. Bien que nous l’ayons configurée pour afficher 10 sujets, elle n’en montre que 4.

Sur Chrome, nous observons cette erreur JS lorsque nous intégrons la 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)

Curieusement, cela ne se produit pas sur Safari.

La liste est intégrée sur ce site web : https://rebetiko.sealabs.net (à la fin de la page, si vous souhaitez la tester vous-même).

4 « J'aime »
89

Est-ce que l’un d’entre vous peut reproduire ce problème ? :slight_smile:

CC : @JimPas, @simon, @Vaping_Community

3 « J'aime »
90

Vous avez 10 liens de sujets sur la page, 6 sont masqués pour une raison inconnue, je ne sais pas ce qui cause cette erreur

Ajouter une hauteur à l’iframe permet d’afficher les liens de sujets masqués

d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}
4 « J'aime »
91

J’ai aussi rencontré ce problème. Parfois, cela semblait correct. Parfois, la liste des sujets était tronquée (comme si elle était déterminée par le nombre de pixels plutôt que par le nombre de sujets) et la police n’était pas celle attendue (je ne me souviens plus des détails). J’ai donc opté pour le flux RSS de Discourse à la place. Je n’utilise que Chrome et je n’ai pas soupçonné que cela puisse être un problème spécifique à Chrome.

3 « J'aime »
92

Bonjour !

Y a-t-il un moyen d’exclure des sujets de la liste ?

2 « J'aime »
93

Vous pourriez peut-être utiliser des balises pour cela ? Balisez les sujets que vous souhaitez voir apparaître dans la liste et filtrez en fonction de celles-ci ?

5 « J'aime »