利用 memos 生成的オンライン動的リスト

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

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

それ自体が提供する API を使用し、静的ブログと組み合わせて、オンラインの動的リストを作成できます。これは、友達のタイムライン機能に似ています。

インターフェースの URL は固定の形式で、openId は各ユーザーに自動生成されます。

次に、2 つのメソッドを作成しました。1 つはタイムスタンプを通常の時間形式に変換するもので、もう 1 つは正規表現を利用して内容から余分なタグを削除するものです。

以下のコードを表示したいページにコピーし、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();