需將網站更新即時同步到另一站點？RSS 是標準方案。但 JS 直接解析 XML 跨域又麻煩。Yahoo Pipes 提供 RSS → JSON 轉換，配合 jQuery getJSON()，輕鬆實現跨域數據獲取與渲染。

步驟 1：Yahoo Pipes 建立 RSS→JSON 管道

1. 登入 pipes.yahoo.com，Create a Pipe
2. 左側 Sources → Fetch Feed，輸入 RSS 源地址
3. 連線 Fetch Feed → Pipe Output
4. Save → Run Pipe → Publish → 複製 Get as JSON 的 URL

此 JSON 會隨 RSS 更新自動同步，無需維護。

步驟 2：jQuery 解析並渲染

HTML 骨架：

<div id="rssdata">
  <ul class="rss-items"></ul>
  <div class="loading">Loading RSS items...</div>
</div>

jQuery 腳本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$('#rssdata').ready(function() {
  var pipe_url = 'https://pipes.yahoo.com/pipes/pipe.run?_id=YOUR_PIPE_ID&_render=json&_callback=?';
  $.getJSON(pipe_url, function(data) {
    $(data.value.items).each(function(index, item) {
      var html = '<li><a href="' + item.link + '">' + item.title + '</a></li>';
      $('#rssdata ul.rss-items').append(html);
    });
    $('#rssdata div.loading').fadeOut();
    $('#rssdata ul.rss-items').slideDown();
  });
});
</script>

關鍵點說明

• &_callback=?：觸發 jQuery JSONP 跨域機制
• data.value.items：Yahoo Pipes JSON 固定結構
• 載入動態：fadeOut loading + slideDown 列表
• 樣式自定：按需撰寫 CSS 美化

優勢總結： 無後端代碼、無跨域煩惱、自動同步、極輕量。適合側邊欄、儀表板、靜態站點嵌入動態內容等場景。