给主页添加一个轮播memos动态

keyle_xiao · 2024年11月25日

常来我博客逛的朋友们应该都注意过，我的左上角有个寄语。如下图：

我在想有没有一种可能直接拉取Memos的数据，从而动态去取呢。
反正是用js的写起来，测起来都很方便。
随后花了半小时，写了个脚本，看起来它运作的不错。
顺便让豆包给了段样式，做了淡入淡出。
有需要的朋友可以自取，注意下版本号,由于是js拉取的，所以你在本地建一个html也可以进行测试。

以下Memos的API版本为：Version: v0.22.4

网页部分

<!DOCTYPE html>
<html lang="en">
<script src="./a.js"></script>

<body>
  <div id="description">
    <a>最近在搜寻有趣博客中...</a>
  </div>
</body>

</html>

js脚本

String.format = function () {
    if (arguments.length == 0)
      return null;
    var str = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
      var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
      str = str.replace(re, arguments[i]);
    }
    return str;
  }


  let data = {}
  let index = 0

  function refreshContentInterval() {
    if (index >= 4) index = 0;
    index++;
    var firstData = data[index]
    var result = firstData.snippet;
    if (result.length > 30) {
        result = result.slice(0, 30) + "...";
    }
    let post_index = "改成转跳的页面";
    const descriptionDiv = document.getElementById('description');
    descriptionDiv.innerHTML = '';
    const aTag = document.createElement('a');

    aTag.textContent = result;
    aTag.href = post_index;
    aTag.id = "fading-a"
    descriptionDiv.appendChild(aTag);
  }

  function showFirstContent() {
    var bbUrl = "https://你的memos域名/api/v1/memos?filter=creator=='users/1'&&visibilities=='PUBLIC'&&pageSize=5";
    fetch(bbUrl).then(res => res.json()).then(resdata => {
      data = resdata.memos;

      refreshContentInterval();
      setInterval(refreshContentInterval, 3000);
    });
  }

  
// 当页面加载完成后执行的函数
window.onload = function () {
    showFirstContent();
}

css样式

/* 定义要添加淡入淡出效果的a标签样式 */
a#fading-a {
  opacity: 0; /* 初始设置为完全透明 */
  animation: fadeInOut 3s ease-in-out infinite; /* 应用淡入淡出动画，持续时间3s，缓动效果为ease-in-out，无限循环 */
}

/* 定义淡入淡出动画关键帧 */
@keyframes fadeInOut {
  0% {
    opacity: 0; /* 开始时完全透明 */
  }

  30% {
    opacity: 1; /* 中间达到完全不透明 */
  }

  80% {
    opacity: 1; /* 中间达到完全不透明 */
  }

  100% {
    opacity: 0; /* 结束时又回到完全透明 */
  }
}

以上，晚饭后半小时的摸鱼杰作。