如何从博客文章中提取第一张图片作为缩略图？ Blogger 第一代经典主题中的自定义代码

Question

我一直在尝试使用经典的第一代 Blogger 主题在一个页面上显示所有帖子的片段。但是，我还没有找到任何特定标签来创建帖子片段。

我只想显示缩略图和摘录，类似于下面链接的第二代 Blogger 主题图像中看到的内容。我进行了广泛的搜索，但尚未找到解决方案。

模板主题-2004年第一代经典

我只想显示精选帖子的缩略图和摘录，但在经典主题中，精选帖子会与帖子的完整正文一起列出。我怎样才能实现这个目标？

Answer 1

要在经典的第一代 Blogger 主题中显示带有缩略图和摘录的帖子片段，您需要使用 HTML 和 CSS 自定义模板。这是分步指南：

1. 在 Blogger 中编辑 HTML:

   • 转到您的 Blogger 仪表板。
   • 导航到“主题”，然后单击“编辑 HTML”。

2. 插入缩略图和摘录代码：

   • 您需要在显示帖子的

     <b:loop>

     标签内插入以下代码。此代码将处理缩略图和摘录的显示。

   <b:loop values='data:posts' var='post'>
     <div class='post'>
       <h2><a expr:href='data:post.url'><data:post.title/></a></h2>
       <b:if cond='data:post.hasThumbnail'>
         <div class="post-thumbnail">
           <img expr:src='data:post.thumbnailUrl' alt='Post Thumbnail'/>
         </div>
       </b:if>
       <div class="post-excerpt">
         <b:eval expr='data:post.body.split("&lt;!--more--&gt;")[0]'/>
       </div>
       <div class='post-footer'>
         <a expr:href='data:post.url'>Read More</a>
       </div>
     </div>
   </b:loop>
   

   此代码片段检查帖子是否有缩略图并显示它。它还通过在

   <!--more-->

   标签处拆分帖子正文来创建摘录。

3. 添加CSS样式:

   • 添加以下 CSS 来设置缩略图和摘录的样式。您可以将其添加到模板的

     <style>

     部分或“主题”选项卡下的“高级”部分。

   .post-thumbnail img {
     width: 150px;
     height: auto;
     float: left;
     margin-right: 10px;
   }
   .post-excerpt {
     display: block;
     overflow: hidden;
   }
   

4. 在您的帖子中使用“阅读更多”标签：

   • 撰写博客文章时，使用

     <!--more-->

     标签指定摘录应结束的位置。这有助于 Blogger 知道在哪里截断帖子的片段。

示例模板代码：

以下是帖子模板的修改部分的外观示例：

<b:loop values='data:posts' var='post'>
  <div class='post'>
    <h2><a expr:href='data:post.url'><data:post.title/></a></h2>
    <b:if cond='data:post.hasThumbnail'>
      <div class="post-thumbnail">
        <img expr:src='data:post.thumbnailUrl' alt='Post Thumbnail'/>
      </div>
    </b:if>
    <div class="post-excerpt">
      <b:eval expr='data:post.body.split("&lt;!--more--&gt;")[0]'/>
    </div>
    <div class='post-footer'>
      <a expr:href='data:post.url'>Read More</a>
    </div>
  </div>
</b:loop>

测试：

• 保存您的更改并预览您的博客。请务必检查带缩略图和不带缩略图的帖子的外观，以确保所有内容都正确显示。

通过执行这些步骤，您应该能够在经典的第一代 Blogger 主题中显示缩略图和摘录，类似于第二代主题中提供的功能。