web-dev-qa-db-fra.com

Comment puis-je obtenir que mon thème Tumblr sépare les tags par des virgules?

À la fin de chaque message dans mon thème Tumblr, j'ai ce code:

<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>

(Je sais que le bit &nbsp; n'est pas vraiment un acte de classe. C'était ma solution de contournement en quatre secondes et ce n'est pas le but de cette question, alors supportez-moi!)

Sur un post avec plusieurs tags, cela donne:

this is what it looks like

Si j'ajoute juste une virgule après {Tag} pour le rendre <a href="{TagURL}">{Tag},</a>, je reçois:

too many commas

La dernière balise a une virgule superflue, et les posts avec une seule balise montreraient également la virgule supplémentaire avec cette méthode.

Comment puis-je ajouter le nombre correct de virgules?

Mise à jour:

La réponse de Jeremy ci-dessous a fait ce que je voulais. Mais, dans une tentative de avoir envie être "conforme aux normes" (bien que je ne sache pas pourquoi ceux qui utilisent IE8 liraient mon tumblr), j'ai tenté de mettre en œuvre la suggestion de w3d. Alors maintenant, le CSS ressemble à:

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

Le résultat est maintenant:

updated screenshot

( n.b .: le saut de ligne n'est pas lié - j'ai ajouté volontairement. )

Alors. Qu'est ce qui ne s'est pas bien passé?

tumblrtumblr-themes
11
hairboat

J'ai une autre idée.

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

Cela ajoutera un span avec la classe "tagtail" après chaque balise.

Ensuite, ajoutez ce css:

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

Cela sélectionnera chaque balise ancre qui suit un tagtail (donc chacun sauf le premier). De cette façon, nous évitons d'avoir à utiliser le premier-enfant ou dernier-enfant sélecteurs.

PDATE:

Si vous voulez vous assurer que les virgules sont bien séparées de l'ancre, vous pouvez également procéder comme suit:

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

puis coiffez-le comme ceci:

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

Toutefois, cela peut nécessiter des ajustements car les navigateurs diffèrent par les règles prioritaires.

4
Jeremy

Essayez quelques astuces CSS (pour le faire fonctionner dans IE 8, vous devez spécifier un <! DOCTYPE> en haut du document).

<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>

Ensuite, ajoutez le CSS suivant:

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

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

Il utilise le pseudo-sélecteur : after et la propriété peu utilisée content pour ajouter la virgule après coup. La deuxième règle remplace la propriété content de la dernière balise de la séquence.

4
Jeremy

Suite de la réponse de @ Jeremy ... Pour prendre en charge IE8 (et IE7), vous devrez utiliser la pseudo-classe first-child plutôt que last-child. IE8 ne supporte pas last-child, même en mode conforme aux normes (c'est-à-dire avec un DOCTYPE).

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

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

EDIT: Cependant, une légère mise en garde avec cette approche est que vous devrez probablement supprimer tout espace blanc supplémentaire apparaissant après la fermeture </a> dans votre balisage/thème.

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

EDIT: Capture d'écran de la sortie de violon dans Safari 5.0 sur OS X:

Screenshot of output of fiddle in Safari 5.0 on OS X

3
MrWhite

S'appuyant sur la suggestion :before dans les réponses précédentes. Si vous travaillez avec une liste de balises, il est fort possible que vous les placiez dans une liste. Si vous utilisez chaque balise li avec :before plutôt que la balise a de la balise li, chaque balise sera le premier enfant de la balise li, mais une seule La balise li sera le premier enfant de la balise ul ou ol! J'utilise une liste de description car je souhaitais mettre des "balises" dans la balise dt. Il en va de même pour la balise dd.

L'utilisation d'une liste de description présente toutefois une complexité supplémentaire. La première balise dd n'est jamais le premier enfant de la balise dl, il s'agit de la balise dt. Vous devez donc utiliser nth-child(2) pour la cibler. L'inconvénient d'utiliser nth-child(2) est que, là encore, il n'est pas conforme à IE 8, de sorte que le problème se reproduit.

Voici ma solution.

{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}

Également dans les réponses précédentes, ils suggèrent que l’utilisation d’un espace dans le contenu (content: ", ";) fonctionne. Est-ce que ça marche? Je ne peux pas le faire fonctionner mais "\ 00a0" le fera.

.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;
}
0
garrettlynch