# 在 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:** 1

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [2026年一月24日 23:52 UTC](https://meta.discourse.org/t/render-a-post-above-the-discovery-list-container-top-outlet/394270/1 "2026-01-24T23:52:57Z")

</div>

我对此很陌生，抱歉

我使用 ask discourse 询问了：  
在主题中，我想在 `discovery-list-container-top` 出口的主题列表上方渲染来自上面两个主题的第一篇帖子

它给了我几个版本，在我看来它们应该可以工作。所有版本在预览中都抛出了一个错误。我问 discourse：  
如何将示例代码放在 JS 选项卡而不是文件中？

它给了我这个版本

```plaintext
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]; // change to your topic IDs
    let posts = [];
    for (let id of topicIds) {
      let res = await fetch(`/t/${id}.json`);
      let data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

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

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

```

当我把错误代码粘贴到 ask discourse 时，它给了我这个版本

```plaintext
import { apiInitializer } from "discourse/lib/api";

// Global data store (hacky, but works for the JS tab)
window.firstPostsData = [];

fetch("/t/123.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

fetch("/t/456.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

export default apiInitializer(api => {
  api.renderInOutlet("discovery-list-container-top", 
    <template>
      {{#each (theme-prefix "firstPostsData" window=true) as |post|}}
        <div class="first-post-preview">
          <h4>{{post.topic_title}}</h4>
          {{{post.cooked}}}
        </div>
      {{/each}}
    </template>
  );
});

```

有人能告诉我我做错了什么吗？  
控制台中的错误是：

Compile error: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs:

预览中显示的是这样

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/0/4/004681f1fb968aaed1341e931f094c9f02bc795d.png)

谢谢

---

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