利用 memos 生成的線上動態列表

memos 是一個具有知識管理和社交功能的開源自托管備忘錄中心。

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

可以用它本身提供的 api，然後結合靜態博客，做成一個在線的動態列表，類似於朋友圈功能。

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

其次我又寫了兩個方法，一個是時間戳轉成正常時間格式，一個是利用正則刪去內容中多餘的標籤。

將下面代碼複製到你想顯示的頁面編輯，只需修改 openId，提供了一個基礎的樣式，如果有其他優化方案，歡迎指出。

由於接口中帶了用戶密鑰，建議完成代碼後將 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();