分页是完全不可能还是只是很难?

我最近切换到了 Discourse,我的社区对是否喜欢无限滚动意见不一。有些用户喜欢它,有些用户不在乎,有些用户则将其视为对社区的生存威胁。根据我在这里阅读的其他讨论,这似乎是一个常见的争议点。

我知道这个软件的开发者无意提供分页选项。我尊重这一点。此时,我已经编写了一些插件和布局,并查看了 GitHub 核心代码库中的一些代码,因此我对该软件有基本的了解。我只是想知道,如果我的社区继续抵制,编写一个分页插件会有多难?我是否需要重写很多核心的 Ruby 代码?这是否可以放在所有现有代码之上,并无缝运行?数据库结构是否设计得很糟糕,不适合分页查询?

我想从最熟悉代码的人那里了解这项任务的可行性。

2 个赞

开发不是我的强项,但我想如果你能利用它们,已经有一些页面了?

例如:https://meta.discourse.org/t/introducing-discourse-chat-beta/210734/?page=6

2 个赞

我认为您会遇到的主要问题是,由于核心的微小改动就可能导致插件失效,因此您需要不断地维护一个经常出问题的插件。

问题不太可能是技术上的,几乎任何定制都是可能的,更多的是实际的、经济上的考虑。

如果您仍然有兴趣:可以试试看,如果我错了请告诉我!

或者,为什么不选择更简单的路线,使用一个基于页面的论坛呢,有很多这样的论坛?

3 个赞

您的意思是聊天功能的实现使用了页面?抱歉,我不确定我是否明白了。

不,我想我搞砸了。 :slight_smile:
在某些情况下,您可以附加 ?page=2,但我似乎已完全忘记它是如何工作的了。 :slight_smile:

2 个赞

据我所知,该参数仅适用于我们提供给爬虫和旧的、不支持的浏览器的页面。

4 个赞

这些人就像是那些因为无法使用他们的 Commodore 64 而感到沮丧的用户。告诉他们你非常抱歉,并且你正在努力解决问题,但什么也不做。无限滚动至少已经成为行业标准十年了。

或者,你可以尝试让他们说出他们为什么认为他们想要它(也许是为了链接到主题中的特定位置?),并证明你现在可以链接到特定帖子,而不是“看到此页面上的第 6 篇帖子”。但他们仍然会非常不满意,因为它不像十年前那样了。

7 个赞

我认为你的观点很有说服力。最终,这个插件会迫使我们永远不更新,或者成为一项永无止境的任务。

正如 @pfaffman 所暗示的,基于沟通的解决方案可能比技术解决方案更容易。

我有一种感觉,大多数用户会习惯它。只是想在他们不习惯的情况下探索不同的选择。

我仍然愿意听取其他人关于这项任务(不)可行性的更多反馈。

2 个赞

该开发成本将在 1 万美元以上,可能高达 5 万美元。也许你可以向你的社区寻求资金?哦,每年还要给你 5 千美元的维护费……把一个免费的开源项目变成一个昂贵的噩梦。

鉴于你可以直接链接到分类、主题或帖子,我不认为“分页”有什么好处?

5 个赞

我认为“混合”组件可能有些实用。

在主题的每 N 篇帖子中插入一个“分页符”

帖子 1
帖子 2
...
帖子 15

[*第 1 页*] [第 2 页] [第 3 页] [第 4 页]

帖子 16

...

取消无限滚动 Discourse 不是一个实际的练习,但一个制作“混合”分页符(即使主题列表发生变化)的组件可能在 2k-5k 的范围内。

2 个赞

Sam,你的消息让我想起了 https://meta.discourse.org/t/natural-breakpoints-or-chapters-for-long-topics/16461;我非常想看到类似这样的结果。对于那些怀念分页功能的人来说,这可能是一个很好的替代方案。他们之所以经常怀念分页,是因为分页仅仅是断点,仅此而已。

3 个赞

@piffy

@ghassan 正在(或最近)开发一个分页插件:

这似乎是一种链接不同主题的方式,而不是为单个主题添加页面导航。


我在分页方面取得了一些进展。想法是使用 Discourse 内置的 ?page=x 功能在“页面”之间导航,并通过覆盖加载下一批帖子的 post-stream 函数来阻止加载更多消息。

有关更多详细信息(以及未解决的问题),请参见下文:

我在每个主题的顶部和底部添加了分页按钮。我还没有弄清楚的一件事是如何获取主题的总页数,以便知道显示多少个按钮。从后端很容易做到,但我更希望这是一个主题组件而不是插件,这样它的选项就会更有限。

有了这两件事,似乎就可以实现一个基本功能的分页系统了。我相信仍然会存在一些需要完善的奇怪行为,例如已删除的帖子是否计入页面消息,或者控制跳转到最后一页时应显示多少帖子。

我一直在周期性地回顾这个问题。不确定我是否能找到一个干净的解决方案,但我认为一个“hacky”(勉强可用)但基本功能齐全的解决方案是存在的。

3 个赞

要从主题到主题创建导航(并在序列中的每个主题上自动插入后退/上一个和前进/下一个按钮),我正在这样做

我正在重新利用“回复为链接主题”,然后像这样对链接进行 CSS 样式设置…

并在主题设置中添加一些 CSS…

仅用于按钮的极简 CSS
.post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 37px;
    right: 30px;
}

.post-links-container ul li .d-icon {
    display: none;
}

.post-links-container .post-links {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.post-links-container .post-links li:last-of-type {
    margin-bottom: 0;
}

.post-links-container ul li a[href] {
    align-items: center;
    border: 1px solid var(--primary-low-mid);
    background: var(--primary-very-low);
    border-bottom-width: 2px;
    border-radius: 3px;
    box-sizing: border-box;
    color: #009a49;
    display: inline-flex;
    font-family: monospace, monospace;
    font-size: var(--font-down-1);
    justify-content: center;
    line-height: var(--line-height-large);
    margin: 0 0.15em;
    min-width: 24px;
    padding: 0.15em 0.6em;
}

.post-links-container ul li a::after {
    content: " ->>";
    padding-left: 0.15em;
}

kbd {
    align-items: center;
    border: 1px solid var(--primary-low-mid);
    background: var(--primary-very-low);
    border-bottom-width: 2px;
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--primary);
    display: inline-flex;
    font-family: monospace, monospace;
    font-size: var(--font-down-1);
    justify-content: center;
    line-height: var(--line-height-large);
    margin: 0 0.15em;
    min-width: 24px;
    padding: 0.15em 0.6em;
}

kbd a {
    padding: 0;
}

kbd a::before {
    content: "<<-";
    padding-right: 0.15em;
}

说明和我的完整 CSS

/** 书籍或其他主题序列的上一页和下一页按钮 - 此功能是通过**重新利用** **/
/**   作曲家(左上角)中的原生 Discourse 功能“回复为链接主题”选择器来构建的。**/
/** 在您的 Discourse 上进行设置**/
/** 在 /admin/customize/site_texts/js.post.continue_discussion. 中粘贴 `<kbd>`%{postLink}`</kbd>`。**/
/** 然后创建 2 个类别:BOOKS(用于博客风格的主题序列)和 STORIES(用于常规主题风格的主题序列)。**/
/** 安装 https://meta.discourse.org/t/blog-post-styling/110841 主题组件**/
/** 在博客文章样式主题组件设置中,将 BOOKS 类别(而不是 STORIES)指定为博客类别。**/
/** 然后将一个标签创建为:BOOK,并在博客文章样式主题组件设置中将其指定为博客标签。**/
/** 然后别忘了粘贴下面的 CSS!它放在您的主题头部。**/
/** 当然,这里的 CSS 需要进行调整才能在其他主题中正常工作。**/
/** 现在您可以在 STORIES 类别中创建主题序列,这些主题将具有导航按钮,**/
/**   但这些主题将以常规主题样式显示)。**/
/** 如果您可以通过添加 BOOK 标签将博客样式添加到这些 STORIES 类别主题。**/
/** 在 BOOKS 类别中使用“回复为链接主题”撰写的新主题将同时具有导航按钮**/
/**   以及博客样式。**/
/** 在 https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838/16 观看演示**/


.tag-book,
.category-books {
    aside.sidebar,
    .topic-meta-data,
    .tag-book .topic-category .badge-wrapper,
    .category-books .topic-category .badge-wrapper {
    display:none !important;

    }
}

.tag-book .container.posts,
.category-books .container.posts {
    justify-content: unset;
    justify-items: unset;
    padding-left: 0;
    display: block;
}

.tag-book .container.posts .topic-post .row,
.category-books .container.posts .topic-post .row {
    display: block;
    justify-content: center;
}

.tag-book #topic-title .title-wrapper,
.category-books #topic-title .title-wrapper {
    display: block;
    margin: 0 auto;
}

.tag-book #topic-title,
.category-books #topic-title {
    display: block;
    margin: 0 auto;
}

.tag-book #topic-title h1,
.category-books #topic-title h1 {
    font-size: 2em;
    padding-right: 20px;
}

.tag-book #post_1 .topic-body,
.category-books #post_1 .topic-body {
    padding-top: 1em;
    border-top: none;
    max-width: 100%;
}

.tag-book #post_1 .topic-body .contents,
.category-books #post_1 .topic-body .contents {
    border-top: none;
    margin-left: 0;
    padding: 0;
}

.tag-book p,
.category-books p {
    /* 在此处为书籍页面中的主文本添加样式 */
}

/* 将前进按钮定位在页面右上角 */
.tag-book .post-links-container,
.category-books .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 1em;
    right: 30px;
}

/* 将后退按钮定位在页面左上角 */
.category-stories .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 2.5em;
    right: 30px;
}

/* 从前进按钮中删除链接符号 */
.tag-book .post-links-container ul li .d-icon,
.category-books .post-links-container ul li .d-icon,
.category-stories .post-links-container ul li .d-icon {
    display: none;
}

.tag-book .post-links-container .post-links,
.category-books .post-links-container .post-links,
.category-stories .post-links-container .post-links {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.tag-book .post-links-container .post-links li:last-of-type,
.category-books .post-links-container .post-links li:last-of-type,
.category-stories .post-links-container .post-links li:last-of-type {
    margin-bottom: 0;
}

/* 样式化下一个/前进按钮 */
.tag-book .post-links-container ul li a[href],
.category-books .post-links-container ul li a[href],
.category-stories .post-links-container ul li a[href] {
    align-items: center;
    border: 1px solid var(--primary-low-mid);
    background: var(--primary-very-low);
    border-bottom-width: 2px;
    border-radius: 3px;
    box-sizing: border-box;
    color: #009a49;
    display: inline-flex;
    font-family: monospace, monospace;
    font-size: var(--font-down-1);
    justify-content: center;
    line-height: var(--line-height-large);
    margin: 0 0.15em;
    min-width: 24px;
    padding: 0.15em 0.6em;
}

/* 向前进按钮添加指向右侧的箭头 */
.tag-book .post-links-container ul li a::after,
.category-books .post-links-container ul li a::after,
.category-stories .post-links-container ul li a::after {
    content: " ->>";
    padding-left: 0.15em;
}

/* 或者使用图像作为右箭头 */
/*
.tag-book .post-links-container::after,
.category-books .post-links-container::after,
.category-stories .post-links-container::after {
    content: url('../../media/arrow-right.svg');
    display: inline-block;
    width: 12px;
    height: 12px;
}
*/

/* 样式化后退/上一个按钮*/
.tag-book kbd,
.category-books kbd,
.category-stories kbd {
    align-items: center;
    border: 1px solid var(--primary-low-mid);
    background: var(--primary-very-low);
    border-bottom-width: 2px;
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--primary);
    display: inline-flex;
    font-size: var(--font-down-1);
    justify-content: center;
    line-height: var(--line-height-large);
    margin: 0;
    min-width: 24px;
    padding: 0.15em 0.6em;
}

.tag-book kbd a,
.category-books kbd a,
.category-stories kbd a {
    padding: 0;
}

/* 向后退按钮添加箭头 */
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
    content: "<<-";
    padding-right: 0.15em;
}

/* 或者使用图像作为左箭头 */
/*
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
    content: url('../../media/arrow-left.svg');
    display: inline-block;
    width: 12px;
    height: 12px;
}
*/


这是结果…

您可以在此处实时测试…

4 个赞

是的,我认为这是最好的处理方式。如果你能弄清楚他们究竟不喜欢无限滚动的原因,就能帮助将谈话引向更有成效的方向。如果他们缺少某个功能,也许很容易找到替代方案;如果有什么东西不起作用,也许我们可以改进它;但如果他们只是反对改变,那就无能为力了。

4 个赞

我唯一能想到的原因是试图计算更多的页面浏览量,因为广告商可能不认为无限滚动加载与页面浏览量相同。

你有什么进展吗,@piffy

我发现无限滚动太容易上瘾了。我喜欢分页,因为它给了我一个停顿下来问自己是否想继续的机会。它还将长讨论串分解成易于管理的小块,我觉得这对我的大脑来说压力更小,也不那么令人不知所措。

我喜欢的一个推特之后的微博客平台,它决定使用分页而不是无限滚动,对我来说,这是一个非常明确的信号,表明他们正试图采取一种对社会负责、健康的社交媒体方法。

不确定这里是否是发表意见的合适地方。我只是想也许我可以帮助澄清为什么一些用户可能会发现这个功能很重要,因为我还没有真正看到有人提供这种观点。

我在其他地方使用过 Discourse,它是一个很好的平台,我真的很欣赏它的可定制性(例如,可以删除点赞功能,太棒了),但缺少分页功能对我来说很可能是一个交易破坏者。

2 个赞

很棒的广告,但这个Twitter克隆与Discourse没有任何关系,而且它是分页的一个糟糕示例(即页面很长且不稳定)

这并非完全不可能。几年前我做了一个像样的分页插件(抱歉,它不会开源)。如果有人尝试做,也许只是作为一个学习项目,我很乐意看看你的代码,并告诉你该往哪个方向发展。但我不建议将其用于生产网站,尤其是规模较大的网站。

*编辑,再看了一下我以前的插件,我觉得我也不建议将其作为学习项目,除非你真的很有兴趣。这很难。

1 个赞

这不是广告,但如果能减少对我说出的观点的干扰,我很乐意模糊我所谈论的平台。