Comment puis-je obtenir mon thème Tumblr pour séparer les balises avec des virgules?

11

À la fin de chaque type de 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 &nbsp;bit n'est pas exactement un acte de classe. C'était ma solution de contournement de quatre secondes, et ce n'est pas le but de cette question, alors restez avec moi!)

Sur un post avec plusieurs tags, cela donne:

voici à quoi ça ressemble

Si j'ajoute juste une virgule après la {Tag}création <a href="{TagURL}">{Tag},</a>, j'obtiens:

trop de virgules

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

Comment ajouter juste le bon nombre de virgules?


Mise à jour :

La réponse de Jeremy ci-dessous a fait ce que je voulais. Mais, pour essayer d' être fantaisiste "conforme aux normes" (bien que je ne sache pas pourquoi quiconque utilisant IE8 lirait mon tumblr), j'ai essayé 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:

capture d'écran mise à jour

( nb: le saut de ligne n'est pas lié - j'ai ajouté cela exprès. )

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

bateau à cheveux
la source
Il ne s'agit pas vraiment d' être «conforme aux normes», c'est juste qu'IE8 ne prendra en charge ce CSS que s'il est en mode conforme aux normes. Malheureusement, tous les utilisateurs de Windows XP seront limités à IE8 car vous avez besoin de Vista + pour passer à IE9.
MrWhite
@ w3d Hm. C'est noté. Shoulda l'a gardé à «devenir fantaisiste»! :)
hairboat
Désolé, j'ai l'impression de gâcher les choses, car cela fonctionnait bien pour vous dans votre navigateur. L'espace blanc supplémentaire après la balise et avant le ,est probablement l'espace blanc qui se produit après le </a>dans votre balisage / thème. Vous pouvez essayer de supprimer cela. La première virgule est toujours présente? Essayez de changer content:"";en content:"%";juste pour voir si %ça se voit? (Bien que je vois dans votre commentaire sur ma réponse que cela peut ne pas avoir d'effet?!)
MrWhite
Dans quel (s) navigateur (s) essayez-vous cela?
MrWhite
@ w3d, le% n'apparaît pas. J'utilise Chrome 13.0.782.220 sur OS X Lion. Je reviendrai à la solution de Jeremy pour l'instant, mais je continuerai de peaufiner. Pas de soucis pour tout gâcher - c'est un problème amusant à mâcher!
hairboat

Réponses:

4

J'ai une autre idée.

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

Cela ajoutera une étendue avec la classe "tagtail" après chaque balise.

Ensuite, ajoutez ce css:

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

Cela sélectionnera chaque ancre de balise qui vient après une durée de balise (donc toutes sauf la première). De cette façon, nous évitons d'avoir à utiliser les sélecteurs premier enfant ou dernier enfant .


MISE À JOUR:

Si vous voulez vous assurer que les virgules sont stylées indépendamment de l'ancre, je suppose que vous pouvez également faire:

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

puis le coiffer comme:

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

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

Jeremy
la source
+1 ... Dommage pour le balisage supplémentaire, mais j'aime ça! :)
MrWhite
Je me suis retrouvé à lancer un balisage supplémentaire inutile dans beaucoup de conception pour que IE fasse correspondre la mise en page avec le CSS qu'il ne prend pas en charge.
Jeremy
Si vous voulez vous assurer que les virgules sont décorées de façon en dehors de l'ancre, je suppose que vous pouvez aussi le faire: {block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}et le style alors comme: span.taghead { display:none; } a.tag + span.taghead { display:inline; }. Cependant, cela peut nécessiter des ajustements, car les navigateurs diffèrent sur les règles prioritaires.
Jeremy
@Jeremy, ce dernier morceau fonctionne parfaitement . La tagtailméthode rendait un espace avant la virgule, mais ce petit tagheadbout me rend très heureux maintenant. Pensez-vous à ajouter votre commentaire dans la réponse?
hairboat
Fait et fait! Heureux que cela fonctionne pour vous.
Jeremy
4

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 : après et la propriété de contenu peu utilisée pour ajouter la virgule après coup. La deuxième règle remplace la propriété de contenu de la dernière balise de la séquence.

Jeremy
la source
Excellent. Énorme succès. Merci, Jeremy!
hairboat
1
@Jeremy: IE8 ne prend pas en charge la last-childpseudo-classe même en mode conforme aux normes (c'est-à-dire avec un DOCTYPE). Vous devrez utiliser pour prendre first-child:beforeen charge IE8 (et IE7).
MrWhite
@ w3d: Ça craint. Silly IE. Je ne sais pas pourquoi votre premier enfant: avant que le sélecteur ne fonctionne pas correctement pour Abby, mais j'ai ajouté une autre réponse avec une autre idée qui ajoute des étendues et utilise le sélecteur +.
Jeremy
3

Suite à la réponse de @ Jeremy ... Pour prendre en charge IE8 (et IE7), vous devrez utiliser la first-childpseudo-classe plutôt que last-child. IE8 ne prend pas en charge 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 qui apparaît après la fermeture </a>de votre balisage / thème.

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

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

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

MrWhite
la source
J'utilise a.tag:before { content:", ";}et a.tag:first-child:before { content:"# tagged: ";}, mais il en résulte une ligne de balises qui dit simplement , Mareen Fischinger , New York City , Times Square. Hm. Ce commentaire est déroutant. Je mettrai à jour la question.
hairboat
0

S'appuyant sur la :beforesuggestion des 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 libalise avec :beforeplutôt que la balise a à l'intérieur de la libalise - chaque balise sera le premier enfant de la libalise mais une seule libalise sera le premier enfant de la balise ulou ol! J'utilise une liste de description car je voulais mettre "Tags" dans la dbalise t donc la même chose s'applique à la dbalise d.

Cependant, l'utilisation d'une liste de descriptions présente une complexité supplémentaire. La première ddbalise n'est jamais le premier enfant de la dlbalise, c'est la dtbalise, vous devez donc l'utiliser nth-child(2)pour la cibler. L'inconvénient de l'utilisation nth-child(2)est qu'encore une fois il n'est pas conforme à IE 8, donc ce 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}

À partir des réponses précédentes, ils suggèrent également que l'utilisation d'un espace dans content ( 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;
}
Garrettlynch
la source