如何使用Svelte读取并渲染Atom Feed？

1. 获取Feed数据 #

直接用浏览器原生的fetch API发起请求就行，在Svelte组件的onMount钩子（或者组件初始化阶段）执行：

<script>
  import { onMount } from 'svelte';
  let feedItems = [];

  onMount(async () => {
    try {
      const response = await fetch('你的Atom Feed地址');
      const xmlText = await response.text();
      // 下一步解析xmlText
    } catch (err) {
      console.error('获取Feed失败:', err);
    }
  });
</script>

2. 解析XML格式的Atom Feed #

浏览器自带DOMParser工具，能直接解析XML字符串，提取你需要的字段（比如标题、链接、发布时间等）：

// 接上面的代码，拿到xmlText后执行
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
const entries = xmlDoc.querySelectorAll('entry');

feedItems = Array.from(entries).map(entry => ({
  title: entry.querySelector('title').textContent,
  link: entry.querySelector('link').getAttribute('href'),
  published: entry.querySelector('published').textContent,
  summary: entry.querySelector('summary')?.textContent || ''
}));

注意：不同Atom Feed的节点结构可能略有差异，比如有的用content代替summary，需要根据实际返回的XML调整选择器。

3. 渲染Feed内容到页面 #

把解析好的feedItems用Svelte的{#each}循环渲染成页面元素：

{#if feedItems.length}
  <ul class="feed-list">
    {#each feedItems as item}
      <li class="feed-item">
        <a href={item.link} target="_blank" rel="noopener noreferrer">
          <h3>{item.title}</h3>
        </a>
        <p class="date">{new Date(item.published).toLocaleDateString()}</p>
        {#if item.summary}
          <p class="summary">{item.summary}</p>
        {/if}
      </li>
    {/each}
  </ul>
{:else}
  <p>加载中...</p>
{/if}

额外注意 #

• 跨域问题：如果目标Feed服务器没配置CORS，浏览器会拦截请求。用SvelteKit的话，可以写个+server.js代理接口，在服务器端发起请求（服务器端不受跨域限制）；纯前端项目则需要自己搭简单后端代理或用第三方代理服务。
• 兼容性：部分Feed可能有自定义扩展节点，解析时要对应调整节点选择器。

内容的提问来源于stack exchange，提问作者Eric B.