Como faço para que meu tema do Tumblr separe as tags com vírgulas?


11

No final de cada tipo de post no meu tema do Tumblr, eu tenho esse 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>

(Eu sei que a parte &nbsp;não é exatamente um ato de classe. Foi a minha solução alternativa de quatro segundos, e não é o objetivo dessa pergunta, então tenha paciência comigo!)

Em uma postagem com várias tags, isso gera:

Isto é o que parece

Se eu adicionar uma vírgula depois {Tag}, ao fazê-lo <a href="{TagURL}">{Tag},</a>, recebo:

muitas vírgulas

A última tag possui uma vírgula estranha, e as postagens com apenas uma tag também mostrariam a vírgula extra nesse método.

Como adiciono o número certo de vírgulas?


Atualização :

A resposta de Jeremy abaixo fez o que eu queria. Mas, em uma tentativa de obter uma fantasia "compatível com os padrões" (embora eu não saiba por que alguém usando o IE8 leria meu tumblr), tentei implementar a sugestão do w3d. Então agora o CSS se parece com:

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

O resultado é agora:

captura de tela atualizada

( nb: a quebra de linha não está relacionada - eu adicionei isso de propósito. )

Assim. O que deu errado?


Não é realmente um caso de ser "compatível com as normas", é apenas que o IE8 só irá apoiar esta CSS se ele estiver no modo compatível com padrões. Infelizmente, todos os usuários do Windows XP estarão limitados ao IE8, pois você precisa do Vista + para atualizar para o IE9.
MrWhite

@ w3d Hm. Notado. Deveria mantê-lo 'ficando chique'! :)
hairboat

Desculpe, sinto como se estivesse estragando tudo, pois obviamente estava funcionando bem para você no seu navegador. O espaço em branco adicional após a tag e antes do ,provavelmente é o espaço em branco que ocorre após o </a>na sua marcação / tema. Você pode tentar remover isso. A primeira vírgula ainda está presente? Tente mudar content:"";para content:"%";apenas para ver se %mostra? (Embora eu ver a partir de seu comentário sobre a minha resposta de que isso pode não ter qualquer efeito ?!)
MrWhite

Em quais navegadores você está tentando fazer isso?
MrWhite

@ w3d, o% não aparece. Estou executando o Chrome 13.0.782.220 no OS X Lion. Voltará para a solução de Jeremy por enquanto, mas continuará ajustando. Não se preocupe em estragar tudo - é um problema divertido de roer!
hairboat

Respostas:


4

Eu tenho outra ideia.

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

Isso adicionará uma extensão à classe "tagtail" após cada tag.

Em seguida, adicione este css:

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

Isso selecionará todas as âncoras de tags que vêm após um período de tagtail (então, todas, exceto a primeira). Dessa forma, evitamos a necessidade de usar os seletores de primeiro filho ou último filho .


ATUALIZAR:

Se você deseja garantir que as vírgulas tenham um estilo separado da âncora, suponho que você também possa:

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

e depois estilize-o como:

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

No entanto, isso pode precisar de ajustes porque os navegadores diferem nas regras de substituição.


+1 ... Uma pena a marcação extra, mas eu gosto! :)
MrWhite

Eu me vi jogando uma marcação extra desnecessária em vários designs para fazer o IE combinar o layout com o CSS que ele não suporta.
Jeremy

Se você quiser garantir que as vírgulas são denominados além do âncora, eu suponho que você também pode fazer: {block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}e estilo, em seguida, como: span.taghead { display:none; } a.tag + span.taghead { display:inline; }. No entanto, isso pode precisar de ajustes porque os navegadores diferem nas regras de substituição.
Jeremy

@ Jeremy, este último bit está funcionando perfeitamente . O tagtailmétodo estava renderizando um espaço antes da vírgula, mas esse tagheadpouquinho está me deixando muito feliz agora. Considere adicionar seu comentário novamente à resposta?
hairboat

Feito e feito! Que bom que funciona para você.
Jeremy

4

Experimente alguns truques CSS (para que ele funcione no IE 8, você precisa especificar um <! DOCTYPE> na parte superior do 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>

Em seguida, adicione o seguinte CSS:

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

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

Ele usa o pseudo-seletor : after e a propriedade de conteúdo pouco usada para adicionar a vírgula após o fato. A segunda regra substitui a propriedade content da última tag na sequência.


Excelente. Enorme sucesso. Obrigado Jeremy!
hairboat

1
@ Jeremy: O IE8 não suporta a last-childpseudo-classe, mesmo no modo compatível com os padrões (ou seja, com um DOCTYPE). Você precisará usar first-child:beforepara oferecer suporte ao IE8 (e IE7).
MrWhite

@ w3d: Isso é péssimo. IE bobo. Não sei por que o seu primeiro filho: antes do seletor não funcionar corretamente para Abby, mas adicionei outra resposta com outra ideia que adiciona extensões e usa o seletor +.
Jeremy

3

Seguindo a resposta de @ Jeremy ... Para dar suporte ao IE8 (e IE7), você precisará usar a first-childpseudo classe, em vez de last-child. O IE8 não suporta last-child, mesmo no modo compatível com os padrões (ou seja, com um DOCTYPE).

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

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

EDIT: No entanto, uma pequena ressalva nessa abordagem é que você provavelmente precisará remover qualquer espaço em branco adicional que aparecer após o fechamento </a>da sua marcação / tema.

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

EDIT: Captura de tela da saída do violino no Safari 5.0 no OS X:

Captura de tela da saída do violino no Safari 5.0 no OS X


Estou usando a.tag:before { content:", ";}e a.tag:first-child:before { content:"# tagged: ";}, mas resulta em uma linha de tags que apenas diz , Mareen Fischinger , New York City , Times Square. Hum. Este comentário é confuso. Vou atualizar a pergunta.
hairboat

0

Aproveitando a :beforesugestão nas respostas anteriores. Se você estiver trabalhando com uma lista de tags, é bem possível que você as coloque em uma lista. Se você usar cada litag com :beforee não a tag dentro da litag - cada tag será o primeiro filho da litag, no entanto, apenas uma litag será o primeiro filho da tag ulou ol! Estou usando uma lista de descrição, pois queria colocar "Tags" na dtag t, para que o mesmo se aplique à dtag d.

No entanto, a utilização de uma lista de descrição possui uma complexidade adicional. A primeira ddtag nunca é o primeiro filho da dltag, é a dttag, então você precisa usá nth-child(2)-lo para segmentá-la. A desvantagem de usar nth-child(2)é que, novamente, não é compatível com o IE 8, para que esse problema ocorra novamente.

Aqui está a minha solução.

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

Também a partir das respostas anteriores, eles sugerem que o uso de um espaço no conteúdo ( content: ", ";) funciona. Funciona? Não consigo fazê-lo funcionar, mas "\ 00a0" funcionará.

.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;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.