使用新的自定义主页功能

开发
28

在第一篇帖子中有一个指向 Github 的链接，其中包含解释该功能的注释。我相信这仍然是一个实验性功能，要尝试它，您需要使用并 安装 Discourse 主题 CLI 控制台应用程序以帮助您构建主题。

1 个赞
30

谢谢你的回复，Manuel。我已经在使用 CLI 了。Git 文档显示了如何添加自定义 HTML，而不是实际组件。我想添加论坛上已安装的搜索横幅。我可以在 home.hbs 中调用它，还是必须创建一个新的 HTML 搜索横幅才能使用？

31

那在主页上显示它怎么样？
image

1 个赞
32

是的，这就是问题所在，我需要将其添加到主页上，我已经添加了一个自定义的，现在我有 2 个了，我将从主题中删除一个，再次感谢，非常感谢。

1 个赞
37

如前所述，当有多个迭代时，它会在后续迭代中起作用，并且仅在第一次应用过滤器时不起作用。因此，当我向 store 添加初始的试运行时，它会起作用：

我不知道如何正确调试这个问题，但这可能有助于缩小问题范围。

3 个赞
38

听起来像是一个需要预热的缓存。

2 个赞
39

这与我们预加载数据的方式有关。我准备了一个包含潜在修复的拉取请求：DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub

将在下周初合并。

5 个赞
40

上面的 PR 现已合并 @manuel，它应该能为您解决此问题。再次感谢您的报告！

2 个赞
41

我注意到今天通过新的推荐方法将组件添加到路由中时，在使用此主题修改器时不起作用。

import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";

export default apiInitializer("1.8.0", (api) => {
  api.renderInOutlet("custom-homepage", welcomeBanner);
});

唯一有效的方法是 javascripts/connectors/custom-homepage/welcome-banner.hbs

4 个赞
42

对我来说似乎可行。您是否已经渲染了另一个组件？我认为之前存在一个问题，即它只能与一个组件一起使用。或者是因为我现在只在稳定版上使用它。

3 个赞
43

我得再测试一下，不确定为什么现在对我不起作用。

2 个赞
45

我一直在大量使用它，以及我的 Homepage Blocks 组件。两个建议：

默认类

我调整了组件，使其始终将 homepage 类添加到 body，并将 active 类添加到具有 href=\"/custom\" 的侧边栏链接。这些功能可能可以作为修饰符的默认设置？

  api.onPageChange(() => {
    const currentRoute = router.currentRoute.name;
    const customHomepageLink = document.querySelector(
      '.sidebar-section-link[href=\"/custom\"]'
    );

    if (currentRoute === "discovery.custom") {
      document.body.classList.add("homepage");
      if (customHomepageLink) {
        customHomepageLink.classList.add("active");
      }
    } else {
      document.body.classList.remove("homepage");
      if (customHomepageLink) {
        customHomepageLink.classList.remove("active");
      }
    }
  });
});

（我最初想默认添加侧边栏链接，但无法在界面上编辑这样的链接对我来说似乎是一个真正的缺点，请参阅 https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629）

快速首次绘制

我不知道如何在技术上实现这一点。但我想知道，如果我们访问一个自定义主页，通常会显示有限的内容选择，我们能否改进主页的 FCP，并在应用程序的其余部分加载时就渲染它？也许我误解了单页应用程序的架构……首先看到加载动画，然后进入一个相当简单的页面，而这个页面本身可以立即显示，这让人感觉有点令人失望。

4 个赞
46

也许……不确定。现在将此类添加到任何组件模板相对容易，您只需使用 bodyClass 助手即可。例如，在另一个主题中，我们这样做：

  <template>
    {{bodyClass "custom-homepage"}}
  ...
  </template>

它实现了与 onPageChange 钩子相同的功能，但更可靠。它只会在组件渲染时将该类添加到 body。

如果组件已拥有所需的所有数据，那么是的，没有理由不能与应用程序的其余部分一起渲染。但在大多数情况下，组件需要发出请求来获取一些额外数据，这会触发加载指示器。说实话，我想不出任何可以加快加载速度的简单方法。

既然我们在这里，我们对这项功能做了一些额外的改进。直到最近，自定义主页的爬虫视图还无法自定义。现在可以通过服务器端 HTML outlet 进行自定义：DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub

5 个赞
48

我以前使用管理员界面修改我的主题，但现在我收到了一个弃用警告，所以我正在查看 custom-homepage 选项。

我已按照 此示例 迁移了我的 <head> 和 css。我的尝试 在此。到目前为止一切顺利。

现在的问题是如何插入搜索栏和“谁在线”组件。
在我以前的 <head> 中，我只是在代码中想要的位置添加了 {{whos-online}} 和 {{search-menu}}，但这在这里不起作用——我找不到正确注入它们的方法。

有人能在这里指点我一下方向，或者知道正确的语法吗？

最终结果应该看起来像 这样（目前已恢复到我以前的、即将被弃用的代码）。

49

{“content”:“[quote="OsaIsacson, post:48, topic:302496"]\n`` 我只是在代码中我想要的地方添加了 {{whos-online}} 和 {{search-menu}}，但这在这里不起作用——我找不到正确注入它们的方法。\n[/quote]\n\n我本地快速查看了一下，遇到了 WhosOnline 组件的问题。但在重启服务器后，它运行正常。我在主页组件中使用的代码是：\n\n\nimport WhosOnline from \"discourse/plugins/discourse-whos-online/discourse/components/whos-online\";\n\n\n...\n\n\u003ctemplate\u003e\n \u003cWhosOnline /\u003e\n\u003c/template\u003e\n\n\n但请记住，SearchMenu 始终存在，因为它在核心代码中，而 \u003cWhosOnline /\u003e 来自一个插件，并且仅在插件启用时才注册。”,“target_locale”:“zh_CN”}

3 个赞
50

That solved the Who’s Online and Search Menu! Awesome. Now I just need to figure out the syntax for getting the feed I’m currently seeing here.

Currently it is being shown by just hiding everything else on the page except the feed, inserting the hero, whos online, search menu and links, and then positioning the feed relative to these by overriding the css. Not great.

I’m close to being able to do a custom homepage layout where I can place all the pieces in their proper places, but am missing how to grab the feed. I’ve tried inspecting the current page with Ember and checked out the discourse app components for how to import it but no success.

Any clues?

这解决了“在线用户”和“搜索菜单”的问题！太棒了。现在我只需要弄清楚如何获取我目前在此处看到的动态信息 here 的语法。

目前，它通过隐藏页面上除动态信息之外的所有内容来显示，插入英雄、在线用户、搜索菜单和链接，然后通过覆盖 CSS 将动态信息相对于这些元素进行定位。效果不佳。

我即将能够创建一个自定义主页布局，在那里我可以将所有元素放置在它们应有的位置，但我不知道如何获取动态信息。我尝试使用 Ember 检查当前页面，并查看了 discourse app components 来了解如何导入它，但没有成功。

有什么线索吗？

51

我将使用类似 精选列表 的组件，在主页上展示一个包含有限数量主题的主题列表。我认为如果你插入核心列表，你会得到一个无限加载的列表。也许这就是你想要的？但为什么要费力添加一个单独的主页，而不是直接在那个主题列表视图上构建你的着陆页呢？

你也可以看看我的组件 主页区块 来安排你的主页布局。你可以通过编辑器添加组件并安排它们的顺序。该组件还添加了一个 homepage 的 body class 和一个额外的 homepage-blocks 包装元素，你可以用它来进行更好的响应式样式设计。例如，你可以在包装器上定义一个网格，并根据宽度调整你的布局，这样你就可以在宽屏上有一个带有侧边栏和主内容的布局，在较窄的视图上有一个所有内容堆叠在一起的单一行布局。现在你的侧边栏项目只是缩小了，这在某些宽度下可能看起来不理想。

这是一个简单的例子，展示了一个根据宽度切换布局的主页网格：https://forum.zolidar.com。

1 个赞