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

11

В конце каждого типа сообщения в моей теме 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>

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

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

вот как это выглядит

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

слишком много запятых

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

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


Обновление :

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

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

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

обновленный скриншот

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

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

прическа
источник
Дело не в том, чтобы быть «совместимым со стандартами», просто в том, что IE8 будет поддерживать этот CSS, только если он находится в режиме, совместимом со стандартами. К сожалению, все пользователи Windows XP будут ограничены IE8, так как вам нужно Vista + для обновления до IE9.
MrWhite
@ w3d Хм. Отметил. Стоит ли держать это в «наворочении»! :)
прическа
Извините, мне кажется, что я все испортил, потому что в вашем браузере он работал нормально. Дополнительный пробел после тега и перед, ,вероятно, является пробелом, который появляется после </a>в вашей разметке / теме. Вы можете попробовать удалить это. Первая запятая все еще присутствует? Попробуйте изменить, content:"";чтобы content:"%";посмотреть, если %показывает? (Хотя из вашего комментария к моему ответу я вижу, что это может не иметь никакого эффекта ?!)
MrWhite
В каком браузере вы пытаетесь это сделать?
MrWhite
@ w3d,% не отображается. Я использую Chrome 13.0.782.220 на OS X Lion. Вернемся к решению Джереми, но продолжаем настраивать. Не беспокойтесь об этом - это забавная проблема, чтобы пережевывать!
прическа

Ответы:

4

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

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

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

Джереми
источник
+1 ... Обидно за дополнительную разметку, но мне это нравится! :)
MrWhite
Я обнаружил, что добавляю лишнюю разметку во многие дизайны, чтобы IE соответствовал макету с CSS, который он не поддерживает.
Джереми
Если вы хотите , чтобы убедиться , что запятые в стиле обособленно от якоря, я полагаю , вы могли бы также сделать: {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; }. Тем не менее, это может потребовать доработки, потому что браузеры отличаются переопределением правил.
Джереми
@ Джереми, этот последний бит работает отлично . tagtailМетод рендеринга пробел перед запятой, но это немного tagheadнемного делает меня очень счастливым сейчас. Вы можете добавить свой комментарий обратно в ответ?
прическа
Готово и сделано! Рад, что это работает для вас.
Джереми
4

Попробуйте немного хитрости 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:"";
}

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

Джереми
источник
Превосходно. Огромный успех. Спасибо, Джереми!
прическа
1
@ Джереми: IE8 не поддерживает last-childпсевдокласс даже в режиме соответствия стандартам (т. Е. С DOCTYPE). Вам нужно будет использовать first-child:beforeдля поддержки IE8 (и IE7).
MrWhite
@ w3d: это отстой. Глупый ИП. Я не уверен, почему ваш первый ребенок: раньше селектор не работает должным образом для Эбби, но я добавил еще один ответ с другой идеей, которая добавляет промежутки и использует + селектор.
Джереми
3

Исходя из ответа @ Джереми ... Для поддержки 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:

Скриншот вывода скрипки в Safari 5.0 на OS X

MrWhite
источник
Я использую a.tag:before { content:", ";}и a.tag:first-child:before { content:"# tagged: ";}, но это приводит к ряду тегов, которые просто говорят , Mareen Fischinger , New York City , Times Square. Гектометр Этот комментарий сбивает с толку. Я обновлю вопрос.
прическа
0

Основываясь на :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;
}
garrettlynch
источник