02_転載-Replit デプロイ Memos & Butterfly Memos に基づく実装リスト機能

2023/06/01 更新#

最近 Replit の Repl に回復現象が発生し、最新の変更操作が失われました。まるで uptimekumaonreplit のリポジトリ管理者が言及したように、「Replit は少し遅く、回復するようで、データベースが多くの不一致を引き起こす。適当に使ってください 20220430」とのことです。回復現象についてはまだ解決策を見つけていません。

参考リンク#

Atticus：replit 無料デプロイ memos（この記事は転載です）
Leonus：Memos に基づくつぶやきとリスト機能の実装（この記事は転載ですリスト部分）
Leonus：memos に基づく動的アルバムの実装
Atticus Bilibili 動画：replit 無料デプロイ memos
usememos/memos
Atticus6/memos-on-replit

以下の内容は Atticus、Leonus の記事からの抜粋です。

記事 1. Atticus：replit 無料デプロイ memos#

デプロイ#

デフォルトのプロジェクト名 memos-on-replit を使用してください。そうしないとデプロイできません。

Run On Replit.io
代替アドレス：https://github.com/mycpen/memos-on-replit

言語は Go でなければなりません。

ライセンス#

memos-replit は AGPL-3.0 ライセンスの下でライセンスされたオープンソースソフトウェアです。

免責事項#

本プログラムは無料のオープンソースプロジェクトであり、ネットワークドライブファイルを共有し、ダウンロードや golang の学習を容易にすることを目的としています。使用する際は関連する法律や規則を遵守し、乱用しないでください；

本プログラムは公式 SDK/API を呼び出して実現されており、公式インターフェースに対する破壊的行為はありません；

本プログラムは 302 リダイレクト / トラフィック転送のみを行い、ユーザーデータを傍受、保存、改ざんすることはありません；

本プログラムを使用する前に、アカウントが禁止される、ダウンロード速度制限などのリスクを理解し、負担する必要があります。これらは本プログラムとは無関係です；

侵害がある場合は、メールでご連絡ください。迅速に対応いたします。@ブログ · @GitHub · @Telegram グループ

著作権は： atticus
本文リンク： https://www.iweec.cn/30.htm

記事 2. Leonus：Memos に基づくつぶやきとリスト機能の実装#

実装#

まずは hexo n page xxx を使用してページを作成します。
次に、以下のコードを貼り付け、コメントに従って内容を修正します。

<style>
/* ページ初期化 */
div#page {
    background: none;
    border: 0;
    padding: 0;
}
[data-theme=dark] #twikoo .tk-content,
#twikoo .tk-content {
    padding: 0;
    background: transparent;
}

.tk-comments-container>.tk-comment,
.tk-submit:nth-child(1){
    background: var(--card-bg);
    border: 1px rgba(188, 188, 188, 0.8) solid;
    box-shadow: 0 5px 10px rgb(189 189 189 / 10%);
    transition: all .3s ease-in-out;
    border-radius: 12px;
}

.tk-comments-container>.tk-comment:hover,
.tk-submit:nth-child(1):hover {
    border-color: #6dc3fd;
}

.tk-submit {
    padding: 20px 10px 0;
}

.tk-comments-container>.tk-comment {
    padding: 15px;
}

/* ページ初期化終了 */
div#todolist {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.list_item {
    display: inline-block;
    width: calc(50% - .4rem);
    background: #ffe3dd;
    border-radius: 12px;
    padding: 10px 1rem 1.2rem;
    border: 2px dashed #f7a796;
    --todo-border: 1px solid #f7a796;
    margin-right: 1rem;
    margin-bottom: 1rem;
}
.list_item h3 {
    margin: 0;
    border-bottom: var(--todo-border);
}
.list_item ul {
    font-size: 17px;
    padding: 0 !important;
    margin: 0;
}
 .list_item li{
    margin: 0 !important;
    border-bottom: var(--todo-border);
 }
.list_item li::marker {
  content: none;
}
li.achieve {
    opacity: .8;
    text-decoration: line-through;
}
@media screen and (max-width: 900px) {
  div#todolist {
    margin: 1rem 5px 0;
  }
}
@media screen and (max-width: 768px) {
  .list_item{
    width: 100%;
  }
}
</style>


<div id="todolist"></div>


<script>
// ウォーターフォール関数、気にしないでください
function waterfall(t){function e(t,e){var n=window.getComputedStyle(e);return parseFloat(n["margin"+t])||0}function n(t){return t+"px"}function r(t){return parseFloat(t.style.left)}function o(t){return t.clientWidth}function l(t){return function(t){return parseFloat(t.style.top)}(t)+function(t){return t.clientHeight}(t)+e("Bottom",t)}function i(t){return r(t)+o(t)+e("Right",t)}function u(t){t=t.sort((function(t,e){return l(t)===l(e)?r(e)-r(t):l(e)-l(t)}))}function a(e){o(t)!=h&&(e.target.removeEventListener(e.type,arguments.callee),waterfall(t))}"string"==typeof t&&(t=document.querySelector(t));var s=[].map.call(t.children,(function(t){return t.style.position="absolute",t}));t.style.position="relative";var f=[];s.length&&(s[0].style.top="0px",s[0].style.left=n(e("Left",s[0])),f.push(s[0]));for(var p=1;p<s.length;p++){var c=s[p-1],y=s[p];if(!(i(c)+o(y)<=o(t)))break;y.style.top=c.style.top,y.style.left=n(i(c)+e("Left",y)),f.push(y)}for(;p<s.length;p++){u(f);y=s[p];var d=f.pop();y.style.top=n(l(d)+e("Top",y)),y.style.left=n(r(d)),f.push(y)}u(f);var v=f[0];t.style.height=n(l(v));var h=o(t);window.addEventListener?window.addEventListener("resize",a):document.body.onresize=a}

// リスト関数
todolist();
function todolist() {
    fetch('https://あなたのmemosアドレス/api/memo?creatorId=1&tag=リスト').then(res => res.json()).then(data => { // リンクを置き換えることに注意
        // データを取得して処理する
        data = data.data
        let box = document.getElementById('todolist')
        data.forEach(item => {
            // データを処理する
            let content = item.content,
                title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/,'$1');
            // 不要な内容を削除し、リスト内容を置き換える
            content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);
            // データをレンダリングする
            let div = document.createElement('div');
            div.className = 'list_item';
            div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;
            box.appendChild(div);
        });
        waterfall('#todolist');
    }).catch()
}
</script>

使用#

使用するフォーマットは以下の通りです：

#リスト [行きたい場所]
- [ ] 笑顔のミッキーの家（笑顔で私を加えた）
- [x] 完了したリスト

注意してください、前の #リスト は固定です。タイトルは中括弧で囲んでください。完了したものは括弧内の空白を x に変更するだけです。

記事作者: Leonus
記事リンク: https://blog.leonus.cn/2023/memeos.html