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>