Blogger通过背景图片（不含Javascript）精选图片

Question

我正在制作Blogger主题，并且试图通过抓住每个帖子的第一张图片并将其用作每个帖子中的元素背景图片，为Blogroll上的每个帖子创建一个特色图片。如何才能做到这一点？

到目前为止，我已经使它工作了一些，问题是它对每个帖子而不是每个帖子都应用了相同的图像。我尝试将其循环放置，但没有任何效果。

我的代码：

<b:loop values='data:post' var='this'>
  <b:if cond='data:post.featuredImage'>
    <a class='featured-image-link' expr:href='data:post.url'/>
    <b:include data='{ image: data:post.featuredImage, selector: ".featured-image-link" }' name='responsiveImageStyle'/>
  <else/>
    <a class='featured-image-link' expr:href='data:post.url'/>
    <style>background-image: url(https://1.bp.blogspot.com/-1AyCkdmJy98/Xa9kktaCsmI/AAAAAAAAfh0/zCRbtFo0di0iaU-eU5AWjx4Ndvt3sXmsgCLcBGAsYHQ/s1600/default-image-light_1920x1080.png);</style>
  </b:if>
</b:loop>

编辑： 屏幕截图结果，带或不带循环：

Answer 1

您的循环无法与此values和var一起使用，因此您应该在命令前编写选择器以选择另一种样式，因此您可以尝试以下选择：

<b:loop values='data:posts' var='post'>
    <a class='featured-image-link' expr:href='data:post.url'/>
    <b:if cond='data:post.featuredImage'>
        <b:include data='{ image: data:post.featuredImage, selector: ".featured-image-link" }' name='responsiveImageStyle'/>
    <b:else/>
        <b:include data='{ image: "https://1.bp.blogspot.com/-1AyCkdmJy98/Xa9kktaCsmI/AAAAAAAAfh0/zCRbtFo0di0iaU-eU5AWjx4Ndvt3sXmsgCLcBGAsYHQ/s1600/default-image-light_1920x1080.png", selector: ".featured-image-link" }' name='responsiveImageStyle'/>
    </b:if>
</b:loop>

---

编辑：

我认为您应该为元素使用id属性而不是class，对于不同的生成样式，您不能使用同一类，因此可以根据循环索引为每个帖子分配一个不同的ID。

1-在窗口小部件添加属性index='i'的主循环中，它应类似于：

<b:loop values='data:posts' var='post' index='i'>

2-将这段代码放在小部件的主循环中：

<a expr:id='("featured-image-link" + data:i)' expr:href='data:post.url'/>
<b:with value='data:post.featuredImage ?: "https://1.bp.blogspot.com/-1AyCkdmJy98/Xa9kktaCsmI/AAAAAAAAfh0/zCRbtFo0di0iaU-eU5AWjx4Ndvt3sXmsgCLcBGAsYHQ/s1600/default-image-light_1920x1080.png"' var='featuredImg'>
    <b:include data='{ image: data:featuredImg, selector: ("#featured-image-link" + data:i) }' name='responsiveImageStyle'/>
</b:with>

最终代码应类似于：

<b:loop values='data:posts' var='post' index='i'>
    <!-- your post elements -->
    <a expr:id='("featured-image-link" + data:i)' expr:href='data:post.url'/>
    <b:with value='data:post.featuredImage ?: "https://1.bp.blogspot.com/-1AyCkdmJy98/Xa9kktaCsmI/AAAAAAAAfh0/zCRbtFo0di0iaU-eU5AWjx4Ndvt3sXmsgCLcBGAsYHQ/s1600/default-image-light_1920x1080.png"' var='featuredImg'>
        <b:include data='{ image: data:featuredImg, selector: ("#featured-image-link" + data:i) }' name='responsiveImageStyle'/>
    </b:with>
    <!-- your post elements -->
</b:loop>

Answer 2

尝试删除b:loop，我想您是在另一个内部使用它

  <a class='featured-image-link' expr:href='data:post.url'/>
  <b:if cond='data:post.featuredImage'>
    <b:include data='{ image: data:post.featuredImage, selector: ".featured-image-link" }' name='responsiveImageStyle'/>
  <b:else/>
    <b:include data='{ image: "https://1.bp.blogspot.com/-1AyCkdmJy98/Xa9kktaCsmI/AAAAAAAAfh0/zCRbtFo0di0iaU-eU5AWjx4Ndvt3sXmsgCLcBGAsYHQ/s1600/default-image-light_1920x1080.png", selector: ".featured-image-link" }' name='responsiveImageStyle'/>
  </b:if>