02_轉載-Replit 部署 Memos & Butterfly 基於 Memos 實現清單功能

2023/06/01 更新#

最近 Replit 的 Repl 出現回檔現象，導致最新變更操作丟失，正如 uptimekumaonreplit 倉庫管理者提到的 Replit有點拉，似乎會回檔，會導致資料庫很多對不上。隨便用用吧20220430，回檔現象我暫未找到解決辦法

參考連結#

以下內容全文摘自 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 / 接口實現，無破壞官方接口行為；

本程序僅做 302 重定向 / 流量轉發，不攔截、存儲、篡改任何用戶數據；

在使用本程序之前，你應了解並承擔相應的風險，包括但不限於帳號被 ban，下載限速等，與本程序無關；

如有侵權，請通過郵件與我聯繫，會及時處理。@博客 · @GitHub · @Telegram 群

版權屬於： atticus
本文鏈接： https://www.iweec.cn/30.htm

文章 2. Leonus：基於 Memos 實現說說和清單功能#

相關連結

以下內容全文摘自 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