查看博客友链最新更新了什么?

这是对 https://dev.oneall.eu.org/archives/32/ 的补充
在原有友链基础上增加可选的 rss 选项

支持自动分析 rss 和 atom

// 本人js不好大体是这么个意思
// 使用 https://dev.oneall.eu.org/archives/49/ 跨域请求
function xhrGet(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://dev.oneall.eu.org/netdrive.php/" + url, true);
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(`HTTP Error: ${xhr.status}`));
      }
    };
    xhr.onerror = function () {
      reject(new Error("Network Error"));
    };
    xhr.send();
  });
}

async function putRss(linkItemsArea, rssLinkItems) {
  if (rssLinkItems.length === 0) {
    return;
  }
  linkItemsArea.innerHTML += `<div id="links-rss"><h2>近期更新</h2><ul></ul></div>`;
  const rssItemsArea = linkItemsArea.querySelector("#links-rss ul");
  for (const rssLinkItem of rssLinkItems) {
    xhrGet(rssLinkItem)
      .then((xmlString) => {
        const xmlStringParser = new DOMParser();
        const xmlDoc = xmlStringParser.parseFromString(xmlString, "text/xml");
        atomFeed = xmlDoc.getElementsByTagName("feed");
        rssFeed = xmlDoc.getElementsByTagName("rss");
        if (atomFeed.length > 0) {
          const blogName =
            atomFeed[0].getElementsByTagName("title")[0].textContent;
          rssItemsArea.innerHTML += `<h3>${blogName}:</h3>`;
          const first10Items = [
            ...atomFeed[0].getElementsByTagName("entry"),
          ].slice(0, 10);
          first10Items.forEach((item) => {
            const blog_title =
              item.getElementsByTagName("title")[0].textContent;
            const blog_link = item
              .getElementsByTagName("link")[0]
              .getAttribute("href");
            rssItemsArea.innerHTML += `<li><a href="${blog_link}" target="_blank">${blog_title}</a></li>`;
          });
        } else if (rssFeed.length > 0) {
          const blogName =
            rssFeed[0].getElementsByTagName("title")[0].textContent;
          rssItemsArea.innerHTML += `<h3>${blogName}:</h3>`;
          const first10Items = [
            ...rssFeed[0].getElementsByTagName("item"),
          ].slice(0, 10);
          first10Items.forEach((item) => {
            const blog_title =
              item.getElementsByTagName("title")[0].textContent;
            const blog_link = item.getElementsByTagName("link")[0].textContent;
            rssItemsArea.innerHTML += `<li><a href="${blog_link}" target="_blank">${blog_title}</a></li>`;
          });
        } else {
          console.log("Unknown feed type " + rssLinkItem);
        }
      })
      .catch(() => {});
  }
}

function putLinks(link_json) {
  const linkJson = JSON.parse(link_json);
  const linkItemsArea = document.getElementById("linkItemsArea");
  let linkItemsHTML = "";
  let rssLinkItems = [];
  for (const linkItem of linkJson) {
    linkItemsHTML += `<div class="link-item"><img class="link-item-avatar" src="${linkItem.avatar}"><div class="link-item-content"><a href="${linkItem.url}" target="_blank"><h2>${linkItem.title}</h2></a><p>${linkItem.description}</p></div></div>`;
    if (linkItem.rss) {
      rssLinkItems.push(linkItem.rss);
    }
  }
  linkItemsArea.innerHTML = linkItemsHTML;
  setTimeout(() => putRss(linkItemsArea, rssLinkItems), 0);
}

#linkItemsArea {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media screen and (max-width: 700px) {
  #linkItemsArea {
    grid-template-columns: repeat(1, 1fr);
  }
}

.link-item {
  height: 100px;
  overflow: hidden;
  border: 1px solid gray;
}

.link-item a {
  color: inherit !important;
}

.link-item-avatar {
  float: left;
  width: auto;
  height: auto;
  max-height: 100%;
  margin-right: 10px;
  border-right: 1px solid gray;
}

.link-item-content {
  height: 100%;
}

#linkItemsArea #links-rss {
  grid-column: 1 / -1;
}

效果：异步加载最新 10 篇文章

具体可看：https://dev.oneall.eu.org/links.html（若发现错位就是缓存未失效）