利用memos生成的オンラインダイナミックリスト

memos は、知識管理とソーシャル機能を備えたオープンソースの自己ホストメモセンターです。

Github のアドレス：https://github.com/usememos/memos

それ自体が提供する API を使用して、静的なブログと組み合わせて、フレンドリストのようなオンラインのダイナミックリストを作成することができます。

インターフェース URL は固定の形式を持っており、openId は各ユーザーが自動生成します。

次に、タイムスタンプを通常の時間形式に変換するメソッドと、コンテンツから余分なタグを削除するための正規表現を利用するメソッドを書きました。

以下のコードを表示したいページの編集にコピーしてください。openId を変更するだけで、基本的なスタイルが提供されています。他の最適化案があれば、ご指摘ください。

インターフェースにはユーザーキーが含まれているため、コードを完成させた後に JavaScript を暗号化してからインポートすることをお勧めします。そうしないと、一定のセキュリティリスクが発生する可能性があります。

おすすめのウェブサイト：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>

// インターフェースを呼び出すJavaScriptのメソッド
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];

        // タイムスタンプを通常の時間形式に変換する
        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;

        // コンテンツの前にあるタグ文字を正規表現を利用して削除する
        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();