将博客上的图片转换为链接

时间:2015-01-29 15:48:18

标签: html hyperlink blogs blogger blogspot

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

1 个答案:

答案 0 :(得分:0)

执行此操作的最佳方法是将<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='&quot;summary&quot; + 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>