Ayer me mandaron un correo interesante, me preguntaba cómo podía detectar el primer post publicado, pero también en la página del propio post (no nos vale un check isFirstPost
).
La solución no es fácil (me llevó tiempo encontrarla), y reside en usar la variable <data:top.newerPageUrl/>
. Básicamente, si es un post nuevo, no tendrá un post siguiente, así que ahí está la clave:
El código debería de ir en la plantilla (edición HTML y accesorios expandidos), dentro de cualquiera de estos elementos:
<b:includable id='post' var='post'>
(cualquiera de sus ocurrencias, aunque tened en cuenta que algunas sólo se muestran en la plantilla para móbiles).<b:loop values='data:post' var='post'>
Código básico
<b:if cond='data:post.isFirstPost'>
<!-- Si es el primer post de la página -->
<b:if cond='data:top.newerPageUrl'>
<!-- El post tiene un post nuevo, abortar! -->
<b:else/>
<!-- Éste es el último post publicado -->
Último post
</b:if>
</b:if>
Ejemplo de uso básico: mostrar el texto «último post»
Debajo de <b:includable id='post' var='post'>
(o en el sitio donde quieras que aparezca dentro de ese includable):
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:top.newerPageUrl'><b:else/>
<p class='last-post-text'>Último post</p>
</b:if>
</b:if>
Ejemplo de uso avanzado: añadir una clase con CSS al post-outer
El método de uso será similar al utilizado para personalizar las entradas según sus etiquetas. Simplemente sería cambiar:
<div class='post hentry' ...>
Por:
<div class='post hentry<b:if cond='data:post.isFirstPost'><b:if cond='data:top.newerPageUrl'><b:else/> last-post <b:if cond='data:post.pageType == "item"'> last-post-item<b:else/>last-post-homepage</b:if></b:if>
</b:if>'>
Y su correspondiente </div>
(encima de el </b:includable>
) por >/div<
Conseguido! Ahora puedes hacer con tu CSS:
.last-post {
/*Estilos comunes para el primer post aquí*/
}
.last-post-item {
/*Estilos para el último post en su página*/
}
.last-post-homepage {
/*Estilos para el último post en la página principal*/
}