Devitácora

Un blog informático

Resaltar la entrada actual en el «Archivo del blog»

Continuando con el Archivo del blog, también deseaba resaltar el enlace de la entrada en tal caso estuviéramos en ella. La parte del widget encargada de maquetar la lista es la siguiente:

<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li>
        <a expr:href='data:post.url'>
          <data:post.title/>
        </a>
      </li>
    </b:loop>
  </ul>
</b:includable>

Bastaba con añadir una clase o emplear un nombre único al vínculo para posteriormente aplicarle los estilos, así que recurrí al operador ternario para colocarlo en el enlace correspondiente, comparando su dirección con la de la página actual:

<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li>
        <a expr:href='data:post.url' expr:class='data:post.url == data:blog.url ? &quot;current-post&quot; : &quot;&quot;'>
          <data:post.title/>
        </a>
      </li>
    </b:loop>
  </ul>
</b:includable>

Lo que restaba por hacer era agregar las instrucciones en el CSS. Un ejemplo sería:

#ArchiveList .current-post {
  color: red !important; /* Lo colorea de rojo */
  text-decoration: none !important; /* Evita que se subraye */
}

search-icon home-icon blog-icon about-icon envelop-icon calendar-icon tag-icon comment-icon share-icon gmail-icon blogger-icon twitter-icon facebook-icon printer-icon link-icon list-icon rss-icon logo-icon