Blogger：打造 RSS 新聞跑馬燈 (附完整程式碼)

by網站開發 -
JavaScript 教學：如何用純 JS 與 CSS 打造 RSS 新聞跑馬燈 (附完整程式碼) | CCC Blog

網站動起來！3 步驟用純 JS 打造酷炫的 RSS 新聞跑馬燈 (附完整程式碼)

電腦螢幕上顯示著流動的程式碼，象徵動態網頁與前端開發。

在網頁設計中，新聞跑馬燈 (News Marquee) 是一個非常實用且常見的功能，它可以在有限的空間內動態展示最新的新聞標題、網站公告或任何來自 RSS Feed 的資訊。這不僅能讓頁面看起來更具動感，也能有效地吸引訪客的注意力。

本篇教學將提供一套完整的標準作業流程 (SOP)，引導您如何使用 HTML、CSS 和純 JavaScript (Vanilla JavaScript) 打造一個具備現代感、光束動畫效果且能自動抓取 RSS Feed 的新聞跑馬燈。

功能特色

  • RSS Feed 整合： 自動從指定的 RSS 來源抓取最新資訊。
  • 純 CSS 動畫： 使用 CSS Keyframes 實現流暢的滾動效果，滑鼠懸停時會自動暫停。
  • 光束邊框效果： 透過 CSS 偽元素製作動態的漸層光束，增添科技感。
  • 高度客製化： 您可以輕鬆修改 RSS 來源、顯示項目數量和滾動速度。
  • 無需 jQuery： 使用原生的 Fetch API，程式碼更輕量、更現代。

實作三步驟

整個實作過程可以分為三個主要部分：HTML 結構、CSS 樣式設計和 JavaScript 功能邏輯。

步驟一：放置 HTML 結構

首先，我們需要一個 HTML 容器來放置跑馬燈。結構非常簡單，只需要一個 <div> 元素。您可以將這段程式碼放置在任何您想顯示跑馬燈的位置（例如 Blogger 的「HTML/JavaScript」小工具中）。

<div id="rss-marquee-container-v5" class="rss-marquee-container-v5">
  <div class="feed-status-v5">新聞跑馬燈載入中...</div>
</div>

步驟二：加入 CSS 樣式

CSS 是賦予跑馬燈外觀和動態效果的關鍵。這段程式碼包含了外框樣式、光束動畫以及滾動效果的定義。請將這段 CSS 加入到您網站的樣式表中（例如 Blogger 的「主題」>「自訂」>「進階」>「新增 CSS」）。

/* 跑馬燈外框 */
.rss-marquee-container-v5 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fff;
  border: 2px solid #ddd;
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}
/* 光束動畫 (使用偽元素) */
.rss-marquee-container-v5::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(90deg,
      rgba(182, 145, 255, 0.8),
      rgba(182, 145, 255, 0.2),
      rgba(182, 145, 255, 0.8),
      rgba(182, 145, 255, 0.2),
      rgba(182, 145, 255, 0.8)
  );
  border-radius: 8px;
  z-index: -1;
  animation: border-shine-v5 5s linear infinite;
}
/* 跑馬燈內容 */
.rss-marquee-content-v5 {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-animation-v5 linear infinite;
}
.rss-marquee-container-v5:hover .rss-marquee-content-v5 {
  animation-play-state: paused;
}
/* 單則新聞項目 */
.rss-marquee-item-v5 {
  display: inline-block;
  margin: 0 25px;
}
.rss-marquee-item-v5 a {
  text-decoration: none;
  color: #1c1e21;
  font-size: 15px;
  font-weight: 500;
}
.rss-marquee-item-v5 a:hover {
  color: #5a3a99;
}
/* 日期樣式 */
.rss-item-date-v5 {
  color: #606770;
  font-size: 13px;
  margin-right: 8px;
}
/* 載入中/錯誤訊息 */
.feed-status-v5 {
  padding: 0 15px;
  color: #888;
  font-style: italic;
}
@keyframes marquee-animation-v5 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes border-shine-v5 {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

步驟三：注入 JavaScript 功能與客製化

JavaScript 負責抓取 RSS Feed 內容，並將其動態地生成到我們的 HTML 容器中。我們透過一個免費的第三方服務 rss2json.com 將 RSS 轉換為易於處理的 JSON 格式。

請將以下程式碼同樣放置在 HTML 容器的下方（例如 Blogger 的「HTML/JavaScript」小工具中，放在 HTML 結構的後面）。

<script>
// 等待整個 HTML 文件被載入和解析完成後再執行
document.addEventListener('DOMContentLoaded', function() {
  (function() {
    // --- 您可以在這裡修改設定 ---
    const rssUrl = "https://news.cnyes.com/rss/v1/news/category/headline"; // RSS Feed 來源網址
    const maxItems = 15; // 顯示的新聞最大數量
    const animationDurationMultiplier = 8; // 動畫時間乘數 (數字越大，滾動越慢)
    // --- 設定結束 ---

    const container = document.getElementById('rss-marquee-container-v5');
    if (!container) {
      console.error("Marquee container not found.");
      return;
    }
    const statusDiv = container.querySelector('.feed-status-v5');

    // 使用 rss2json API 將 RSS 轉換為 JSON
    const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`;

    fetch(apiUrl)
      .then(response => response.json())
      .then(data => {
        if (data.status === 'ok') {
          statusDiv.style.display = 'none'; // 隱藏載入訊息
          const marqueeContent = document.createElement('div');
          marqueeContent.className = 'rss-marquee-content-v5';
          
          const items = data.items.slice(0, maxItems);
          items.forEach(item => {
            const itemElement = document.createElement('div');
            itemElement.className = 'rss-marquee-item-v5';

            const itemDate = new Date(item.pubDate);
            const formattedDate = `${itemDate.getFullYear()}/${(itemDate.getMonth() + 1).toString().padStart(2, '0')}/${itemDate.getDate().toString().padStart(2, '0')}`;

            itemElement.innerHTML = `<span class="rss-item-date-v5">${formattedDate}</span><a href="${item.link}" target="_blank" rel="noopener noreferrer">${item.title}</a>`;
            marqueeContent.appendChild(itemElement);
          });
          
          container.appendChild(marqueeContent);
          
          // 動態設定動畫時間
          const totalWidth = marqueeContent.offsetWidth;
          const animationDuration = totalWidth / 100 * animationDurationMultiplier;
          marqueeContent.style.animationDuration = `${animationDuration}s`;

        } else {
          statusDiv.textContent = '無法載入 RSS Feed。請檢查來源網址或稍後再試。';
          console.error("RSS Feed Error:", data.message);
        }
      })
      .catch(error => {
        statusDiv.textContent = '載入時發生網路錯誤。';
        console.error('Fetch Error:', error);
      });
  })();
});
</script>

客製化你的跑馬燈

這個跑馬燈最強大的地方在於它的彈性。您只需要修改上方 JavaScript 程式碼開頭的三個常數，就能輕鬆改變它的行為與內容。

1. 更換 RSS Feed 來源

最重要的客製化選項就是更換資訊來源。您只需要修改 rssUrl 這個常數的值即可。

台灣常用 RSS Feed 範例：

  • 綜合新聞媒體
    • 中央社 CNA： https://www.cna.com.tw/rss/newscategory.aspx
    • 聯合新聞網 UDN： https://udn.com/rss/news/2/6638
    • 自由時報 LTN： https://news.ltn.com.tw/rss/all.xml
    • 風傳媒： https://www.storm.mg/rss
    • ETtoday 新聞雲： https://www.ettoday.net/events/rss/focus.xml
  • 財經商業
    • 鉅亨網 Anue (頭條)： https://news.cnyes.com/rss/v1/news/category/headline
    • 鉅亨網 Anue (台股)： https://news.cnyes.com/rss/v1/news/category/tw_stock
    • 經濟日報 (產經)： https://money.udn.com/rss/news/1001/5591/122111
    • 工商時報 (財經要聞)： https://ctee.com.tw/feed
    • 今周刊 (熱門文章)： https://www.businesstoday.com.tw/rss
  • 科技媒體與部落格
    • 科技新報 TechNews： https://technews.tw/feed/
    • iThome (全部文章)： https://www.ithome.com.tw/rss
    • 數位時代： https://www.bnext.com.tw/rss
    • 電腦玩物： https://www.playpcesor.com/feeds/posts/default
    • INSIDE 硬塞的網路趨勢觀察： https://www.inside.com.tw/feed
  • 生活、旅遊與藝文
    • 食力 foodNEXT： https://www.foodnext.net/rss
    • Shopping Design： https://www.shoppingdesign.com.tw/rss
    • MOT TIMES 明日誌： https://www.motstyle.com.tw/rss
    • 旅遊滔客： https://travel.talk.tw/feed
    • 微笑台灣 (天下雜誌)： https://smiletaiwan.cw.com.tw/rss
  • 獨立媒體與觀點
    • 關鍵評論網 The News Lens： https://www.thenewslens.com/feed/
    • 報導者 The Reporter： https://www.twreporter.org/a/rss2.xml
    • 上下游 News&Market： https://www.newsmarket.com.tw/feed/
    • 轉角國際 (UDN)： https://global.udn.com/rss/news/1020/8662
  • 政府公開資訊
    • 行政院 (新聞稿)： https://www.ey.gov.tw/RSS.aspx?n=864694469B5910A4
    • 衛生福利部 (即時新聞澄清)： https://www.mohw.gov.tw/rss-16-1.html
    • 數位發展部 (新聞稿)： https://moda.gov.tw/RSS.aspx?n=106&s=120

2. 調整顯示數量與速度

  • maxItems: 您希望在跑馬燈中顯示的新聞最大數量。
  • animationDurationMultiplier: 動畫時間乘數。這個數字越大，跑馬燈滾動得越慢。
Tags

你可能會喜歡這些文章

較新的 較舊