根据 Blogger 中的标签自定义每个帖子页面答案

【问题标题】：Customizing each post pages based on label in Blogger根据 Blogger 中的标签自定义每个帖子页面
【发布时间】：2014-09-17 17:02:40
【问题描述】：

我遇到了一篇基于标签的帖子自定义的帖子，该帖子展示了如何根据发布的标签设计每篇博文。也就是说，具有相同标签的每个帖子都会自动具有相同的设计。

但问题在于我无法在帖子内容（主包装器）之外进行自定义，因为“标签”仅定义为帖子内容区域。我喜欢为我的标签设置不同颜色的标题和其他外包装。

我会给出我使用的代码

用这个替换第二次出现的<data:post.body/>（在span属性之间）

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<!-- Only using the last label -->
<div expr:class='"label" + data:label.name'>
<p> <data:post.body/> </p>
</div>
</b:if> 
</b:loop>
<b:else/>
<div class='labelNone'> <p><data:post.body/></p> </div>
</b:if>

然后在模板的样式部分，通过指定 div 类来应用样式。这是一个示例，它将为所有带有“tech”标签的帖子放置背景图片：

<style type='text/css'>
div.labeltech {
background-image: url(&quot;http://yoursite.com/Wallpaper-Widescreen.jpg&quot;);
background-repeat: no-repeat;
background-position: bottom right;
display: block; 
}
</style>

如果堆栈溢出的知识渊博的成员能帮助我，那就太好了，因为我只是一个学生。

【问题讨论】：

您可以克隆一个 div 的类，然后使用 jQuery 将其添加到另一个 div。然后，这将使您能够应用超出范围的类。
@vector ,如果我使用以下内容， $(function(){ var $sharetitle = $('.sharetitle').clone(); $( 39;.labeldummy').html($sharetitle); sharetitle 是我想要在标签“dummy”内的 div。但我需要为标签上的 sharetitle 赋予不同的颜色（相对于我的主页）命名为 dummy，因此如果我克隆 div id=sharetitle，我将获得与我的主页相同的 sharetitle - 我需要有所不同。
删除 b:skin 中的所有 CSS 并将所有 css 放入标签条件标签中......也许它会工作

标签： html css customization blogger

【解决方案1】：

恐怕您将不得不坚持使用 'parent' 的 javascript（例如 jquery）实现，即。 http://api.jquery.com/parent/

说到 CSS 规范，CSS2 和 CSS3 规范都没有父元素选择器。您可能会使用“选择父元素为 Y 的 X 元素”（Y > X），但目前仅此而已。

请看一下可用的选择器列表http://www.w3.org/TR/css3-selectors/#selectors，也许你会发现一些有用的东西

从好的方面来说，有计划创造类似的东西

!div p{}

不过目前还是草稿，没有浏览器支持http://www.w3.org/TR/selectors4/#subject

【讨论】：