Tumblr: Как управлять CSS с помощью тегов post (ОБНОВЛЕНИЕ: рабочий метод без jQuery!)

#javascript #jquery #css #tumblr

Вопрос:

Видел, как это делалось раньше, мне любопытно, как это делается. Пример можно найти по адресуhttp://wordographic.info

Например, если я помечаю сообщение синим цветом, bg-цвет сообщения становится синим и т.д.

Кто-нибудь знает, как это делается?

Спасибо.

Ответ №1:

Найден способ сделать это только с помощью HTML / CSS. Довольно просто, просто добавьте блок {Tag} в любой класс div, охватывающий область post, но убедитесь, что он находится между {block: Posts} и {block: Text} и т.д. Теперь все, что вы помечаете для post, становится новым классом.

 {block:Posts}
  {block:Text}
    <div class="post {block:HasTags}{block:Tags}{Tag} {/block:Tags}{/block:HasTags}">
      {block:Title}<h2>{Title}</h2>{/block:Title}
      <p>{Body}</p>
    </div>
  {/block:Text}
{/block:Posts}

Обратите внимание на третью строку ниже. важно добавить пробел после {Tag}, иначе они не будут разделены в HTML.

CSS будет выглядеть следующим образом:

 .post { /* default style */
    background: #ccc;
    float: left;
    margin: 10px;
    position: relative;
    }
.blue { /* when tagged blue, use this style */
    background: blue !important; 
    }

Работает! Довольно просто, jquery не требуется!

Спасибо Blender, по какой-то причине я бы не подумал об этом, если бы не читал ваш метод jquery 🙂

Ответ №2:

С jQuery возможно все! Это не сработает сразу, поэтому настройте его для своей темы:

 $('.post-class .tag-container .tag').each(function() {
  $(this).closest('.post-class').addClass($(this).text());
});

1. Спасибо, попробую. Я думал, что это можно было бы сделать с помощью чисто CSS, идея заключалась в том, чтобы поместить блок {Tags} Tumblr внутри класса div, что-то вроде <div class=»posts {Tags}»> и если он будет отображаться, пометка ‘blue’ отобразит ‘blue’ как класс.

2. Думаю, я не очень часто использовал Tubmlr. Отличное решение (я бы опубликовал его в качестве ответа и принял его)!

3. Хаха, спасибо, я сделал именно это, я также протестировал это, это работает действительно очень хорошо.

Ответ №3:

Это не имеет ничего общего с JS, такие вещи выполняются на стороне сервера. В зависимости от тегов некоторые свойства устанавливаются для posts, а затем они учитываются при их рендеринге в HTML.

Ответ №4:

Вы хотите получить теги post в виде имен классов, чтобы вы могли стилизовать публикации с помощью CSS, и для этой цели вы можете использовать переменную. В вашем шаблоне просто используйте {TagsAsClasses} . Это позволит отображать имена классов, понятные для HTML.

Список тегов для публикации, понятный для атрибутов HTML-класса. Пример: «humor office new_york_city»

Подробное объяснение смотрите в главе Post в документах Tumblr.