如何从Blogger Feed中提取文章标题、图片、内容及链接？

没问题，我来帮你调整代码，让它能完整提取Blogger Atom Feed里的核心内容。首先得先明确Blogger的Atom Feed中，每篇文章（<entry>节点）对应的关键信息位置：

• 文章标题：<entry>下的<title>文本
• 原文链接：<entry>下<link rel="alternate">的href属性
• 文章内容：<entry>下<content type="html">的HTML内容
• 封面/内容图片：两种获取方式——优先从<media:content>节点取（部分博客会提供），否则从<content>的HTML里提取第一张<img>

下面是修改后的完整代码，每一步的提取逻辑都加了注释：

// 替换成你的Blogger ID和想要获取的文章数量
const bloggerID = "你的博客ID";
const maxResults = 5;
const feedUrl = `https://www.blogger.com/feeds/${bloggerID}/posts/default?max-results=${maxResults}`;

const xhr = new XMLHttpRequest();
xhr.open('GET', feedUrl, true);
xhr.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    const xmlDoc = this.responseXML;
    // 获取所有文章节点
    const entries = xmlDoc.getElementsByTagName('entry');
    
    // 遍历每篇文章提取信息
    for (let i = 0; i < entries.length; i++) {
      const entry = entries[i];
      
      // 1. 提取文章标题
      const title = entry.getElementsByTagName('title')[0].textContent;
      
      // 2. 提取原文链接（筛选rel="alternate"的link节点）
      let postLink = '';
      const links = entry.getElementsByTagName('link');
      for (let j = 0; j < links.length; j++) {
        if (links[j].getAttribute('rel') === 'alternate') {
          postLink = links[j].getAttribute('href');
          break;
        }
      }
      
      // 3. 提取文章HTML内容
      const content = entry.getElementsByTagName('content')[0].textContent;
      
      // 4. 提取图片：先尝试从media命名空间节点取，失败则从内容HTML里抓第一张图
      let postImage = '';
      // 处理media:content的命名空间限制
      const mediaContents = xmlDoc.getElementsByTagNameNS('http://search.yahoo.com/mrss/', 'content');
      if (mediaContents.length > i) {
        postImage = mediaContents[i].getAttribute('url');
      } else {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = content;
        const firstImg = tempDiv.querySelector('img');
        if (firstImg) postImage = firstImg.src;
      }
      
      // 把提取到的内容渲染到页面上
      renderPost(title, postLink, content, postImage);
    }
  } else {
    console.error('Feed请求失败，状态码：', this.status);
  }
};

xhr.onerror = function() {
  console.error('请求Feed时发生网络错误');
};

xhr.send();

// 辅助渲染函数：把文章内容插入到页面容器
function renderPost(title, link, content, image) {
  const postContainer = document.createElement('div');
  postContainer.className = 'blog-post';
  
  // 插入图片（如果存在）
  if (image) {
    const img = document.createElement('img');
    img.src = image;
    img.alt = title;
    postContainer.appendChild(img);
  }
  
  // 插入标题和跳转链接
  const titleEl = document.createElement('h3');
  const linkEl = document.createElement('a');
  linkEl.href = link;
  linkEl.textContent = title;
  titleEl.appendChild(linkEl);
  postContainer.appendChild(titleEl);
  
  // 插入文章摘要（截取前300字符避免页面过长）
  const contentEl = document.createElement('div');
  contentEl.className = 'post-content';
  contentEl.innerHTML = content.substring(0, 300) + '...';
  postContainer.appendChild(contentEl);
  
  // 把文章块添加到页面的指定容器（需要提前在HTML里加id="blog-feed"的元素）
  document.getElementById('blog-feed').appendChild(postContainer);
}

几个关键细节提醒： #

• 命名空间问题：media:content属于第三方命名空间，必须用getElementsByNS才能正确获取，不能直接用getElementsByTagName
• 跨域限制：如果你的页面是本地打开（file://协议）或和Blogger域名不同，可能会触发CORS错误。这种情况可以改用后端代理Feed，或者用Blogger的JSONP接口（在Feed链接后加?alt=json-in-script&callback=你的回调函数）
• 内容优化：直接输出完整文章内容可能会让页面臃肿，建议像代码里那样截取摘要，或者添加展开/收起按钮

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