javascript - 有没有办法可以选取博客文章中的第一张图片并将其作为博客文章的标题？

Question

所以我想做的是让博客文章中的第一张图片看起来像每个博客文章页面的标题......

这是我到目前为止所拥有的:

<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>

但是它并没有真正起作用。有人可以帮我吗？请参阅this举个例子。我希望帖子中的第一张图片看起来像页面上的标题......

Answer 1

我也遇到过这个问题。我想您想使用该图像作为背景图像。 我使用一些 jquery 解决了这个问题。 你的目标与我的有点不同，所以我建议你实际上向你的第一个图像添加一个类(可能想要手动执行此操作，或使用javascript)，获取源代码，将其作为背景图像添加到你的标题中，然后隐藏图像标签(如果有意重复，请勿这样做)

标记将类似于:

<header class="imgbg"></header>
<div class="post">
  <h1>Title</h1>
  <p>Text</p>
  <img src="#" class="first-img">
</div>

和jquery:

function getimgsrc(){
    $('.post').find('.first-img').each(function(n, image){
        var image = $(image);
        var thisurl = $(this).attr('src');
        $('.imgbg').css('background-image', 'url(' + thisurl + ')');      
        $('.first-img').remove();
    });
}

我构建了一个 codepen 来更好地说明这一点:http://codepen.io/bekreatief/pen/BaFnx