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

Nouvelles et événements Annonces
95

Bonjour,

Je me demandais s’il était possible d’afficher l’avatar de l’auteur du dernier message et la catégorie des sujets, tout comme sur la page d’accueil du forum, au lieu de n’afficher que les titres des sujets ?

3 « J'aime »
96

Si vous passez template=complete, il y a beaucoup plus d’informations dans l’embed :

image
image563×915 87.8 KB

3 « J'aime »
97

Wow, merci, c’est… trop d’informations :laughing: Y a-t-il un compromis, ou devrais-je masquer les informations inutiles avec du CSS personnalisé ?

D’ailleurs, cela affiche l’auteur du sujet, et non l’auteur du dernier message.

3 « J'aime »
98

Le modèle complet enveloppe toutes les informations dans des conteneurs, car il est attendu que chaque site le personnalise pour correspondre à son propre design avec du CSS.

3 « J'aime »
99

C’est génial !

Est-il possible de modifier sa largeur ?

2 « J'aime »
100

C’est un conteneur fluide qui s’adapte à la largeur de l’élément parent.

2 « J'aime »
101

Sur mon site, ce n’est pas le cas. C’est trop large pour le div dans lequel il se trouve, malheureusement.

2 « J'aime »
102

Vérifiez deux fois le balisage, masquez et positionnez correctement les éléments ; cela devrait fonctionner dans n’importe quel conteneur :

2 « J'aime »
103

Malheureusement, cela ne fonctionne pas sur mon site. Je pense que peut-être le CSS dans le framework responsive le perturbe. Y a-t-il un moyen de modifier la largeur (par exemple, à 90 % de sa valeur actuelle, ou même de quelques pixels de moins) ?

2 « J'aime »
104

Avez-vous essayé d’utiliser du CSS comme ceci :

d-topics-list iframe {
    padding: 0 5%;
}

?

2 « J'aime »
105

Cela ne fonctionne pas. Si j’édite la balise iframe dans la console F12 de Chrome pour inclure width="100%", cela fonctionne bien… y a-t-il un moyen d’apporter ce changement ?

2 « J'aime »
106

J’ai ajouté un exemple montrant comment ajouter du CSS personnalisé à la liste du sujet principal.

4 « J'aime »
107

Merci. J’ai essayé cela. Cela permet bien d’afficher les sujets intégrés sous forme de grille. Malheureusement, la largeur de la grille (c’est-à-dire deux sujets) reste la même qu’auparavant, loin des 100 %.

Le CSS ci-dessus (d-topics-list iframe) ne modifie pas du tout l’iframe. Si seulement il pouvait lui appliquer “width: 100 %”…

Je l’ai testé dans un document HTML par ailleurs vide, et il reste toujours étroit. D’autres idées ? :slight_smile:

3 « J'aime »
108

J’adore cet embed… :sparkling_heart:

Quelques problèmes et une demande de fonctionnalité… :

  • Si j’ajoute les paramètres allow-create="true" et category="4", lorsque je clique sur le bouton « + Créer un nouveau sujet », la fenêtre modale/pop-up « Ajouter un nouveau sujet » ne s’ouvre pas. Est-ce censé se produire ?
  • Si j’ajoute les paramètres allow-create="true" et tags="random-tag", lorsque je clique sur le bouton « + Créer un nouveau sujet », je suis redirigé vers la liste des sujets filtrée par random-tag — mais le menu déroulant des tags n’affiche pas « random-tag » et lorsque je clique sur « Ajouter un nouveau sujet », le tag n’est pas pré-rempli.
  • Pourrions-nous obtenir les 100 premiers mots du post dans le thème complet ?
4 « J'aime »
109

Ce serait une excellente idée !

Par ailleurs, je suis toujours très motivé pour régler le problème de largeur… :slight_smile:

2 « J'aime »
110

Le CSS doit être ajouté à votre site, et non pas au CSS intégré de Discourse. Vous devriez donc avoir quelque chose comme ceci :

<html>
  <head>
    <script src="https://jonathan5-discourse.com/javascripts/embed-topics.js"> 
    </script>
    <style>
      d-topics-list iframe{
        width: 100%!important;
        }
    </style>
  </head>
  <body>
    <d-topics-list discourse-url="https://jonathan5-discourse.com" category="5" per-page="5"></d-topics-list>
  </body>
</html>
6 « J'aime »
Examples of styling and use of Embedding a list of Discourse Topics on a external site
111

Merci beaucoup. Cela semble maintenant évident. Je suis passé de l’incapacité à styliser le CSS interne de l’iframe (en essayant depuis mon site) à l’incapacité à styliser l’iframe elle-même (en essayant depuis Discourse). Je vais essayer et je vous tiendrai au courant !

Mise à jour : Votre CSS a fonctionné — merci beaucoup.

4 « J'aime »
112

Je viens d’essayer cela. Dans mon cas, c’est category=5 car c’est le numéro de la catégorie que j’intègre. La fenêtre pop-up ne s’affiche pas, mais un nouvel onglet s’ouvre avec l’URL https://forum.example.com/new-topic?category_id=5. Peut-être avez-vous un paramètre de navigateur qui bloque ce type de « pop-up » ?

2 « J'aime »
113

Merci d’avoir confirmé que cela fonctionne pour vous, @Jonathan5. J’ai désactivé le composant de thème discourse-tag-sidebar, et maintenant la fenêtre contextuelle fonctionne :sunglasses:

3 « J'aime »
114

Je vais jeter un coup d’œil à cela :eyes:

4 « J'aime »