# Séparer les sujets épinglés

**URL:** <https://meta.discourse.org/t/separating-pinned-topics/322567>\
**Category:** Development\
**Tags:** pinned-topics\
**Created:** [Août 20, 2024, 8:40 UTC](https://meta.discourse.org/t/separating-pinned-topics/322567 "2024-08-20T20:40:03Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [Septembre 1, 2024, 2:31 UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/4 "2024-09-01T14:31:01Z")

</div>

Salut Terise,

J’ai regardé ton code, et tu y es presque !

Voici quelques retours :

- Tu peux le modifier avec un composant de thème (pas un plugin). Je t’encourage à utiliser ce modèle : [GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes](https://github.com/discourse/discourse-theme-skeleton)

- L’utilisation d’un connecteur est correcte. Le bon chemin est `/discourse/connectors/`…  

- Les arguments passés au connecteur peuvent être récupérés avec `outletArgs`. Tu peux voir le connecteur ici :

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136)

Cela signifie que cela devrait être :

```js
export default class PinnedTopicBody extends Component {
  get pinnedTopics() {
    return this.outletArgs.topics.filter((t) => t.get("pinned"));
  }
}

```

et le template :

```hbs
{{#if this.pinnedTopics}}
  <tbody>
    {{#each this.pinnedTopics as |topic|}}
      <TopicListItem
        @topic={{topic}}
        @bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
        @lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
        @selected={{@outletArgs.selected}}
        @hideCategory={{@outletArgs.hideCategory}}
        @showPosters={{true}}
      />
    {{/each}}
    <tr class="table-break">
      <td colspan="10">&nbsp;</td>
    </tr>
  </tbody>
{{/if}}

```

- _Note_ : Malheureusement, `showPosters` n’est pas passé en argument ; tu dois coder sa valeur ici en dur.

- _Note_ : Par défaut, cela ressemblera à ceci :  

Cela génère un wrapper _div_ avec un ID unique et perturbe le CSS. Cependant, il est nécessaire si tu veux lier des actions à l’élément.

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/9/3/e93f6e640e4bf21b0f43b1cacfb19b738bd4a5d0.png)

Tu peux utiliser `tagName` et `classNames` pour personnaliser le wrapper.

```js
import { classNames, tagName } from "@ember-decorators/component";

@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
  ...
}

```

```hbs
{{#if this.pinnedTopics}}
  {{#each this.pinnedTopics as |topic|}}
    ...
  {{/each}}
  <tr class="table-break">
    <td colspan="10">&nbsp;</td>
  </tr>
{{/if}}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/5/7/f5737ec1b7944741f2cfa04a78e60143e7125416.png)

(si tu sais que tu ne feras rien sur l’élément, tu peux garder le `tbody` dans le template et utiliser `tagName("")`).

Ensuite, tu obtiens ceci :

 ![The image shows a computer screen with a web browser displaying a page with two separate search results. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/b/8/d/b8dea7a0bdb6783e51682b0ed3d08249bc85bd64.png)

Je ne l’ai pas examiné en profondeur pour voir s’il y avait une meilleure façon.  
Je voulais juste aider à faire fonctionner ton code ! 😄

---

_[View the full topic](https://meta.discourse.org/t/separating-pinned-topics/322567)._