利用 memos 生成的在线动态列表

子舒

发布于 2023-08-23 06:33:53

37400

代码可运行

文章被收录于专栏：子舒的个人博客子舒的个人博客

运行总次数：0

代码可运行

memos 是一个具有知识管理和社交功能的开源自托管备忘录中心。

Github地址：https://github.com/usememos/memos

可以用它本身提供的 api，然后结合静态博客，做成一个在线的动态列表，类似于朋友圈功能。

接口 url 有固定的格式，openId 是每个用户自动生成的。

其次我又写了两个方法，一个是时间戳转成正常时间格式，一个是利用正则删去内容中多余的标签。

将下面代码复制到你想显示的页面编辑，只需修改 openId，提供了一个基础的样式，如果有其他优化方案，欢迎指出。

由于接口中带了用户密钥，建议完成代码后将js加密再引入，不然可能会有一定的安全风险。

推荐网址: https://tool.lu/js/

<!-- 结构和css -->
<div class="sslist"></div>

<style>
.sslist-item {
  padding: 10px 10px 20px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: #f3f3f3;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
  transition: all 0.2s linear;
  animation: up 1s forwards;
  transform: translateY(20px);
  opacity: 0;
}

@keyframes up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.sslist-item:hover {
  background: #eee;
}

.sslist-item .sslist-date {
  opacity: 0.6;
  margin: 0;
  font-size: 15px;
  margin-bottom: 5px;
}
</style>

// 调用接口的js方法
function memosShow() {
  var memosStr = "";
  var openId = "xxx";
  $.ajax({
    url: "https://memos.zburu.com/api/memo?openId=" + openId + "&tag=说说",
    type: "get",
    dataType: "json",
    success: function (data) {
      // 生成数组
      const sslist = data.data;

      for (let i = 0; i < sslist.length; i++) {
        const element = sslist[i];

        // 把时间戳转为正常时间格式 2023-01-9 13:17:12
        var date = new Date(element.createdTs * 1000);
        Y = date.getFullYear() + "-";
        M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        h = date.getHours() + ":";
        m = date.getMinutes() + ":";
        s = date.getSeconds();
        const createdTsNew = Y + M + D + h + m + s;
        sslist[i].createdTs = createdTsNew;

        // 利用js正则删去内容前的标签字符
        const contentNew = element.content.slice(4);
        sslist[i].content = contentNew;
      }

      $.each(data.data, function (i, item) {
        list =
          "<div class='sslist-item'>" +
          "<p class='sslist-date'>" +
          item.createdTs +
          "</p>" +
          item.content +
          "</div>";
        memosStr += list;
      }),
        $(".sslist").html(memosStr);
    },
    error: function () {
      console.log("error");
    }
  });
}
memosShow();