<!-- 归档卡片容器（含统一标题与暗黑模式适配） -->
<div class='my-8 p-5 bg-gray-50 dark:bg-surface-gray-dark border border-border-color dark:border-border-color-dark rounded-xl'>
    <h3 class='text-base font-bold mb-4 flex items-center gap-2 border-l-4 border-primary pl-3 text-text-main dark:text-text-main-dark'>
        <span class='material-icons text-primary text-lg'>archive</span> 文章归档
    </h3>

    <div id="blogger-archive-container">
      <span class="text-sm text-gray-500 dark:text-gray-400">文章归档加载中...</span>
    </div>
</div>

<!-- 优化后的 CSS 样式 -->
<style type="text/css">
 .dayStyle { 
  color: #757575;
  display: inline-block;
  width: 4em; 
  text-align: right;
 }
 .dateStyle {
  font-weight: bold;
  margin-top: 10px;
  font-size: 1.1em;
  color: var(--text-main, #2d3748);
 }
 /* 暗黑模式下的归档文字与链接微调 */
 @media (prefers-color-scheme: dark) {
  .dayStyle { color: #9ca3af; }
 }
</style>

<!-- 异步非阻塞的 JavaScript 逻辑 -->
<script type="text/javascript">
// 全局变量，用于按顺序拼接多段 API 返回的数据
var archiveCurrentYear = "";
var archiveCurrentMonth = "";
var archiveTotalHTML = "";
var archiveTotalPosts = 0;

// API 请求列表（分成三次请求以获取最多1500篇文章）
var feedUrls = [
  "/feeds/posts/default?start-index=1&max-results=500&alt=json-in-script&callback=LoadTheArchive",
  "/feeds/posts/default?start-index=501&max-results=500&alt=json-in-script&callback=LoadTheArchive",
  "/feeds/posts/default?start-index=1001&max-results=500&alt=json-in-script&callback=LoadTheArchive"
];
var currentFeedIndex = 0;

// 解析并渲染数据
function LoadTheArchive(TotalFeed) {
  // 检查是否有数据返回
  if (!TotalFeed || !TotalFeed.feed || !TotalFeed.feed.entry) {
    currentFeedIndex++;
    loadNextFeed(); // 数据为空也继续尝试加载下一个
    return;
  }

  var entries = TotalFeed.feed.entry;
  archiveTotalPosts += entries.length;
  var MonthNames = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
  var tempHTML = "";

  // 遍历当前请求获取到的文章
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var pubDate = entry.published.$t;
    
    var year = pubDate.substring(0, 4);
    var month = pubDate.substring(5, 7);
    var day = pubDate.substring(8, 10);
    var url = "";

    // 寻找文章的 URL
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == "alternate") {
        url = entry.link[j].href;
        break;
      }
    }

    var monthName = MonthNames[parseInt(month, 10) - 1];

    // 判断是否需要输出年月标题
    if (archiveCurrentMonth != monthName || archiveCurrentYear != year) {
      archiveCurrentMonth = monthName;
      archiveCurrentYear = year;
      tempHTML += "<div class='dateStyle'><br />" + year + "&nbsp;年&nbsp;" + monthName + "月</div>";
    }

    // 拼接文章行
    tempHTML += "<a href='" + url + "' class='text-text-main dark:text-text-main-dark hover:text-primary dark:hover:text-primary no-underline transition-colors'><div class='dayStyle'>" + parseInt(day, 10) + "&nbsp;日&ensp;</div>" + title + "</a><br />";
  }

  archiveTotalHTML += tempHTML;

  // 将生成好的 HTML 写入容器 (代替会导致卡顿的 document.write)
  var container = document.getElementById('blogger-archive-container');
  if (container) {
    container.innerHTML = "<div class='text-sm text-gray-600 dark:text-gray-300 mb-4'>共计发布了 <b class='text-primary'>" + archiveTotalPosts + "</b> 篇博文</div>" + archiveTotalHTML;
  }

  // 当前数据渲染完毕后，继续请求下一批数据，确保时间顺序不错乱
  currentFeedIndex++;
  loadNextFeed();
}

// 动态创建 script 标签进行异步加载
function loadNextFeed() {
  if (currentFeedIndex < feedUrls.length) {
    var script = document.createElement('script');
    script.src = feedUrls[currentFeedIndex];
    script.async = true; // 强制异步，不阻塞浏览器页面渲染
    document.body.appendChild(script);
  }
}

// 确保网页的 DOM 完全加载后再开始拉取 Blogger 数据
if (window.addEventListener) {
  window.addEventListener('load', loadNextFeed, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', loadNextFeed); // 兼容旧版 IE
} else {
  window.onload = loadNextFeed;
}
</script>