将博客上的图片制作成link

Question

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

我有我制作的所有 post 的首页，有 post 的一个小 "example"，有图片和文字，现在图片没有'没有任何功能，然后我有 post 页面，其中包含 post 的所有文本和图片。在 post 页面上，您可以单击图片，它会显示得更大。

在首页上，我希望能够单击图片转到 post 页面，并且仍然能够单击 post 页面上的图像将其放大。

现在我试着把这行代码放在不同的地方：

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

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

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

首页post例子的代码是这样的：

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

如果您仍然希望在索引页上有文本以及带有 link 到 post 的图像，您可以这样做

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

将博客上的图片制作成link

Make picture on blog into a link

html

blogs

blogger

hyperlink

blogspot