如何用自定义代码在Blogger 2004初代经典主题中提取首图做缩略图并生成文章摘要？

一、替换内容输出逻辑生成摘要 #

初代经典主题无内置摘要标签，需修改主题代码实现：

1. 手动摘要（精准控制） #

编辑文章时在截断位置插入 <!--more-->，然后找到主题中的 <$BlogItemBody$> 标签，替换为：

<b:if cond='<$BlogItemHasJumpLink$>'>
  <div class='post-excerpt'>
    <$BlogItemBody$>
  </div>
  <a href='<$BlogItemPermalink$>#more' style='display:block;margin-top:10px;'>阅读全文</a>
<b:else/>
  <div class='post-excerpt'>
    <$BlogItemBody truncate='200'/>
  </div>
  <a href='<$BlogItemPermalink$>' style='display:block;margin-top:10px;'>阅读全文</a>
</b:if>

truncate='200' 可调整为你需要的字符数

2. 自动截取摘要 #

无需手动添加分割符，直接替换 <$BlogItemBody$> 为：

<div class='post-body'>
  <$BlogItemBody$>
</div>
<script type='text/javascript'>
  var postBody = document.querySelector('.post-body');
  if(postBody && !postBody.innerHTML.includes('<!--more-->')){
    var content = postBody.textContent.trim();
    postBody.innerHTML = content.slice(0,200) + '... <a href="<$BlogItemPermalink$>">阅读全文</a>';
  }
</script>

二、添加文章缩略图展示 #

从文章内容提取第一张图片作为缩略图，在文章循环模块（<Blogger> 标签内）、标题前插入：

<div class='post-thumb'>
  <script type='text/javascript'>
    var parentPost = document.currentScript.parentElement.parentElement;
    var firstImg = parentPost.querySelector('img');
    if(firstImg){
      document.write('<img src="'+firstImg.src+'" alt="<$BlogItemTitle$>" style="width:150px;height:100px;object-fit:cover;">');
    }else{
      // 替换为你的默认缩略图地址
      document.write('<img src="https://example.com/default-thumb.jpg" alt="无缩略图" style="width:150px;height:100px;background:#f5f5f5;">');
    }
  </script>
</div>

调整样式中的宽高适配你的布局。

三、修复特色文章显示完整内容问题 #

找到主题中标记特色文章的代码（通常含 class='featured-post'）：

• 将特色文章的内容输出标签替换为上述摘要生成代码；
• 删除针对特色文章强制显示完整内容的CSS/脚本规则。

内容的提问来源于stack exchange，提问作者Dev