Blogger 特色图片通过背景图片没有 Javascript

Question

我正在制作一个 Blogger 主题，我正在尝试为 blogroll 上的每个 post 创建一个特色图像，方法是抓取每个 post 的第一张图像并将其应用为元素每个 post 中的背景图片。如何才能做到这一点？

到目前为止，我已经让它工作了一些，问题是它将相同的图像应用到每个 post，而不是每个 post。我试着把它放在一个循环中，但它没有什么不同。

我的代码：

<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，你不能对不同的生成样式使用相同的 class，所以取决于循环索引你可以给每个post一个不同的id。

1-在widget的主循环中添加属性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>

Blogger 特色图片通过背景图片没有 Javascript

Blogger Featured Image Via Background Image Without Javascript

blogger