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

时间:2016-07-08 15:42:44

标签: javascript html blogger

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:ifdata:这么多,我不确定是否可以将其视为普通的html文件。

2 个答案:

答案 0 :(得分:0)

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

它获得了帖子中的第一张图片,内部图片和外部图片都运行良好。

代码:GitHub

答案 1 :(得分:0)

尝试这个

<!-- (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>