Blogger 在热门帖子中显示外部图像缩略图

Question

Blogger 提供了一个Popular Post Widget，它可以找到热门帖子的第一张图片并将其显示在您博客的侧边栏上。

但它只能找到直接上传到Blogger 的图片，它对外部图片链接不起作用。我想知道是否有一种方法可以通过编辑其代码来读取外部图像，也许在 javascript 我认为...

默认生成代码：

<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
    <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
        <div class='item-thumbnail'>
            <a expr:href='data:post.href' target='_blank'>
                <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                </b:with>
            </a>
        </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <b:if cond='data:showSnippets'>
        <div class='item-snippet'><data:post.snippet/></div>
    </b:if>
</div>

由于代码中有很多b:if和data:，我不确定是否可以将其视为普通的html文件。

Answer 1

我在下面制作了一个小部件，它可以通过外部图像显示热门帖子的缩略图。复制所有代码并将其添加为小部件解决问题。

它获得了帖子中的第一张图片，内部图片和外部图片都很好。

代码：GitHub

Answer 2

试试这个

<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href'>
                  <b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 65, &quot;65:52&quot;): data:post.thumbnail' var='image'>
                    <img class='featuredImage' expr:alt='data:post.title' expr:src='data:image' height='52' layout='responsive' width='65'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>

Blogger 在热门帖子中显示外部图像缩略图

Blogger show external image thumbnail in popular posts

html

javascript

blogger