Blogger自定义主题下如何指定首页文章摘要内容？

安全阿岳

2026-8-5

Blogger自定义主题：替换首页文章指定内容为摘要的解决方案

1. 先修复异常的Head标签

你的主题里出现了转义的<head>和</head>，这会导致浏览器无法正确解析头部区域，样式、脚本都无法正常加载。直接把这些代码替换为标准的HTML标签：

<head>
<!-- 主题的头部内容（样式、元标签等）放在这里 -->
</head>

2. 优先使用模板层面修改（最可靠）

不需要前端脚本，直接在主题模板里修改摘要渲染逻辑，优先提取你指定的.post-snippet内容：

找到主题中渲染文章摘要的代码块（通常包含<data:post.snippet/>），替换为以下代码：

<b:if cond='data:post.body contains &quot;post-snippet&quot;'>
  <div class='custom-post-snippet'>
    <data:post.body match='&lt;div class=&quot;post-snippet&quot;&gt;(.*?)&lt;/div&gt;' replace='$1'/>
  </div>
  <style>
    .post-snippet { display: none !important; }
  </style>
<b:else/>
  <data:post.snippet/>
</b:if>

原理：通过Blogger的模板条件判断和正则匹配，直接从文章内容中提取指定区域作为摘要，同时隐藏原始的.post-snippet元素。

3. 前端脚本方案（备用）

如果模板修改有困难，调整脚本的执行时机和选择器，确保匹配你自定义主题的实际元素：

将之前的脚本替换为：

document.addEventListener('DOMContentLoaded', function() {
  // 遍历所有文章条目，确保每个文章都处理
  document.querySelectorAll('.post').forEach(function(postEl) {
    var targetSnippet = postEl.querySelector('.post-snippet');
    var summaryContainer = postEl.querySelector('.post-summary'); // 替换为你主题里的摘要容器类名
    if (targetSnippet && summaryContainer) {
      summaryContainer.innerHTML = targetSnippet.innerHTML;
      targetSnippet.style.display = 'none';
    }
  });
});

注意：post-summary需要替换成你自定义主题中实际承载摘要的元素类名（比如可能是post-body、entry-content等，可通过浏览器开发者工具查看）。

4. 确保样式生效

把隐藏.post-snippet的样式放在主题的<head>内的<style>标签中，而不是零散放在页面里：

.post-snippet {
  display: none !important;
}

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

Blogger自定义主题下如何指定首页文章摘要内容？

1. 先修复异常的Head标签 #

2. 优先使用模板层面修改（最可靠） #

3. 前端脚本方案（备用） #

4. 确保样式生效 #

1. 先修复异常的Head标签

2. 优先使用模板层面修改（最可靠）

3. 前端脚本方案（备用）

4. 确保样式生效