ページネーションは不可能?それとも難しいだけ?

最近Discourseに切り替えたのですが、コミュニティの間で無限スクロールを好むかどうか意見が割れています。好むユーザーもいれば、気にしないユーザーもいます。コミュニティにとっての存亡の危機のように扱うユーザーもいます。ここで読んだ他の議論から、これは一般的な論争の的となっているようです。

このソフトウェアの開発者には、ページネーションをオプションとして提供する意図がないことは理解しています。それは尊重できます。現時点で、いくつかのプラグインとレイアウトを作成し、GitHubのコアコードを少し調べたので、ソフトウェアには基本的な知識があります。コミュニティが抵抗し続けた場合、ページネーションのプラグインを作成するのはどれくらい難しいかを知りたいだけです。基本的なコアRubyコードの多くを書き直す必要がありそうですか?既存のコードの上にシームレスに実行できるものを配置することは可能ですか?データベース構造は、ページネーションの方法でクエリを実行するには設計が悪すぎますか?

コードに最も詳しい人たちから、このタスクを実行する実現可能性についての感覚を得たいだけでした。

「いいね!」 2

開発は得意ではありませんが、もし活用できるのであれば、すでにページが存在するのではないでしょうか?

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

「いいね!」 2

主な問題は、UIのわずかな変更でも壊れる可能性のあるプラグインを維持し続けるという絶え間ない負担になると思います。

問題は技術的なものではなく、ほとんどの場合、カスタム化は可能ですが、実際的、経済的な問題になるでしょう。

それでも熱心であれば、試してみて、私が間違っているかどうか教えてください!

あるいは、ページベースのフォーラムを使用するという簡単な方法はいかがですか?たくさんありますよ。

「いいね!」 3

チャットの実装がページを使用しているということですか?すみません、よく理解できません。

いいえ、私が台無しにしてしまったようです。:slight_smile:

特定の状況下では ?page=2 を追加できますが、それがどのように機能するのか正確には思い出せません。:slight_smile:

「いいね!」 2

AFAIK、そのパラメータはクローラーや古い、サポートされていないブラウザに提供するページでのみ機能します。

「いいね!」 4

これは、Commodore 64が使えないことに腹を立てているのと同じユーザーです。彼らに、大変申し訳なく、問題に懸命に取り組んでいると伝え、何もせずにいてください。無限スクロールは少なくとも10年前から業界標準です。

あるいは、なぜそれが欲しいのか(おそらくトピック内の特定の場所へのリンクを貼りたいからでしょうか?)を言わせるように仕向け、特定の投稿にリンクできることを示し、「このページの6番目の投稿を見る」ではなく、それを行うことができると証明してみてください。しかし、彼らは10年前とまったく同じではないことに、それでも非常に不満を感じるでしょう。

「いいね!」 7

ここのあなたの主張は非常に強力だと思います。結局のところ、このプラグインは、更新をまったく行わないか、終わりのないタスクを強いることになります。

@pfaffman が示唆するように、コミュニケーションベースのソリューションは、技術的なソリューションよりもおそらく簡単です。

これらのユーザーのほとんどは、それに慣れるだろうという気がします。彼らが慣れない場合に、さまざまな選択肢を探ってみたかっただけです。

このタスクがどれほど(非)実現可能かについて、他の誰かからのフィードバックをまだ受け付けています。

「いいね!」 2

開発には1万ドル以上、場合によっては5万ドルかかるでしょう。コミュニティに資金調達を依頼してみてはいかがでしょうか? ああ、そしてメンテナンスのために年間5千ドルをあなたに渡す…無料のオープンソースプロジェクトをコストのかかる悪夢に変えるのです。

カテゴリ、トピック、または投稿に直接リンクできることを考えると、「ページング」の利点はあまり見られませんが?

「いいね!」 5

「ハイブリッド」コンポーネントはかなり実用的だと思います。

トピック内のN投稿ごとに「ページネーター」を挿入します。

投稿1
投稿2
...
投稿15

[*ページ1*] [ページ2] [ページ3] [ページ4]

投稿16

...

無限スクロールではないDiscourseは実用的な演習ではありませんが、「ハイブリッド」ページネーター(トピックリストの変更があっても)を作成するコンポーネントは、おそらく2k〜5kの範囲でしょう。

「いいね!」 2

サム、あなたのメッセージは、Natural breakpoints or "chapters" for long topics? を思い出させます。このようなものの結果を見るのは非常に興味深いです。そして、ページネーションを逃した人たちにとって、良い代替案になるかもしれません。彼らは、ページが単なる区切りであるため、ページネーションを見逃しているように見えます。

「いいね!」 3

@piffy

@ghassan は現在(または最近)、ページネーションプラグインを開発中です。

これは、単一のトピックにページナビゲーションを追加するのではなく、別々のトピックをリンクする方法のようです。


ページネーションについては少し進展がありました。アイデアは、Discourse に組み込まれている ?page=x 関数を使用して「ページ」間を移動し、次の投稿のバッチを読み込む post-stream 関数をオーバーライドすることで、それ以上のメッセージの読み込みを基本的にブロックすることでした。

詳細(および未解決の問題)については以下を参照してください。

各トピックの先頭と末尾にページネーションボタンを追加しました。まだ解決していないことの 1 つは、トピック内の総ページ数を取得して、表示するボタンの数を知ることです。バックエンドからは簡単ですが、プラグインではなくテーマコンポーネントにしたいので、その方法の選択肢はより限られています。

これら 2 つのことで、ほぼ機能的なページネーションシステムになるようです。削除された投稿がページのメッセージとしてカウントされるかどうか、または最後のページにジャンプするときに表示される投稿数を制御するなど、まだ調整が必要な奇妙な動作がいくつかあることは確かです。

この問題には定期的に戻ってきています。クリーンな解決策に到達できるかどうかはわかりませんが、ハッキーでほぼ機能的な解決策は存在すると思います。

「いいね!」 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 {
    /* Bookのメインテキストのスタイルをここに記述 */
}

/* Forwardボタンをページの上部右側に配置 */
.tag-book .post-links-container,
.category-books .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 1em;
    right: 30px;
}

/* Backボタンをページの上部左側に配置 */
.category-stories .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 2.5em;
    right: 30px;
}

/* Forwardボタンのリンク記号を削除 */
.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;
}

/* Next/Forwardボタンのスタイル */
.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;
}

/* Forwardボタンに右向きの矢印を追加 */
.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;
}
*/

/* Back/Previousボタンのスタイル */
.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;
}

/* Backボタンに矢印を追加 */
.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、何か進展はありましたか?

無限スクロールは中毒性が高すぎると感じます。ページネーションは、立ち止まって「続けたいか?」と自問自答する時間を与えてくれるので好きです。また、長いディスカッショントピックを管理しやすいチャンクに分割してくれるので、私の脳にとってはストレスや圧倒感が少なく感じられます。

私が好きなTwitterに代わるマイクロブログプラットフォームで、無限スクロールではなくページネーションを採用するという決定をしたところがあり、私にとっては、ソーシャルメディアに対してプロソーシャルで健康的なアプローチを取ろうとしている非常に明確なシグナルでした。

ここに割り込むのが正しい場所だったか分かりませんが、この機能が一部のユーザーにとってなぜ重要なのか、混乱を解消するのに役立つかもしれないと思っただけです。そのような視点を提供している人をあまり見かけなかったので。

Discourseは他の場所でも使ったことがあり、素晴らしいプラットフォームだと思いますし、カスタマイズ性の高さ(例えば、いいね!を削除できること、最高ですね)を高く評価していますが、ページネーションがないことは私にとって決定的な要因となるでしょう。

「いいね!」 2

素晴らしい広告ですが、このTwitterクローンはDiscourseとは全く関係がなく、ページネーションの悪い例です(つまり、ページが長く不安定です)。

完全に不可能なわけではありません。数年前にちゃんとしたページネーションプラグインを作成しました(申し訳ありませんが、オープンソースにはしません)。もし誰かが試しているなら、学習プロジェクトとしてであれば、あなたのコードを見て、どのような方向性で進むべきかアドバイスできます。しかし、本番サイト、特に規模の大きいサイトにはお勧めしません。

*編集:古いプラグインをもう少し見直したところ、学習プロジェクトとしてもお勧めできないと思います。本当に熱心でない限り。難しいです。

「いいね!」 1

広告ではありませんが、私が提供していた視点から注意をそらさないのであれば、どのプラットフォームについて話していたのか喜んで伏せます。