Как получить тему Tumblr для разделения тегов запятыми?

В конце каждого типа сообщения в моей теме Tumblr у меня есть этот код:

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

(Я знаю, что  это не совсем групповой акт. Это был мой четырехсекундный обходной путь, и это не цель этого вопроса, так что терпите меня!)

На пост с несколькими тегами, который дает:

Если я просто добавлю запятую после {Tag}создания <a href="{TagURL}">{Tag},</a>, я получу:

Последний тег имеет постороннюю запятую, и посты с одним тегом также показывают дополнительную запятую при этом методе.

Как добавить правильное количество запятых?

Обновление :

Ответ Джереми ниже сделал то, что я хотел. Но, пытаясь придумать, чтобы быть «совместимым со стандартами» (хотя я не знаю, почему кто-то, использующий IE8, прочитал бы мой tumblr), я попытался реализовать предложение w3d. Теперь CSS выглядит так:

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

Результат сейчас:

( Примечание: разрыв строки не связан - я специально добавил это. )

Так. Что пошло не так?

У меня есть другая идея.

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

Это добавит диапазон с классом «tagtail» после каждого тега.

Затем добавьте этот CSS:

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

Это выберет каждый якорь тега, который идет после диапазона тега (то есть каждый, кроме первого). Таким образом, мы избавляемся от необходимости использовать селекторы first-child или last-child .

ОБНОВИТЬ:

Если вы хотите убедиться, что запятые оформлены отдельно от якоря, я думаю, вы могли бы также сделать:

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

а затем стиль как:

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

Тем не менее, это может потребовать доработки, потому что браузеры отличаются переопределением правил.

Попробуйте немного хитрости CSS (чтобы заставить его работать в IE 8, вам нужно указать <! DOCTYPE> в верхней части документа).

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

Затем добавьте следующий CSS:

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

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

Он использует псевдо-селектор : после и свойство малоиспользуемого содержимого, чтобы добавить запятую после факта. Второе правило переопределяет свойство содержимого для последнего тега в последовательности.

Исходя из ответа @ Джереми ... Для поддержки IE8 (и IE7) вам нужно будет использовать first-childпсевдокласс, а не last-child. IE8 не поддерживает last-childдаже в совместимом со стандартами режиме (т. Е. С DOCTYPE).

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

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

РЕДАКТИРОВАТЬ: Тем не менее, небольшая оговорка с этим подходом заключается в том, что вам, вероятно, придется удалить любые дополнительные пробелы, которые появляются после закрытия </a>в вашей разметке / теме.

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

РЕДАКТИРОВАТЬ: Скриншот вывода скрипта в Safari 5.0 на OS X:

Основываясь на :beforeпредложении в предыдущих ответах. Если вы работаете со списком тегов, вполне возможно, что вы разместите их в списке. Если вы используете каждый liтег с тегом, :beforeа не с тегом внутри liтега - каждый тег будет первым потомком liтега, однако только один liтег будет первым потомком тега ulor ol! Я использую список описания, так как я хотел добавить теги в dтег t, так что это относится и к dтегу d.

Однако использование списка описания имеет дополнительную сложность. Первый ddтег никогда не является первым дочерним элементом dlтега, это dtтег, поэтому вам нужно использовать его nth-child(2)для таргетинга. Недостатком использования nth-child(2)является то, что опять-таки он не совместим с IE 8, поэтому эта проблема снова возникает.

Вот мое решение.

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

Также из предыдущих ответов они предполагают, что использование пробела в content ( content: ", ";) работает. Это работает? Я не могу заставить его работать, но "\ 00a0" будет.

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