# 在 discovery-list-container-top Outlet 上方渲染一个帖子

**URL:** <https://meta.discourse.org/t/render-a-post-above-the-discovery-list-container-top-outlet/394270>\
**Category:** Development\
**Created:** [2026年一月24日 23:52 UTC](https://meta.discourse.org/t/render-a-post-above-the-discovery-list-container-top-outlet/394270 "2026-01-24T23:52:57Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2026年一月25日 01:05 UTC](https://meta.discourse.org/t/render-a-post-above-the-discovery-list-container-top-outlet/394270/2 "2026-01-25T01:05:58Z")

</div>

我已经调整了它，这似乎有效：

```gjs
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

class FirstPosts extends Component {
  @tracked posts = [];

  constructor() {
    super(...arguments);
    this.loadPosts();
  }

  async loadPosts() {
    let topicIds = [123, 456]; // 更改为您的主题 ID
    let posts = [];
    for (let id of topicIds) {
      const res = await fetch(`/t/${id}.json`);
      const data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{{post.cooked}}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer((api) => {
  api.renderInOutlet("discovery-list-container-top", FirstPosts);
});

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/f/d/bfd58833943a69f287ef67a2a1892607d06c2cff.jpeg)

---

_[View the full topic](https://meta.discourse.org/t/render-a-post-above-the-discovery-list-container-top-outlet/394270)._