Blogger 小工具：用動態消息與程式碼顯示最新文章與留言

經營部落格或資訊類網站，為了吸引訪客瀏覽點閱，通常會在本文內容以外的區域展示文章連結，如最新、隨機和相關文章等。使用 Blogger 平台建立網站，官方主題（網站版型）並未設置展示文章工具，即使在版面配置的小工具中也僅有熱門文章。若要顯示新發布的文章清單則要自行添加 HTML 或安裝第三方工具。

雖然 Blogger 官方提供的小工具中沒有「最新文章」，但有一個「動態消息」可用來替代。只要輸入文章或留言的 Feed URL，就能在網誌上顯示最新文章或最新回應。不過，這個小工具僅能顯示 5 則內容，而且樣式相當簡潔。

Blogger Feed 網址：

文章－https://部落格網址/feeds/posts/default

回應－https://部落格網址/feeds/comments/default

此外，還可透過 Blogger Feed API 取得最新文章或留言的資料（JSON 格式），再利用 JavaScript 整理並輸出為 HTML 元素。下面將分享兩個程式碼，新增小工具並貼上程式碼，即可在 Blogger 網站上展示最新文章或最新回應清單。

操作說明：

1、進入 Blogger 後台的「版面配置」頁面， 點擊「新增小工具」選擇「動態消息」。

2、新增「動態消息」要先輸入網址（如 http://本站/feeds/posts/defaul）再點擊「繼續」，接著可選擇顯示數量、日期和作者，按下「儲存」即可展示最新文章或回應。

3、如下圖所示，右側是利用「動態消息」小工具展示最新文章、回應清單，只是樣式過於簡潔。

Blogger 最新文章程式碼：

<style>
#latest-posts img {
  float: left;
  margin-right: 10px;
  width: 80px;
  height: 60px;
  object-fit: cover;
}
ul#latest-posts { list-style: none; padding: 0; }
#latest-posts li { margin-bottom: 10px; display: flex; align-items: center; }
#latest-posts a { color: #000; text-decoration: none; } 
#latest-posts a:hover { color: #3f00ff; } 
.latest-summary { display: block; }
</style>

<ul id="latest-posts"></ul>

<script>
(async function() {
  const latestPostsNumber = 10; // 顯示文章數量
  const feedUrl = `/feeds/posts/default?alt=json&max-results=${latestPostsNumber}`;
  const list = document.getElementById('latest-posts');

  try {
    const res = await fetch(feedUrl);
    const data = await res.json();
    const entries = data.feed.entry || [];

    list.innerHTML = "";
    entries.forEach(entry => {
      const title = entry.title.$t;
      const link = entry.link.find(l => l.rel === 'alternate').href;
      const thumb = entry.media$thumbnail ? entry.media$thumbnail.url : null;

      const li = document.createElement('li');
      li.innerHTML = `
        ${thumb ? `<img src="${thumb}" alt="${title}"/>` : ''}
        <div><a href="${link}" rel="nofollow">${title}</a></div>
      `;
      list.appendChild(li);
    });

  } catch (e) {
  console.error("抓取文章失敗:", e);
  }
})();
</script>

Blogger 最新回應程式碼：

<style>
#latest-comments { list-style: none; padding: 0; }
#latest-comments li { margin-bottom: 10px; padding: 5px 0; border-bottom: 1px solid #eee; }
#latest-comments .comment-author { font-weight: bold; margin-right: 5px; }
#latest-comments .comment-date { font-size: 0.85em; color: #999; margin-left: 3px; }
#latest-comments .comment-snippet { color: #555; display: block; margin-top: 2px; }
</style>

<ul id="latest-comments"></ul>

<script>
(async function() {
  const latestCommentsNumber = 10; // 顯示留言數量
  const feedUrl = `/feeds/comments/default?alt=json&max-results=${latestCommentsNumber}`;
  const list = document.getElementById('latest-comments');

  try {
    const res = await fetch(feedUrl);
    const data = await res.json();
    const entries = data.feed.entry || [];

    entries.forEach(entry => {
      const author = entry.author[0].name.$t;
      const content = entry.content.$t;
      const snippet = content.length > 40 ? content.substring(0, 40) + "…" : content;  // 數值 40 可調整顯示的留言字元數

      const commentLink = entry.link.find(l => l.rel === "alternate").href;

      const date = new Date(entry.published.$t);
      const formattedDate = `${date.getFullYear()}/${('0'+(date.getMonth()+1)).slice(-2)}/${('0'+date.getDate()).slice(-2)}`;

      const li = document.createElement('li');
      li.innerHTML = `<span class="comment-author">${author}</span>
                      <span class="comment-date">（<a href="${commentLink}" target="_blank">${formattedDate}</a>）</span>
                      <span class="comment-snippet">${snippet}</span>`;
      list.appendChild(li);
    });

  } catch (e) {
  console.error("抓取留言失敗:", e);
  }
})();
</script>

4、同樣在版面配置中點擊「新增小工具」，選擇「HTML/JavaScript」並在內容欄位貼上程式碼，按下「儲存」即可展示最新文章或回應。

5、程式碼的效果如下圖，最新文章會看到縮略圖+標題，最新回應則是名稱、時間（附帶連結）和部分內容。預設會顯示 10 則內容，可以自行修改數值。

6、程式碼的前面部分是用來指定圖片、文字樣式，可以依照喜好自行調整，或是將之刪除直接套用既有主題樣式，此外，調整顯示數量處有附加註解。

相關文章：

• Blogger 基本操作：文章頁面自訂適合的永久連結
• Blogger 隨機文章程式碼：在側邊欄展示文章清單
• Blogger 後台管理，利用搜尋運算子快速尋找文章
• Blogger 批量管理文章標籤，一次套用/移除多標籤
• Blogger 移除 #more Jump Link 繼續閱讀不會跳轉

內容更新：本文於 2025 年 8 月重新撰寫，程式碼由 ChatGPT 協助生成。