Tumblr：如何控制CSS与帖子标记（更新：工作方法没有JQuery！） [英] Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

问题描述

之前做过的，我很好奇它是如何做到的。示例可以在 http://wordographic.info/ 找到

例如，如果我将帖子标记为蓝色，则帖子的bg颜色变为蓝色等。

任何人都知道这是怎么做的？ >

感谢。

解决方案

找到一种方法只使用HTML / CSS 。很简单，只需将{Tag}块添加到包装帖子区域的任何div类，但确保它在{block：Posts}和{block：Text}之间。现在，任何标记的帖子现在都将成为一个新类。 p>

  {block：Posts} 
 {block：Text} 
< div class = 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 {/ *当标记为blue，使用这种风格* / 
 background：blue！important; 
} 
  

工程！非常简单，不需要jquery！

感谢Blender，如果我没有阅读你的jquery方法，不会有这个想法）。

Seen this done before, am curious as to how it is done. Example can be found over at http://wordographic.info/

For example, if I tag a post blue, the bg-color of the post turns blue, etc.

Anyone know how this is done?

Thanks.

解决方案

Found a way to do this with only HTML/CSS. Pretty simple, just add the {Tag} block to any div class wrapping the post area but make sure it's between {block:Posts} and {block:Text} etc. Now whatever you tag a post now becomes a new class.

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

Pay attention to the third line down. it is important to add a space after {Tag} otherwise they won't be seperated in the HTML.

The CSS would look like this:

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

Works! Pretty simple, no jquery required!

Thanks Blender, wouldn't have thought of this for some reason if I didn't read your jquery method :)

这篇关于Tumblr：如何控制CSS与帖子标记（更新：工作方法没有JQuery！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！