La pagination est-elle impossible ou juste difficile ?

J’ai récemment adopté Discourse et ma communauté est divisée quant à savoir si elle aime le défilement infini ou non. Certains utilisateurs l’aiment, d’autres s’en moquent, d’autres encore le considèrent comme une menace existentielle pour la communauté. D’après d’autres discussions que j’ai lues ici, il semble que ce soit un point de discorde courant.

Je comprends que les développeurs de ce logiciel n’ont aucune intention de proposer la pagination comme option. Je respecte cela. À ce stade, j’ai écrit quelques plugins et mises en page et j’ai examiné un peu le code dans le cœur de github, j’ai donc une familiarité de base avec le logiciel. Je me demande juste à quel point il serait difficile d’écrire un plugin pour la pagination si ma communauté continue de résister ? Est-il probable que je doive réécrire une grande partie du code ruby de base ? Est-ce quelque chose qui peut être placé par-dessus tout le code existant et qui pourrait fonctionner de manière transparente ? La structure de la base de données est-elle vraiment mal conçue pour des requêtes paginées ?

Je voulais juste avoir une idée de la faisabilité de cette tâche de la part des personnes les plus familières avec le code.

2 « J'aime »

Le développement n’est pas mon point fort, mais je pense qu’il existe déjà des pages si vous pouvez les utiliser ?

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

2 « J'aime »

Je pense que le principal problème serait le fardeau constant d’entretien d’un plugin qui se cassait très régulièrement, car vous devriez remplacer beaucoup de l’interface utilisateur, pour laquelle des changements mineurs dans le cœur pourraient casser.

Le problème ne sera probablement pas technique, presque toutes les personnalisations sont possibles à tout moment, mais plutôt pratique, économique.

Si vous êtes toujours intéressé : essayez et dites-moi si j’ai tort !

Alternativement, pourquoi ne pas prendre la voie plus facile d’utiliser un forum basé sur des pages, il y en a plein ?

3 « J'aime »

Vous voulez dire que l’implémentation du chat utilise des pages ? Désolé, je ne pense pas suivre.

Non, je pense que je l’ai cassé. :slight_smile:
Vous pouvez ajouter ?page=2 dans certaines circonstances, mais il semble que j’ai oublié précisément comment cela fonctionne. :slight_smile:

2 « J'aime »

Autant que je sache, ce paramètre ne fonctionne que pour les pages que nous servons aux robots d’exploration et aux anciens navigateurs non pris en charge.

4 « J'aime »

Ce sont les mêmes utilisateurs qui sont contrariés de ne pas pouvoir utiliser leurs Commodore 64. Dites-leur que vous êtes vraiment désolé et que vous travaillez dur sur le problème, et ne faites rien. Le défilement infini est une norme de l’industrie depuis au moins une décennie.

Ou, vous pourriez essayer de leur faire dire pourquoi ils pensent qu’ils le veulent (pour qu’ils puissent lier à un endroit particulier dans le sujet, peut-être ?) et démontrer que vous pouvez maintenant lier à un message spécifique et non « voir le 6ème message sur cette page ». Mais ils seront toujours très mécontents que ce ne soit pas exactement comme c’était il y a une décennie.

7 « J'aime »

Je pense que votre argument est très solide. En fin de compte, ce plugin nous obligerait soit à ne jamais mettre à jour, soit à être une tâche sans fin.

Comme le suggère @pfaffman, la solution basée sur la communication est probablement plus facile qu’une solution technique.

J’ai le sentiment que la plupart de ces utilisateurs s’y habitueront. Je voulais juste explorer différentes options s’ils ne le font pas.

Je suis toujours ouvert à d’autres commentaires sur la faisabilité (ou non) de cette tâche de la part de quiconque.

2 « J'aime »

Le développement coûterait quelque part au-dessus de 10 000 , potentiellement jusqu'à 50 000 . Peut-être pourriez-vous demander à votre communauté de trouver ces fonds ? Oh, et vous donner 5 000 $ par an pour la maintenance… transformer un projet open-source gratuit en un cauchemar coûteux.

Je ne vois pas l’intérêt de la « pagination » étant donné que vous pouvez lier directement à une catégorie, un sujet ou un message ?

5 « J'aime »

Je pense qu’un composant « hybride » pourrait être quelque peu pratique.

Toutes les N publications dans un sujet, vous insérez un « paginateur ».

Publication 1
Publication 2
...
Publication 15

[*Page 1*] [Page 2] [Page 3] [Page 4]

Publication 16

...

La désactivation du défilement infini de Discourse n’est pas un exercice pratique, mais un composant qui crée un paginateur « hybride » (même avec des changements dans la liste des sujets) se situerait probablement dans la fourchette de 2k à 5k.

2 « J'aime »

Sam, ton message me rappelle Natural breakpoints or "chapters" for long topics? ; je serais très curieux de voir le résultat de quelque chose comme ça. Et cela pourrait être une bonne alternative pour ceux qui regrettent la pagination. Ils semblent souvent regretter la pagination parce que les pages sont des points de rupture et rien de plus.

3 « J'aime »

@piffy

@ghassan développe actuellement (ou a récemment développé) un plugin de pagination :

Cela semble être un moyen de lier des sujets distincts plutôt que d’ajouter une navigation de page à un sujet unique


J’ai fait quelques progrès sur la pagination. L’idée était d’utiliser la fonction ?page=x intégrée à Discourse pour naviguer entre les « pages » et, essentiellement, bloquer le chargement de messages supplémentaires en remplaçant les fonctions de flux de messages qui chargent le lot suivant de messages.

Voir ci-dessous pour plus de détails (et un problème non résolu)

J’ai ajouté des boutons de pagination en haut et en bas de chaque sujet. Une chose que je n’ai pas encore comprise est comment obtenir le nombre total de pages dans un sujet afin de savoir combien de boutons afficher. C’est facile côté serveur, mais je préférerais que ce soit un composant de thème plutôt qu’un plugin, donc les options pour le faire sont plus limitées.

Avec ces deux éléments, cela semble être un système de pagination principalement fonctionnel. Je suis sûr qu’il y aura des comportements étranges qui nécessiteront des ajustements, comme si les messages supprimés comptaient comme un message sur une page ou le contrôle du nombre de messages à afficher lors du saut vers la dernière page.

Je suis revenu périodiquement sur ce problème. Je ne suis pas sûr d’atteindre jamais une solution propre, mais je pense qu’une solution fonctionnelle et principalement fonctionnelle pourrait exister.

3 « J'aime »

Pour créer une navigation de sujet en sujet (et insérer automatiquement des boutons Précédent/Suivant sur chaque sujet de la séquence), je procède comme suit

Je réutilise la fonction « Répondre en tant que sujet lié » et j’applique ensuite un style CSS aux liens comme ceci…

Et j’ajoute du CSS dans les Paramètres du Thème…

CSS MINIMAL UNIQUEMENT POUR LES BOUTONS
.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;
}

INSTRUCTIONS ET CSS COMPLET QUE J'UTILISE

/** Boutons Précédent et Suivant pour les livres ou autres séquences de sujets - cette fonctionnalité est créée en réutilisant **/**
/**   le sélecteur natif de Discourse "Répondre en tant que sujet lié" dans l'éditeur (en haut à gauche). **/**
/** POUR CONFIGURER CECI SUR VOTRE DISCOURSE **/**
/** Collez <kbd>%{postLink}</kbd> dans /admin/customize/site_texts/js.post.continue_discussion. **/**
/** Créez ensuite 2 catégories : LIVRES (pour les séquences de sujets de style blog) et HISTOIRES (pour les séquences de sujets de style normal). **/**
/** Installez le composant de thème https://meta.discourse.org/t/blog-post-styling/110841 **/**
/** Dans les paramètres du composant de thème "Blog Post Styling", attribuez la catégorie LIVRES (mais pas HISTOIRES) comme catégorie de blog. **/**
/** Créez ensuite une balise : LIVRE et attribuez-la comme balise de blog dans les paramètres du composant de thème "Blog Post Styling". **/**
/** N'oubliez pas de coller le CSS ci-dessous ! Il va dans l'en-tête de votre thème. **/**
/** Bien sûr, le CSS ici devra être ajusté pour fonctionner correctement dans d'autres thèmes. **/**
/** Vous pouvez maintenant créer des séquences de sujets dans la catégorie HISTOIRES qui auront les boutons de navigation, **/**
/**   mais ces sujets apparaîtront autrement dans le style de sujet normal). **/**
/** Si vous pouvez ajouter le style de blog à ces sujets de la catégorie HISTOIRES en ajoutant simplement la balise LIVRE. **/**
/** Un nouveau sujet que vous composez dans la CATÉGORIE LIVRES en utilisant "Répondre en tant que sujet lié" aura déjà les boutons de navigation **/**
/**   ainsi que le style de blog. **/**
/** Voir une démo sur 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 {
    /* mettre les styles ici pour le texte principal des pages de livres */
}

/* Positionner le bouton Suivant en haut à droite de la page */
.tag-book .post-links-container,
.category-books .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 1em;
    right: 30px;
}

/* Positionner le bouton Précédent en haut à gauche de la page */
.category-stories .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 2.5em;
    right: 30px;
}

/* Supprimer le symbole de lien du bouton Suivant */
.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;
}

/* Style du bouton Suivant */
.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;
}

/* Ajouter des flèches pointant vers la droite sur le bouton Suivant */
.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;
}

/* Alternativement, utiliser une image pour la flèche droite */
/*
.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;
}
*/

/* Style du bouton Précédent */
.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;
}

/* Ajouter des flèches au bouton Précédent */
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
    content: "<<-";
    padding-right: 0.15em;
}

/* Alternativement, utiliser une image pour la flèche gauche */
/*
.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;
}
*/


Voici le résultat…

Vous pouvez le tester en direct ici…

4 « J'aime »

Oui, je pense que c’est la meilleure façon d’aborder la question. Si vous pouvez découvrir exactement ce qu’ils n’aiment pas dans le défilement infini, cela peut aider à orienter la conversation vers quelque chose de plus productif. S’il y a une fonctionnalité qui leur manque, il est peut-être facile de trouver l’équivalent ; si quelque chose ne fonctionne pas, c’est peut-être quelque chose que nous pouvons améliorer ; mais s’ils sont simplement opposés au changement, il n’y a pas grand-chose à faire.

4 « J'aime »

La seule raison à laquelle je peux penser est d’essayer de compter plus de vues de page, car les annonceurs pourraient ne pas accepter qu’un chargement infini soit la même chose qu’une vue de page.

Avez-vous progressé avec ça @piffy ?

Je trouve que le défilement infini peut créer une trop grande dépendance. J’aime la pagination car elle me donne un moment pour faire une pause et me demander si je veux continuer. Elle divise également les longs fils de discussion en morceaux gérables, ce que je trouve moins stressant et moins accablant pour mon cerveau.

Il existe une plateforme de microblogging post-Twitter que j’aime et qui a décidé d’utiliser la pagination au lieu du défilement infini, et pour moi, ce fut un signal incroyablement clair qu’ils essaient d’adopter une approche pro-sociale et saine des médias sociaux.

Je ne suis pas sûr que ce soit le bon endroit pour intervenir. Je pensais juste que je pourrais aider à clarifier pourquoi certains utilisateurs pourraient trouver cette fonctionnalité importante, car je n’ai pas vraiment vu personne donner cette perspective.

J’ai utilisé Discourse ailleurs, c’est une bonne plateforme, et j’apprécie vraiment à quel point vous pouvez la personnaliser (par exemple, la possibilité de supprimer les J’aime, putain oui), mais le manque de pagination est probablement un facteur décisif pour moi.

2 « J'aime »

Super pub, mais ce clone de Twitter n’a rien à voir avec Discourse et c’est un mauvais exemple de pagination (c’est-à-dire que les pages sont longues et instables)

Ce n’est pas tout à fait impossible. J’ai créé un plugin de pagination approprié il y a quelques années (désolé, il ne sera pas open source). Si quelqu’un tente de le faire, peut-être juste comme projet d’apprentissage, je serais heureux de regarder votre code et de vous dire dans quelle direction aller. Mais je ne le recommanderais pas pour un site de production, surtout s’il est de grande taille.

*edit en regardant un peu plus mon ancien plugin, je ne pense pas que je le recommanderais non plus comme projet d’apprentissage, à moins que vous n’en ayez vraiment envie. C’est difficile.

1 « J'aime »

Ce n’est pas une publicité, mais je peux volontiers masquer la plateforme dont je parlais si cela détourne moins l’attention de la perspective que j’offrais.