¿Cómo puedo hacer que mi tema Tumblr separe las etiquetas con comas?

11

Al final de cada tipo de publicación en mi tema de Tumblr, tengo este código:

<p class="permalink">
   <a href="{Permalink}">{NoteCountWithLabel}</a>
   {block:HasTags} &nbsp;&nbsp; # filed under:
      {block:Tags}  
         <a href="{TagURL}">{Tag}</a>
      {/block:Tags}
   {/block:HasTags}
</p>

(Sé que la &nbsp;parte no es exactamente un acto de clase. Fue mi solución alternativa de cuatro segundos, y no es el propósito de esta pregunta, ¡así que tengan paciencia conmigo!)

En una publicación con varias etiquetas, eso produce:

Esto es lo que parece

Si solo agrego una coma después {Tag}, haciéndolo <a href="{TagURL}">{Tag},</a>, obtengo:

demasiadas comas

La última etiqueta tiene una coma extraña, y las publicaciones con una sola etiqueta también mostrarían la coma adicional bajo este método.

¿Cómo agrego la cantidad correcta de comas?


Actualización :

La respuesta de Jeremy a continuación hizo lo que quería. Pero, en un intento por ponerme elegante "cumplir con los estándares" (aunque no sé por qué alguien que usa IE8 leería mi tumblr), intenté implementar la sugerencia de w3d. Entonces ahora el CSS se ve así:

a.tag:before {
  content:", ";
}
a.tag:first-child:before {
  content:"";
}

El resultado es ahora:

captura de pantalla actualizada

( Nota: el salto de línea no está relacionado, lo agregué a propósito ) .

Entonces. ¿Qué salió mal?

lancha
fuente
En realidad no se trata de ser "compatible con los estándares", es solo que IE8 solo admitirá este CSS si está en modo compatible con los estándares. Lamentablemente, todos los usuarios de Windows XP estarán limitados a IE8 ya que necesita Vista + para actualizar a IE9.
MrWhite
@ w3d Hm. Célebre. ¡Shoulda lo mantuvo en 'ponerse elegante'! :)
hairboat
Lo siento, siento que estoy arruinando las cosas, ya que obviamente estaba funcionando bien para usted en su navegador. El espacio en blanco adicional después de la etiqueta y antes del ,es probablemente el espacio en blanco que ocurre después del </a>en su marcado / tema. Podrías intentar eliminar esto. ¿La primera coma todavía está presente? ¿Intenta cambiar content:"";a content:"%";solo para ver si se %muestra? (A pesar de que ver en su comentario en mi respuesta que esto puede no tener ningún efecto ?!)
MrWhite
¿En qué navegador está intentando esto?
MrWhite
@ w3d, el% no aparece. Estoy ejecutando Chrome 13.0.782.220 en OS X Lion. Volveremos a la solución de Jeremy por ahora, pero seguiremos modificando. No se preocupe por estropearlo: ¡es un problema divertido para masticar!
hairboat

Respuestas:

4

Tengo otra idea

{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a><span class="tagtail"></span>{/block:Tags}

Esto agregará un lapso con la clase "tagtail" después de cada etiqueta.

Luego, agregue este css:

span.tagtail + a.tag:before {
   content:", ";
}

Esto seleccionará cada ancla de etiqueta que viene después de un lapso de cola de etiqueta (por lo tanto, todos menos el primero). De esta forma, evitamos la necesidad de usar los selectores de primer hijo o último hijo .


ACTUALIZAR:

Si desea asegurarse de que las comas tengan un estilo aparte del delimitador, supongo que también podría hacer lo siguiente:

{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

y luego peinarlo así:

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

Sin embargo, esto podría necesitar ajustes porque los navegadores difieren en las reglas de anulación.

Jeremy
fuente
+1 ... Una pena sobre el margen adicional, ¡pero me gusta! :)
MrWhite
Me encontré arrojando marcas innecesarias adicionales en muchos diseños para que IE coincida con el diseño con CSS que no admite.
Jeremy
Si desea asegurarse de que las comas se labran aparte del ancla, supongo que también podría hacer: {block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}y el estilo entonces como: span.taghead { display:none; } a.tag + span.taghead { display:inline; }. Sin embargo, esto podría necesitar ajustes porque los navegadores difieren en las reglas de anulación.
Jeremy
@ Jeremy, este último bit está funcionando perfectamente . El tagtailmétodo estaba representando un espacio antes de la coma, pero este poco tagheadme está haciendo muy feliz ahora. ¿Considera agregar su comentario nuevamente en la respuesta?
hairboat
¡Hecho y hecho! Me alegra que funcione para ti.
Jeremy
4

Pruebe algunos trucos CSS (para que funcione en IE 8, debe especificar un <! DOCTYPE> en la parte superior del documento).

<p class="permalink">
       <a href="{Permalink}">{NoteCountWithLabel}</a>
       {block:HasTags} &nbsp;&nbsp; # filed under:
          {block:Tags}  
             <a class="tag" href="{TagURL}">{Tag}</a>
          {/block:Tags}
       {/block:HasTags}
</p>

Luego, agregue el siguiente CSS:

a.tag:after {
   content:",";
}

a.tag:last-child:after {
   content:"";
}

Utiliza el pseudo-selector : after y la propiedad de contenido poco utilizada para agregar la coma después del hecho. La segunda regla anula la propiedad de contenido para la última etiqueta en la secuencia.

Jeremy
fuente
Excelente. Gran éxito. Gracias Jeremy!
hairboat
1
@Jeremy: IE8 no es compatible con la pseudoclase last-childincluso en modo compatible con los estándares (es decir, con un DOCTYPE). Deberá utilizarlo first-child:beforepara admitir IE8 (e IE7).
MrWhite
@ w3d: Eso apesta. Tonto IE. No estoy seguro de por qué su primer hijo: antes del selector no funciona correctamente para Abby, pero he agregado otra respuesta con otra idea que agrega tramos y usa el selector +.
Jeremy
3

Siguiendo la respuesta de @ Jeremy ... Para admitir IE8 (e IE7) necesitará usar la first-childpseudo-clase, en lugar de last-child. IE8 no es compatible last-child, incluso en modo compatible con los estándares (es decir, con un DOCTYPE).

a.tag:before {
   content:", ";    /* comma + space */
}

a.tag:first-child:before {
   content:"";
}

EDITAR: Sin embargo, una pequeña advertencia con este enfoque es que probablemente tendrá que eliminar cualquier espacio en blanco adicional que aparezca después del cierre </a>en su marcado / tema.

      {block:Tags}<a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

EDITAR: captura de pantalla de la salida del violín en Safari 5.0 en OS X:

Captura de pantalla de la salida de Fiddle en Safari 5.0 en OS X

Señor White
fuente
Estoy usando a.tag:before { content:", ";}y a.tag:first-child:before { content:"# tagged: ";}, pero resulta en una fila de etiquetas que solo dice , Mareen Fischinger , New York City , Times Square. Hm. Este comentario es confuso. Actualizaré la pregunta.
hairboat
0

Sobre la base de la :beforesugerencia en respuestas anteriores. Si está trabajando con una lista de etiquetas, es muy posible que las coloque en una lista. Si utiliza cada lietiqueta con una etiqueta en :beforelugar de una dentro de la lietiqueta, cada etiqueta será el primer elemento secundario de la lietiqueta, sin embargo, solo una lietiqueta será el primer elemento secundario de la etiqueta ulo ol. Estoy usando una lista de descripción, ya que quería poner "Etiquetas" en la detiqueta t, por lo que lo mismo se aplica a la detiqueta d.

Sin embargo, el uso de una lista de descripción tiene una complejidad adicional. La primera ddetiqueta nunca es el primer hijo de la dletiqueta, es la dtetiqueta, por lo que debe usarla nth-child(2)para orientarla. La desventaja de usar nth-child(2)es que nuevamente no es compatible con IE 8, por lo que el problema vuelve a surgir.

Aquí está mi solución.

{block:HasTags}
<div class="t">
<dl>
<dt>Tags</dt>
{block:Tags}
<dd><a href="{TagURL}" class="tag">{Tag}</a></dd>
{/block:Tags}
</dl>
</div>
{/block:HasTags}

También de las respuestas anteriores sugieren que usar un espacio en content ( content: ", ";) funciona. ¿Funciona? No puedo hacer que funcione, pero "\ 00a0" lo hará.

.t dl {
    margin: 0px;
    list-style-type: none;
}
.t dt {
    margin: 0px 5px 0px 0px;
    float: left;
}
.t dd {
    margin: 0px;
    float: left;
}

.t dd:before {
    padding: 0px 5px 0px 0px;
    content: ",\00a0";
    float: left;
}

.t dd:nth-child(2):before {
    padding: 0px 0px 0px 0px;
    content: "";
    float: left;
}
garrettlynch
fuente