仅在单页注入 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，运行完美。也谢谢你提供的链接，我正在努力学习。

4

我有一个后续问题想请教大家

我注入的一小段 HTML 代码在我的主页上生成了一个漂亮的横幅，加载和运行都正常。我将以下内容放入了主题的 <head> 标签中：

document.addEventListener('DOMContentLoaded', loadMyWidget);

虽然它能正常工作，但当我导航到其他页面再返回主页时，我的小部件不会重新加载。我尝试添加了：

window.addEventListener('focus', loadMyWidget);

但这并没有解决问题。有没有人能帮帮我？我应该开一个新话题来问这个问题吗？

编辑：

我想我找到解决办法了

我在 export default apiInitializer((api) => { 中添加了这段代码：

api.onPageChange(() => {
  const myWidget = document.querySelector("#widget-container");
  if (myWidget) {
    window.loadMyWidget();
  }
 });

这样在返回主页时，我的小部件就会重新加载。