仅在单页注入 HTML

开发
1

我在主题的 JS 选项卡中有类似这样的代码：

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


export default apiInitializer("0.11.1", (api) => { 
    api.renderInOutlet("above-main-container",
        <template>
            <div>
              html stuff
            </div>
        </template>
     );
});

我复制粘贴了这段代码，它确实可以运行（只是一个示例）

如何让它仅在首页或仅在分类页面渲染？

如果这个问题问得不好，请见谅

2

这是一个好问题，不用担心！这样可以实现：

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { apiInitializer } from "discourse/lib/api";
import { defaultHomepage } from "discourse/lib/utilities";

class HomepageOnly extends Component {
  @service router;

  get shouldShow() {
    return this.router.currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.shouldShow}}
      <div>
        html stuff
      </div>
    {{/if}}
  </template>
}

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", HomepageOnly);
});

这会创建一个新的组件，该组件使用 router 服务和 defaultHomepage 工具函数来检查你是否位于首页。然后，该组件会在指定的出口（outlet）中渲染。

这里还有更多相关信息：Add custom content that only appears on your homepage

3

谢谢 Kris，运行完美。也谢谢你提供的链接，我正在努力学习。