¿Es imposible la paginación o simplemente difícil?

Recientemente hice el cambio a Discourse y mi comunidad está dividida sobre si le gusta o no el scroll infinito. A algunos usuarios les gusta, a otros no les importa, a algunos les parece una amenaza existencial para la comunidad. Basándome en otras discusiones que leí aquí, parece que es un punto de conflicto común.

Entiendo que los desarrolladores de este software no tienen intención de ofrecer paginación como opción. Puedo respetar eso. En este punto, he escrito algunos plugins y diseños y he revisado un poco el código en el core de github, así que tengo una familiaridad básica con el software. Solo me pregunto qué tan difícil sería escribir un plugin para paginación si mi comunidad continúa resistiéndose. ¿Es probable que tenga que reescribir gran parte del código ruby básico del core? ¿Es algo que se puede colocar encima de todo el código existente que podría funcionar sin problemas? ¿Está la estructura de la base de datos realmente mal diseñada para consultar de forma paginada?

Solo quería tener una idea de la viabilidad de emprender esta tarea por parte de las personas que están más familiarizadas con el código.

2 Me gusta

El desarrollo no es mi fuerte, pero creo que ya hay páginas si puedes aprovecharlas.

Por ejemplo: Introducing Discourse Chat (BETA)

2 Me gusta

Creo que el principal problema que tendrías sería la carga constante de mantener un plugin que se rompía con mucha frecuencia, ya que tendrías que anular mucho de la interfaz de usuario para la que cambios menores en el núcleo podrían romperlo.

El problema probablemente no sea técnico, casi cualquier personalización es posible en cualquier momento, sino más bien práctico, económico.

Si todavía estás interesado: ¡pruébalo y hazme saber si me equivoco!

Alternativamente, ¿por qué no tomar la ruta más fácil de usar un foro basado en páginas, hay muchos?

3 Me gusta

¿Te refieres a que la implementación del chat utiliza páginas? Lo siento, creo que no te sigo.

No, creo que lo estropeé. :slight_smile:
Puedes añadir ?page=2 bajo ciertas circunstancias, pero parece que he olvidado exactamente cómo funciona. :slight_smile:

2 Me gusta

AFAIK ese parámetro solo funciona para las páginas que servimos a los rastreadores y a los navegadores antiguos no compatibles.

4 Me gusta

Estos son los mismos usuarios a los que les molesta no poder usar sus Commodore 64. Diles que lo sientes mucho y que estás trabajando duro en el problema y no hagas nada. El desplazamiento infinito ha sido el estándar de la industria durante al menos una década.

O podrías intentar que digan por qué creen que lo quieren (¿para poder enlazar a un lugar en particular en el tema, quizás?) y demostrar que ahora puedes enlazar a una publicación específica y no “ver la sexta publicación en esta página”. Pero aún así estarán muy descontentos de que no sea exactamente como era hace una década.

7 Me gusta

Creo que tu punto aquí es muy fuerte. En última instancia, este plugin nos obligaría a no actualizar nunca o sería una tarea que nunca termina.

Como implica @pfaffman, la solución basada en la comunicación es probablemente más fácil que una técnica.

Tengo la sensación de que la mayoría de estos usuarios se acostumbrarán. Solo quería explorar diferentes opciones si no lo hacen.

Todavía estoy abierto a más comentarios sobre cuán factible (o no) sería esta tarea para cualquier otra persona.

2 Me gusta

El desarrollo costaría algo más de 10.000 dólares, posiblemente hasta 50.000 dólares. ¿Quizás podrías pedirle a tu comunidad que encuentre esos fondos? Oh, y darte 5.000 dólares al año para mantenimiento… convirtiendo un proyecto gratuito de código abierto en una pesadilla costosa.

No veo el beneficio de “paginar” mucho dado que puedes enlazar directamente a una categoría, tema o publicación.

5 Me gusta

Creo que un componente “híbrido” podría ser algo práctico.

Cada N publicaciones en un tema insertas un “paginador”

Publicación 1
Publicación 2
...
Publicación 15

[*Página 1*] [Página 2] [Página 3] [Página 4]

Publicación 16

...

Eliminar el desplazamiento infinito de Discourse no es un ejercicio práctico, pero un componente que cree un paginador “híbrido” (incluso con cambios en la lista de temas) probablemente esté en el rango de 2k-5k.

2 Me gusta

Sam, tu mensaje me recuerda a Natural breakpoints or "chapters" for long topics?; tendría mucha curiosidad por ver el resultado de algo así. Y podría ser una buena alternativa para aquellos que echan de menos la paginación. A menudo parecen echar de menos la paginación porque las páginas son puntos de interrupción y nada más.

3 Me gusta

@piffy

@ghassan está desarrollando actualmente (o recientemente) un plugin de paginación:

Esto parece ser una forma de vincular temas separados en lugar de agregar navegación de página a un solo tema.


Avancé un poco en la paginación. La idea era usar la función ?page=x incorporada en Discourse para navegar entre “páginas” y básicamente bloquear la carga de más mensajes al anular las funciones de flujo de publicaciones que cargan el siguiente lote de publicaciones.

Ver más abajo para más detalles (y problemas no resueltos)

Agregué botones de paginación en la parte superior e inferior de cada tema. Una cosa que aún no he resuelto es cómo obtener el número total de páginas en un tema para saber cuántos botones mostrar. Es fácil desde el backend, pero preferiría que esto fuera un componente temático en lugar de un plugin, por lo que las opciones de cómo hacerlo son más limitadas.

Con estas dos cosas, parece que sería un sistema de paginación mayormente funcional. Estoy seguro de que habrá algunos comportamientos extraños que necesitarán pulirse, como si las publicaciones eliminadas cuentan como un mensaje en una página o el control de cuántas publicaciones se deben mostrar al saltar a la última página.

He vuelto a este problema periódicamente. No estoy seguro de si alguna vez llegaré a una solución limpia, pero creo que podría existir una solución funcional en su mayoría y un poco improvisada.

3 Me gusta

Para crear navegación de un tema a otro (e insertar automáticamente botones de Atrás/Anterior y Adelante/Siguiente en cada tema de la secuencia), lo estoy haciendo de esta manera

Estoy reutilizando la opción “Responder como tema enlazado” y luego aplicando estilo CSS a los enlaces de la siguiente manera…

Y añadiendo algo de CSS en la Configuración del Tema…

CSS MÍNIMO SOLO PARA LOS BOTONES
.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;
}

INSTRUCCIONES Y EL CSS COMPLETO QUE ESTOY USANDO

/** Botones Anterior y Siguiente para Libros u otras Secuencias de Temas - esta función se crea reutilizando **/\
/**   el selector nativo de Discourse "Responder como Tema Enlazado" en el compositor (arriba a la izquierda). **/\
/** PARA CONFIGURAR ESTO EN TU DISCOURSE **/\
/** Pega <kbd>%{postLink}</kbd> en /admin/customize/site_texts/js.post.continue_discussion. **/\
/** Luego crea 2 categorías: LIBROS (para secuencias de temas estilo Blog) y HISTORIAS (para secuencias de temas estilo Tema Regular). **/\
/** Instala el componente de tema https://meta.discourse.org/t/blog-post-styling/110841 **/\
/** En la Configuración del Componente de Tema de Estilo de Publicaciones de Blog, asigna la Categoría LIBROS (pero no HISTORIAS) como Categoría de Blog. **/\
/** Luego crea una etiqueta: LIBRO y asígnala como Etiqueta de Blog en la Configuración del Componente de Tema de Estilo de Publicaciones de Blog. **/\
/** Luego no olvides pegar el siguiente CSS. Va en la Cabecera de tu Tema. **/\
/** Por supuesto, el CSS aquí necesitará ajustes para funcionar correctamente en otros temas. **/\
/** Ahora puedes crear secuencias de Temas en la Categoría HISTORIAS que tendrán los botones de navegación, **/\
/**   pero esos Temas aparecerán de lo contrario en el Estilo de Tema Regular). **/\
/** Si puedes añadir el Estilo de Blog a estos Temas de la Categoría HISTORIAS simplemente añadiendo la etiqueta LIBRO. **/\
/** Un nuevo Tema que compongas en la CATEGORÍA LIBROS usando "Responder como Tema Enlazado" ya tendrá tanto los botones de navegación **/\
/**   como el Estilo de Blog. **/\
/** Ve una demostración en 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 {
    /* pon estilos aquí para el texto principal en las páginas del Libro */
}

/* Posiciona el botón Adelante en la parte superior derecha de la página */
.tag-book .post-links-container,
.category-books .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 1em;
    right: 30px;
}

/* Posiciona el botón Atrás en la parte superior izquierda de la página */
.category-stories .post-links-container {
    margin-left: var(--topic-body-width-padding);
    position: absolute;
    top: 2.5em;
    right: 30px;
}

/* Elimina el símbolo de enlace del botón Adelante */
.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;
}

/* Estilo del botón Siguiente/Adelante */
.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;
}

/* Añade flechas apuntando a la derecha al botón Adelante */
.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;
}

/* Alternativamente, usa una imagen para la flecha derecha */
/*
.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;
}
*/

/* Estilo del botón Atrás/Anterior*/
.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;
}

/* Añade flechas al botón Atrás */
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
    content: "<<-";
    padding-right: 0.15em;
}

/* Alternativamente, usa una imagen para la flecha izquierda */
/*
.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;
}
*/


Aquí está el resultado…

Puedes probarlo en vivo aquí…

4 Me gusta

Sí, creo que esta es la mejor manera de abordarlo. Si puedes averiguar exactamente qué no les gusta del scroll infinito, puede ayudar a dirigir la conversación hacia algo más productivo. Si hay alguna funcionalidad que les falte, quizás sea fácil encontrar el equivalente; si hay algo que no funciona bien, tal vez sea algo que podamos mejorar; pero si simplemente se oponen al cambio, no hay mucho que hacer.

4 Me gusta

La única razón que se me ocurre es intentar contar más visitas a la página, ya que los anunciantes podrían no estar de acuerdo en que una carga de desplazamiento infinito sea lo mismo que una visita a la página.

¿Llegaste a algo con eso @piffy?

Encuentro que el scroll infinito puede ser demasiado adictivo. Me gusta la paginación porque me da un momento para hacer una pausa y preguntarme si quiero continuar. También divide los hilos de discusión largos en fragmentos manejables, lo que me resulta menos estresante y abrumador para mi cerebro.

Hay una plataforma de microblogging posterior a Twitter que me gusta y que tomó la decisión de usar paginación en lugar de scroll infinito, y para mí, esa fue una señal increíblemente clara de que están tratando de adoptar un enfoque prosocial y saludable en las redes sociales.

No estoy seguro de si este era el lugar adecuado para intervenir. Simplemente pensé que tal vez podría ayudar a aclarar la confusión sobre por qué algunos usuarios podrían encontrar importante esta función, ya que realmente no he visto a nadie que ofrezca esa perspectiva.

He usado Discourse en otros lugares, es una buena plataforma, y realmente aprecio cuánto se puede personalizar (por ejemplo, la capacidad de eliminar los “Me gusta”, ¡claro que sí!), pero la falta de paginación probablemente sea un factor decisivo para mí.

2 Me gusta

Gran anuncio, pero este clon de Twitter no tiene nada que ver con Discourse y es un mal ejemplo de paginación (es decir, las páginas son largas e inestables).

No es del todo imposible. Hice un plugin de paginación adecuado hace unos años (lo siento, no será de código abierto). Si alguien lo está intentando, quizás solo como un proyecto de aprendizaje, estaré encantado de revisar su código y decirle en qué dirección ir. Pero no lo recomendaría para un sitio de producción, especialmente uno de cualquier tamaño.

*edición mirando mi antiguo plugin un poco más, tampoco creo que lo recomendaría como proyecto de aprendizaje, a menos que estés realmente interesado. Es difícil.

1 me gusta

No es un anuncio, pero con gusto ocultaré de qué plataforma estaba hablando si eso distrae menos de la perspectiva que estaba ofreciendo.