# Blocs de la barre latérale droite

**URL:** https://meta.discourse.org/t/right-sidebar-blocks/231067
**Category:** Theme component
**Tags:** official, desktop, right-sidebar-blocks
**Created:** [Juin 25, 2022, 2:55 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067 "2022-06-25T02:55:24Z")
**Posts on this page:** 20
**Page:** 6

<div class="post-metadata">

### Author: ![MihirR](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mihirr/32/475158_2.png) [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [Décembre 9, 2024, 7:15 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/117 "2024-12-09T07:15:07Z")

</div>

Est-ce que cela fonctionne sur le thème redditish par hasard ?

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [Décembre 24, 2024, 7:24 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/118 "2024-12-24T07:24:18Z")

</div>

Quelqu’un a-t-il rencontré des [problèmes de limite de débit](https://meta.discourse.org/t/issues-when-i-enable-component-maybe-right-sidebar-blocks/343964) liés à ce composant de thème&nbsp;?

---

<div class="post-metadata">

### Author: ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [Janvier 4, 2025, 8:00 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/119 "2025-01-04T08:00:11Z")

</div>

Je ne sais pas s’il est possible d’ajouter des sujets de catégorie pour obtenir des publications qui peuvent afficher des images. J’ai créé mon propre code en utilisant du HTML personnalisé, mais il ne prend pas effet, alors s’il vous plaît, aidez-moi !

> **html**
>
> ```html
> <head>
> <style>
> .topic-list {
> list-style: none;
> padding: 0;
> }
> .topic-list-item {
> display: flex;
> align-items: center;
> margin-bottom: 15px;
> }
> .topic-list-item img {
> width: 50px;
> height: 50px;
> object-fit: cover;
> margin-right: 10px;
> cursor: pointer;
> }
> .topic-list-item a {
> text-decoration: none;
> font-size: 16px;
> color: #333;
> }
> .topic-list-item a:hover {
> text-decoration: underline;
> }
> </style>
> </head>
> <body>
> 
> <div id="topic-list-container">
> <h2>Derniers articles de jeux</h2>
> <ul class="topic-list" id="topic-list">
> <!-- Les articles ici seront rendus dynamiquement via JavaScript -->
> </ul>
> </div>
> 
> <script>
> // Récupérer les données et rendre les articles (jusqu'à 5)
> fetch('https://www.justnainai.com/c/5.json')
> .then(response => response.json()) // Analyser les données JSON
> .then(data => {
> const topicListContainer = document.getElementById("topic-list");
> 
> // Obtenir le tableau des articles et limiter à 5 articles
> const topics = data.topic_list.topics.slice(0, 5); // Prendre seulement les 5 premiers articles
> 
> topics.forEach(topic => {
> // Créer un élément de liste
> const listItem = document.createElement("li");
> listItem.className = "topic-list-item";
> 
> // Créer un élément image
> const image = document.createElement("img");
> image.src = topic.image_url || "https://via.placeholder.com/50"; // Utiliser une image de remplacement si aucune n'est fournie
> image.alt = topic.title;
> image.onclick = () => {
> window.location.href = `/t/${topic.slug}`; // Cliquer sur l'image pour accéder à l'article
> };
> 
> // Créer un élément de titre
> const title = document.createElement("a");
> title.href = `/t/${topic.slug}`; // Cliquer sur le titre pour accéder à l'article
> title.textContent = topic.title;
> 
> // Ajouter l'image et le titre à l'élément de liste
> listItem.appendChild(image);
> listItem.appendChild(title);
> 
> // Ajouter l'élément de liste au conteneur de liste
> topicListContainer.appendChild(listItem);
> });
> })
> .catch(error => {
> console.error('Erreur lors de la récupération des données :', error);
> });
> </script>
> 
> </body>
> </html>
> 
> ```

---

<div class="post-metadata">

### Author: ![Joe\_F](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@Joe\_F](https://meta.discourse.org/u/Joe_F)
#### Post date: [Janvier 9, 2025, 8:52 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/120 "2025-01-09T08:52:57Z")

</div>

J’adore vraiment ce composant avant tout, alors merci pour tout votre excellent travail dessus !

J’ai remarqué des discussions sur les meilleurs contributeurs et des délais fixés pour eux, j’aimerais que les nôtres soient un top utilisateurs mensuel, quelqu’un a-t-il réussi cela ?

Merci Joe

---

<div class="post-metadata">

### Author: ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [Janvier 10, 2025, 6:50 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/121 "2025-01-10T18:50:45Z")

</div>

> [@Joe\_F](#):
>
> J’ai remarqué des discussions sur les meilleurs contributeurs et des échelles de temps définies pour eux, j’aimerais que les nôtres soient un top utilisateurs mensuel, quelqu’un a-t-il réussi cela ?

Vous devriez pouvoir ajouter un paramètre `period` avec la valeur `monthly`. Il manquait dans la liste des paramètres de la publication originale, mais elle a maintenant été mise à jour !

---

<div class="post-metadata">

### Author: ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [Janvier 14, 2025, 8:31 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/122 "2025-01-14T08:31:07Z")

</div>

![L'image montre un motif répété de petits écrans publicitaires, chacun contenant le texte « 社区广告位招租 », qui se traduit par « Emplacement publicitaire communautaire à louer » en caractères chinois. (Légendé par l'IA)](https://global.discourse-cdn.com/meta/original/4X/6/d/3/6d35ca17b59ae10fa9cddf5a99ac5c2f96f8c34b.jpeg)  
Je n’arrive pas à obtenir les derniers articles avec ce composant.  
👆  
👇  
Le code que j’ai modifié s’affiche mais disparaît lorsque je clique sur les autres catégories.  
 ![L'image est un collage présentant des personnages animés et du contenu promotionnel pour un événement musical. (Légendé par l'IA)](https://global.discourse-cdn.com/meta/original/4X/e/6/3/e63ab455c9985e87cbf00236c773595ff395b7b2.jpeg)

J’espère vraiment que ce composant pourra prendre en charge l’utilisation de js ou le rafraîchissement, car le composant de code que j’ai écrit ne fonctionne pas, il ne peut pas obtenir le dernier contenu des articles, alors j’en ai écrit un à la main. J’espère qu’il pourra être mis à jour car je l’ai intégré dans le tc-right-sidebar après avoir changé, il n’est plus disponible. Je suis aussi un codeur débutant, j’espère que cette fonctionnalité pourra être mise à jour, s’il vous plaît, s’il vous plaît, s’il vous plaît.

> **HTML+JS**
>
> ```javascript
> // Assurez-vous que le DOM est entièrement chargé avant d'exécuter le code
> document.addEventListener("DOMContentLoaded", () => {
> // Obtenez le conteneur de la barre latérale
> const sidebar = document.querySelector(".tc-right-sidebar");
> 
> // Vérifiez si le conteneur de la barre latérale est trouvé
> if (!sidebar) {
> console.error("Conteneur de barre latérale .tc-right-sidebar non trouvé !");
> return;
> }
> 
> // Ajoutez du contenu recommandé
> sidebar.innerHTML = `
> <div class="custom-sidebar">
> <div class="recommendation-container">
> <div class="recommendation-header">
> <h2><i class="fa fa-hand-o-right"></i>Derniers articles de jeu</h2> <!-- Ajoutez une icône et un titre -->
> </div>
> <ul class="recommendation-list">
> <!-- Contenu de remplacement par défaut -->
> <li class="recommendation-item">
> <a href="#">
> <img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Image de remplacement 1">
> </a>
> </li>
> </ul>
> </div>
> </div>
> `;
> 
> // Chargez dynamiquement les données
> fetchTopics();
> 
> // Écoutez les changements de thème
> observeThemeChanges();
> });
> 
> /**
> * Récupérez les données de sujet à partir de l'API spécifiée
> */
> async function fetchTopics() {
> try {
> // Demandez les données de l'API
> const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
> if (!response.ok) {
> throw new Error("Échec de la récupération des données");
> }
> 
> const jsonData = await response.json();
> 
> // Extrayez les données des 4 premiers sujets
> const topics = jsonData.topic_list.topics.slice(0, 4).map(topic => ({
> id: topic.id,
> title: topic.title,
> slug: topic.slug,
> image_url: topic.image_url || "https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg",
> }));
> 
> // Rendez sur la page
> renderTopics(topics);
> } catch (error) {
> console.error("Erreur lors de la récupération des données :", error);
> }
> }
> 
> /**
> * Affichez le contenu recommandé sur la page
> * @param {Array} topics - Données du sujet
> */
> function renderTopics(topics) {
> const recommendationList = document.querySelector(".recommendation-list");
> recommendationList.innerHTML = ""; // Effacez le contenu de remplacement
> topics.forEach(topic => {
> const link = `https://www.justnainai.com/t/${topic.slug}/${topic.id}`;
> const image = topic.image_url;
> 
> const listItem = document.createElement("li");
> listItem.className = "recommendation-item";
> 
> // Créez le HTML de l'élément recommandé
> listItem.innerHTML = `
> <a href="${link}" title="${topic.title}" target="_blank">
> <img src="${image}" alt="${topic.title}">
> </a>
> `;
> recommendationList.appendChild(listItem);
> });
> }
> 
> ```

> **CSS**
>
> ```css
> .custom-sidebar {
> padding: 10px;
> background-color: #fff; /* Fond blanc */
> border-radius: 5px;
> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
> margin-bottom: 20px;
> }
> 
> .recommendation-container .recommendation-header h2 {
> font-size: 23px; /* Correction de la faute de frappe de "23x" à "23px" */
> margin-bottom: 10px;
> color: #333; /* Titre en noir */
> }
> 
> .recommendation-list {
> list-style-type: none;
> padding: 0;
> margin: 0;
> }
> 
> .recommendation-item {
> margin-bottom: 10px;
> }
> 
> .recommendation-item img {
> width: 300px; /* Largeur fixe */
> height: 156px; /* Hauteur fixe, en restant cohérent */
> object-fit: cover; /* Conservez le rapport d'aspect du contenu de l'image */
> border-radius: 5px;
> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
> transition: transform 0.2s ease;
> }
> 
> .recommendation-item img:hover {
> transform: scale(1.05);
> box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [Janvier 14, 2025, 8:34 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/123 "2025-01-14T08:34:31Z")

</div>

Si vous le transformez en [composant Ember](https://guides.emberjs.com/v5.5.0/upgrading/current-edition/glimmer-components/) (consultez les exemples dans #Customization > Plugin et #Customization > Theme component), vous pouvez l’ajouter via un composant de thème distinct et y faire référence par le nom du composant Ember.

Cela fonctionnerait également avec [Bars](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216), qui utilise le même système.

(NB : ne confondez pas le composant de thème avec le composant Ember. Un composant de thème peut contenir de nombreux composants Ember.)

---

<div class="post-metadata">

### Author: ![tyler.lamparter](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tyler.lamparter/32/485862_2.png) [@tyler.lamparter](https://meta.discourse.org/u/tyler.lamparter)
#### Post date: [Janvier 31, 2025, 5:57 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/124 "2025-01-31T17:57:53Z")

</div>

Avez-vous déjà résolu ce problème ? Nous aimerions également afficher tous les événements de toutes les catégories, quelle que soit la catégorie dans laquelle se trouve l’événement.

---

<div class="post-metadata">

### Author: ![kOS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kos/32/441826_2.png) [@kOS](https://meta.discourse.org/u/kOS)
#### Post date: [Janvier 31, 2025, 6:11 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/125 "2025-01-31T18:11:35Z")

</div>

Malheureusement non.

---

<div class="post-metadata">

### Author: ![tyler.lamparter](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tyler.lamparter/32/485862_2.png) [@tyler.lamparter](https://meta.discourse.org/u/tyler.lamparter)
#### Post date: [Janvier 31, 2025, 6:25 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/126 "2025-01-31T18:25:17Z")

</div>

Dans ce cas, avez-vous une idée de la façon d’afficher la barre latérale uniquement sur la page d’accueil ?

---

<div class="post-metadata">

### Author: ![hendersj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hendersj/32/507887_2.png) [@hendersj](https://meta.discourse.org/u/hendersj)
#### Post date: [Février 1, 2025, 12:24 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/127 "2025-02-01T00:24:52Z")

</div>

Je jouais avec ça dans un environnement sandbox que j’utilise comme POC pour quelqu’un, et non seulement il serait agréable de pouvoir afficher le bloc calendrier sur la page des catégories, mais il serait également agréable de pouvoir spécifier quel(s) calendrier(s) utiliser.

J’ai une catégorie Événements qui contient le calendrier (l’accès restreint par groupe est là où il finira par se trouver), mais je veux que les membres du groupe auquel il est restreint puissent voir la liste des événements à venir n’importe où sur la plateforme pour encourager la participation aux événements.

Je ne sais pas ce qu’il adviendra des restrictions basées sur les groupes pour cela - je ne suis pas encore arrivé aussi loin dans les tests.

Cependant, lorsque je regarde dans ma catégorie Générale, le bloc de la barre latérale droite indique « Aucun événement à venir » - mais si je clique sur « Tout voir », je suis dirigé vers le calendrier des événements et je vois l’événement test que j’y ai mis une semaine à l’avance.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [Février 2, 2025, 1:46 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/128 "2025-02-02T01:46:51Z")

</div>

Avez-vous examiné le composant de thème #Customization > Theme component de Robert ?

> [@Discourse Bars :bières: cocktail (un framework de barre latérale)](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216?u=heliosurge):
>
> : eyeglasses: Vue d’ensemble Un composant de thème qui vous permet de disposer des composants[^1] sur les barres supérieure et latérale. Spécifiez un ensemble de « widgets » distincts pour la route et la position. Prend en charge les configurations pour chacun de : découverte[^2], sujet, tag[^3], catégorie[^3], catégories[^3] OU intersection de tags[^4] Les « barres » peuvent être : supérieure, gauche, droite OU alternative droite. Chaque barre peut être réduite ou ignorée (actualisez le navig…

Si vous disposez d’un budget, un TC pourrait être créé pour intégrer des événements de calendrier dans une barre latérale ou ailleurs, selon vos besoins.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [Février 2, 2025, 2:45 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/129 "2025-02-02T14:45:13Z")

</div>

> [@tyler.lamparter](#):
>
> Avez-vous déjà résolu ce problème ? Nous aimerions également afficher tous les événements dans toutes les catégories, quelle que soit la catégorie dans laquelle se trouve l’événement.

J’ai partagé une version modifiée sur [Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab](https://gitlab.com/manuelkostka/discourse/blocks/upcoming-events). La mise en page n’est pas conçue pour la barre latérale, mais pour mon composant [Homepage Blocks](https://meta.discourse.org/t/homepage-blocks/347066). Cependant, la logique devrait fonctionner dans n’importe lequel des frameworks de mise en page de blocs.

---

<div class="post-metadata">

### Author: ![tyler.lamparter](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tyler.lamparter/32/485862_2.png) [@tyler.lamparter](https://meta.discourse.org/u/tyler.lamparter)
#### Post date: [Février 19, 2025, 8:23 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/130 "2025-02-19T20:23:03Z")

</div>

Pour nous, il suffit d’afficher les bons blocs sur les pages “latest” ou “hot”. Ce que j’ai fait, c’est forker le dépôt et modifier le comportement par défaut lorsqu’aucune route n’est donnée. Pour ce faire, il suffit de modifier le fichier javascripts/connectors/before-list-area/tc-right-sidebar.js et de changer la dernière ligne en :

```javascript
// Si aucune route n'est spécifiée, n'afficher que sur les pages "Latest" ou "Hot"
return [\"discovery.latest\", \"discovery.hot\"].includes(currentRouteName);

```

Comme nous sommes nouveaux sur Discourse, je ne suis pas sûr de la maintenance que cela nécessitera, mais je suppose que nous verrons.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [Février 19, 2025, 9:11 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/131 "2025-02-19T21:11:41Z")

</div>

Avez-vous essayé d’utiliser `discovery.latest` et `discovery.hot` dans le paramètre `show_in_routes` ? Cela devrait en théorie éviter d’avoir à forker le composant.

---

<div class="post-metadata">

### Author: ![tyler.lamparter](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tyler.lamparter/32/485862_2.png) [@tyler.lamparter](https://meta.discourse.org/u/tyler.lamparter)
#### Post date: [Février 19, 2025, 10:02 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/132 "2025-02-19T22:02:28Z")

</div>

On dirait que ça fait aussi l’affaire :face\_palm:

Merci !

---

<div class="post-metadata">

### Author: ![szogun](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/szogun/32/487466_2.png) [@szogun](https://meta.discourse.org/u/szogun)
#### Post date: [Mars 8, 2025, 12:48 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/133 "2025-03-08T00:48:49Z")

</div>

Salut, je ne sais pas ce que je fais de mal, mais je n’arrive pas à faire apparaître la barre latérale sur la page.

```plaintext
[
	{
		"setting": "blocks",
		"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
	},
	{
		"setting": "show_in_routes",
		"value": "/categories|/latest"
	}
]

```

---

<div class="post-metadata">

### Author: ![Joe\_F](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@Joe\_F](https://meta.discourse.org/u/Joe_F)
#### Post date: [Mars 20, 2025, 11:28 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/134 "2025-03-20T11:28:53Z")

</div>

Salut à tous,

Quelqu’un a-t-il utilisé ce composant et du contenu personnalisé pour créer un bandeau défilant hyperlien pour des images ?

Je voulais avoir une petite section avec un bandeau défilant constant d’images hyperliens vers une page d’événement ou une page d’article.

Merci Joe

---

<div class="post-metadata">

### Author: ![Eric\_Wynn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eric_wynn/32/482591_2.png) [@Eric\_Wynn](https://meta.discourse.org/u/Eric_Wynn)
#### Post date: [Mars 28, 2025, 5:53 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/135 "2025-03-28T17:53:07Z")

</div>

En ce qui concerne les sujets au sein des catégories… Peut-il s’agir de « n’importe quel sujet » ?

Je veux avoir 7 à 8 sujets dans une catégorie. et ensuite je veux en choisir 2 à 3 pour qu’ils soient dans la « barre latérale » droite, est-ce possible ?

---

<div class="post-metadata">

### Author: ![haydenjames](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/haydenjames/32/255678_2.png) [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [Avril 3, 2025, 1:30 UTC](https://meta.discourse.org/t/right-sidebar-blocks/231067/136 "2025-04-03T13:30:42Z")

</div>

Est-il possible d’épingler cette barre latérale pour qu’elle reste visible lors du défilement (similaire à la colonne de navigation/catégorie à gauche) ?

[Page précédente](https://meta.discourse.org/t/right-sidebar-blocks/231067.md?page=5)

[Page suivante](https://meta.discourse.org/t/right-sidebar-blocks/231067.md?page=7)
