Numerar los nuevos comentarios Blogger sin JavaScript. Opción con sub-índices.

Ahora que disfrutamos de los nuevos comentarios -algunos estamos como McGyver en un desguace con ellos- la mayoría de scripts instalados anteriormente para numerarlos han dejado de funcionar, así que creo que es un momento ideal para presentar una alternativa en mi opinión mucho más ventajosa.

Se trata de una interesante propiedad CSS2 llamada content que nos permite insertar casi cualquier tipo de contenido delante o detrás de un elemento cualquiera y que incluye un no menos preciado complemento denominado counter.

La combinación de ambas la leímos hace un tiempo entre otros sitios en Vagabundia y como ya habréis adivinado, con esas dos cosas es con lo que vamos a crear un contador y situarlo en cada comentario.

Como sólo vamos a utilizar CSS, el sistema tendrá una carga mucho más rápida que con JavaScript y además, no tendremos que tocar mas que la parte de estilo de nuestra plantilla; la menos arriesgada si la pifiamos.

La cuestión es encontrar una clase a partir de la cual poner el contador a cero sin problemas y otra por la que cada vez que pasemos se vaya imprimiendo e incrementando ese valor sin saltos ni duplicidades.

Pero una vez desgranado el nuevo estilo de los comentarios anidados esto se hace más fácil.


Si queréis probar ya y ver cómo funciona esto sobre la marcha, sólo tenéis que insertar en la parte CSS de la plantilla (antes de ]]></b:skin>) lo siguiente:

.comments-content {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

Lo que hace esto casi que se puede leer:

1. Cuando se inicia el bloque general de comentarios (.comments-content) un contador que hemos llamado contarcomentarios se activa y se pone con un valor inicial de 1.
2. Luego, cada vez que el flujo del código pasa por un comentario de cualquier nivel, bien sea un comentario principal o una respuesta (.comment-thread li), content nos meterá delante (:before) del cuerpo del comentario, el número por el que va el contador en ese momento.
3. A continuación se incrementa en una unidad el contador (counter-increment).

La siguiente vez que el código lea otro comentario o lo que es lo mismo, pase de nuevo por un .comment-thread li, se repetirán los pasos 2 y 3, pero cada vez con un mayor valor.

El resto del estilo (float/font-size/color) sirve sólo para dar estilo al numerito que se mostrará. Si por causa de otras modificaciones en vuestros comentarios el número no quedara en el lugar exacto dónde deseáis, siempre podéis añadir en ese mismo sitio márgenes para reubicarlo.


Cuando probéis esto -si la impaciencia no os ha podido ya- observaréis que se numeran todos los comentarios y respuestas sucesivamente, sin distinción de si son de los primeros o de las segundas.

Esto para mí y seguramente para otros que con frecuencia usen esos números como referencia a algún comentario concreto, puede ser un inconveniente. Pensad que cuando se introduzca una reply, todos los comentarios y respuestas que haya más abajo se renumerarán.

Para solucionar esto nos complicamos un poco más la vida y reestructuramos el anterior código para hacer una numeración distinta como si fueran capítulos y secciones. Para eso tenemos que echar mano de otras clases distintas para distinguir cuándo contamos comentarios (contarcomentarios) y cuando respuestas (contarbis)

.comment-thread ol {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

.comment-thread ol ol {
counter-reset: contarbis;
}

.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #666666;
}

Si preferís otra presentación para la numeración, podéis cambiar el decimal y/o el lower-latin. Los valores posibles son:

• decimal: Números decimales, comenzando de 1.
• decimal-leading-zero: Números decimales completados con ceros iniciales (01, 02, 03, ..., 98, 99).
• lower-latin: Letras en minúsculas (a, b, c, etc.)
• upper-latin: Letras en mayúsculas (A, B, C, etc.)
• lower-roman: Números romanos en minúsculas (i, ii, iii, etc.)
• upper-roman: Números romanos en mayúsculas (I, II, III, etc.)

La única diferencia con repecto a los sistemas con JavaScript es que perdemos el enlace permanente al comentario, que por cierto no he visto en las fechas del nuevo sistema y que sí estaban en las del anterior. Pero eso es algo que aunque podríamos arreglar nosotros haciendo unas pequeñas modificaciones, esperaré a que arregle Blogger para no interferir en las actualizaciones que posiblemente quedan por venir. En cualquier caso las ventajas de este método de numeración creo que superan a los inconvenientes.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter