Paginación numérica avanzada para Blogger

Mejora la navegación de tu blog con una paginación numérica basada en los botones nativos de Blogger, que funciona con cualquier cantidad de entradas.

Como instalar paginación numérica para Blogger

Calificar Repositorio

Por mucho tiempo, Blogger ha tenido una limitación en su sistema de paginación, y es que solo permite navegar entre las páginas del blog mediante los botones "Entradas antiguas" y "Entradas más recientes".

En internet existen varios tutoriales para agregar paginación numérica, pero la mayoría de estos proyectos están desactualizados, abandonados o simplemente ya no funcionan. Además, hasta ahora, ninguna solución ha logrado implementar la paginación en las búsquedas.

Por esta razón, decidí desarrollar un sistema de paginación numérica que funcione correctamente en Blogger, sea fácil de instalar y aproveche al máximo la paginación nativa de la plataforma, y que también funcione en las búsquedas.

Características

He desarrollado un sistema de paginación numérica que se integra perfectamente con Blogger. Además, incluye características únicas que lo diferencian de cualquier otra opción disponible hasta ahora:

Puedes ir al principio y al final de la paginación.
La primera paginación numérica para Blogger que funciona en búsquedas.
Funciona con los botones nativos de la paginación básica de Blogger.
Almacena los datos procesados localmente para mejorar el rendimiento.
Solo se actualiza si el blog ha cambiado (se puede desactivar).
Los enlaces de la paginación son paginas reales, no enlaces para javascript.
Funciona con cualquier cantidad de entradas por página.
Puedes desplazarte por segmentos (se puede desactivar).

Instalar

Para instalar la paginación numérica en tu blog de Blogger, edita el codigo HTML de tu plantilla y busca la etiqueta </head>, justo antes de esta etiqueta añade el siguiente código:

<script src="https://cdn.jsdelivr.net/npm/blogger-numeric-pager@1/dist/main.min.js" defer></script>

Si estás utilizando un entorno de desarrollo (como por ejemplo Hamlet), puedes instalarlo como una dependencia npm:

npm install blogger-numeric-pager

Modo de uso

Si estas usando el script desde una CDN, puedes inicializarlo usando la variable global BloggerPager. Para ello, añade el siguiente código arriba de la etiqueta </body>:

<script>//<![CDATA[
  const pager = new BloggerPager()
  pager.init()
//]]></script>

Si estas usando el script como una dependencia npm, puedes importarlo y usarlo de la siguiente manera:

import BloggerPager from 'blogger-numeric-pager'

const pager = new BloggerPager()
pager.init()

Por último, en la plantilla de tu Blogger, necesitarás una estructura HTML para mostrar la paginación. Te recomiendo usar la que Blogger proporciona por defecto: agrega la ID blog-pager al contenedor principal y, dentro de él, crea un contenedor con la ID pager-numbers, donde se mostrarán las páginas:

<div id="blog-pager">
  <div id="pager-numbers"></div>
</div>

La paginación se gestiona con los botones nativos de Blogger. Además, los números de la paginación son enlaces directos a las páginas reales de tu blog.

Opciones

Puedes personalizar el comportamiento de la paginación numérica mediante un objeto de configuración. Las opciones disponibles son las siguientes:

Opción	Tipo	Descripción	Valor por defecto
`pagerSelector`	string	Selector css del contenedor de la paginación	`#blog-pager`
`numberSelector`	string	Selector css del contenedor de los números	`#pager-numbers`
`numberClass`	string	Clase CSS para los números de la paginación	`pager-item`
`dotsClass`	string	Clase CSS para los puntos (elipsis)	`pager-dots`
`activeClass`	string	Clase CSS para los números activos	`is-active`
`totalVisibleNumbers`	number	Cantidad de números visibles	`6`
`checkForUpdates`	boolean	Activa la comprobación de cambios en el blog	`true`
`enableDotsJump`	boolean	Activa el salto entre segmentos con los puntos	`true`

Al especificar las opciones cambia el funcionamiento de la paginación. Por ejemplo:

const pager = new BloggerPager({
  totalVisibleNumbers: 4,
  checkForUpdates: false,
  enableDotsJump: false
})

pager.init()

Métodos

Método	Descripción	Retorno
`init()`	Inicia la paginación	Promise

Dado a que el método init() devuelve una promesa, si deseas ejecutar código JavaScript después de que se haya inicializado la paginación, puedes hacerlo de esta forma:

const pager = new BloggerPager()
pager.init().then(() => {
  // Se ejecuta después de que la paginación se haya inicializado
})

Conclusion

La paginación numérica representa un gran avance para mejorar la experiencia de usuario en tu blog de Blogger. Mi objetivo es mantener este proyecto actualizado y seguir mejorándolo a medida que Blogger evolucione. Si tienes preguntas, sugerencias o encuentras algún problema, no dudes en dejar un comentario.