加载更多按钮

:information_source: 摘要 插入一个“加载更多”按钮,需点击该按钮以加载更多主题/帖子/用户/群组/其他内容
:eyeglasses: 预览 https://discourse.theme-creator.io/theme/RGJ/load-more-button
:hammer_and_wrench: 仓库 GitHub - communiteq/discourse-tc-load-more-button · GitHub
:question: 安装指南 如何安装主题或主题组件
:open_book: 刚接触 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

插入一个“加载更多”按钮,确保 Discourse 不被认定为“在无需受保护用户任何手动输入的情况下,在此类信息流或落地页底部显示额外媒体”。

相关背景:Time to reconsider infinite scroll?

主题列表

主题视图

用户目录

详细说明…

10 个赞

哈哈,不错!我也在考虑试试这个——正想着把按钮放在侧边栏或者做成悬浮的。干得漂亮 :clap:

7 个赞


在移动设备上,按钮用(右)拇指很难够到 :slight_smile:

将其居中会更好。

7 个赞

在移动设备上居中:

@use "lib/viewport";

@include viewport.until(md) {

  .load-more-btn.btn.btn-primary {
    display: block;
    margin: 0 auto;   
  }
}
5 个赞

这非常好,谢谢!我确实发现了一个在我 Discourse 站点上明显存在的 bug:

这个站点规模较小,大部分内容在作为学生登录后才会显示。因此,首页只有五条帖子。尽管如此,“加载更多”按钮仍然出现了,而它本不应出现。如果您点击它,它会消失;但如果您向上滚动一点再向下滚动,它又会重新出现。

不过在话题页面上它运行得很好。由于这些页面不对公众可见,这一点还请您信任我的描述。

当然,我明白这是您在业余时间完成的,但我认为还是应该告知您。再次感谢!

6 个赞

该按钮只是暴露了核心代码中的一个 bug:DiscoveryTopics 没有将 canLoadMore 模型属性传递给 LoadMore 组件。不幸的是,这个问题无法在这个主题组件中处理。

谢谢,已合并!

7 个赞

这很有趣,有个问题:这会影响 Core Web Vitals 吗?它有点像分页的折中方案。我喜欢让用户自行加载更多,这样既能减少对 DOM 滚动的依赖,同时我也认为这能略微降低加载延迟。我的理解对吗?

它所做的只是在流程中插入一个按钮。我不明白这如何能降低核心 Web 指标或加载延迟(它并没有预加载任何内容)。此外,它仍然使用 IntersectionObserver 来确定按钮何时以及在哪里出现,因此它仍然依赖于 DOM 滚动。

6 个赞

他们难道不能用一些 CSS 来为未登录用户在落地页隐藏这个按钮吗?针对他们的使用场景?

我能理解这个想法无法直接作为组件的一部分,因为其他网站在没有注册的情况下会显示超过 5 个主题。

针对无限滚动讨论的修复方案,这是一个很棒的组件。

1 个赞

我有一个该组件的分支版本已经实现了这个功能,但如果 mcmcclur 需要的话,这属于边缘情况。正如 RGJ 所说,这个组件确实有些 hacky。

2 个赞

不错。

如果能将类似这样的功能内置到核心中,并针对不同区域(如主题列表、用户列表等)启用,那就太好了。

这个组件让我想起了 DOS 时代使用 type 命令显示文本文件时的那个“|more”功能。

1 个赞