汤博乐:如何用后标记控制CSS(更新:没有JQuery的工作方法！）

Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

本文关键字：JQuery 没有 工作 方法 更新 CSS 何用 汤博乐 控制      更新时间：2023-09-26

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

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

有人知道这是怎么做到的吗？

谢谢。

找到了一种只使用HTML/CSS的方法。非常简单，只需将{Tag}块添加到任何包装post区域的div类中，但要确保它位于{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方法，我不会出于某种原因想到这一点：）

有了jQuery，一切皆有可能！这不会马上奏效，所以根据你的主题进行调整：

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

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

您想要将post的标记作为类名，这样您就可以使用CSS对post进行样式设置，并且有一个变量可以用于此目的。在模板中，只需使用{TagsAsClasses}。这将呈现HTML友好的类名。

帖子标签的HTML类属性友好列表。示例："幽默办公室new_york_city"

有关详细说明，请参阅汤博乐文档中的文章章节。

相关文章：