将博客上的图片变成链接

Question

我在http://www.picturethenature.com 上有自己的博客，我使用 blogspot 作为我保存博客的地方。我只是有一个小而烦人的问题。

我有我发布的所有帖子的首页，有一个帖子的小“示例”，有图片和文字，现在图片没有任何功能，然后我有帖子页面包含帖子和图片的所有文字。在帖子页面上，您可以单击图片，它会显示得更大。

在首页我希望能够点击图片进入帖子页面，并且仍然可以点击帖子页面上的图片使其变大。

现在我尝试将这行代码放在不同的地方：

<a expr:href='data:post.link'>[whatever the code for the image is]</a>

但是我放的地方只是把图片放大没有功能或者放大有放大功能。

我曾经看过代码的人说，在首页上这个特定列表的代码中没有提到图片。但是有没有可能以某种方式提及它？

首页的帖子示例代码如下：

<div class='post hentry uncustomized-post-template'>
      <a expr:name='data:post.id'/>
      <b:if cond='data:post.title'>
        <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        </h3>
      </b:if>

      <div class='post-header'>
        <div class='post-header-line-1'/>
      </div>

      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>

是否可以在不重写网站上的所有内容的情况下做到这一点？

非常感谢您的宝贵时间。

编辑：评论中要求的额外代码

<div class='post-body entry-content'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>   </b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='float:right;padding-right:10px;margin-top:10px;'>
<a class='readmorenbt' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Answer 1

最好的方法是将<data:post.body/>替换为

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='index-artwork'>
    <a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>      </a>
      </div>
<b:else/>
<data:post.body/>
</b:if>

如果您仍然希望在索引页面上包含文本以及带有帖子链接的图像，您可以这样做

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='index-artwork'>
    <a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>      </a>
      </div>
<data:post.body/>
<b:else/>
<data:post.body/>
</b:if>

然后在上面加上</head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
    .post-body img {
    display:none;
    }
    .index-artwork img {
    display:block;
    }
</style>
</b:if>

希望对你有帮助

---

编辑

找到这行var summary = imgtag + '<div style="text-align:justify;">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

替换成

var summary = '<div style="text-align:justify;">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

然后找到

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

并在它之前添加它

<b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' class='pbtthumbimg'/></a></b:if>

不要忘记从我原来的答案中删除 css：

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
    .post-body img {
    display:none;
    }
    .index-artwork img {
    display:block;
    }
</style>
</b:if>