Tumblr: Как управлять CSS с помощью пост-тегов (ОБНОВЛЕНИЕ: Метод работы без JQuery!)

Question

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

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

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

Спасибо.

Answer 1

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

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

Works! Довольно просто, JQuery не требуется!

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

Answer 2

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

HTML-дружественный список атрибутов класса для тегов записи.Пример: "юмор office new_york_city"

Для подробного объяснения см. Пост главы в Tumblr docs.

Answer 3

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

Answer 4

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

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