Tumblr：如何使用post标记来控制CSS（UPDATE：没有JQuery的工作方法！）

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

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

谁知道这是怎么做到的？

谢谢。

Answer 1

找到了一种只使用HTML / CSS执行此操作的方法。 非常简单，只需将{Tag}块添加到包含post区域的任何div类，但要确保它在{block：Posts}和{block：Text}等之间。现在无论你标记什么post现在都变成了一个新类。

{block:Posts} {block:Text} 
 {block:Title}
{Title}
{/block:Title} 
{Body}
 
 {/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方法，就不会因为某种原因想到这个:)

Answer 2

使用jQuery，一切皆有可能！ 这不会马上工作，所以调整它为您的主题：

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

Answer 3

它与JS无关，这些事情都是在服务器端完成的。 取决于标签将一些属性设置为post，然后在将它们呈现为HTML时将其考虑在内。

Answer 4

您希望将post的标签作为类名称，以便您可以使用CSS设置post样式，并且可以使用一个变量来实现此目的。 在您的模板中，只需使用{TagsAsClasses} 。 这将呈现HTML友好的类名。

post标签的HTML类属性友好列表。 示例：“幽默办公室new_york_city”

有关详细说明，请参阅Tumblr文档中的Post章节 。