使用Memos API 创建 好物页面

代码来自于网络

步骤

修改https://memos.ee为自己的memos地址 "/api/v1/memo?creatorId=1&limit=" + t + "&tag=好物"中creatorId=1改为自己的ID tag=好物使用自己的tag

memos中格式如下

#好物 
![名称,品牌](图片链接)
[简介](商品链接)

好物后面有空格,并回车

引入以下代码

<style>
.goods-item {
    text-align: center;
    position: relative;
    border-radius: .33rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: var(--light-background-secondary)
}

.dark-theme .goods-item {
    background-color: var(--dark-background-secondary)
}

.goods-item:hover .item-album img {
    transform: translateY(-4px)
}

.goods-item .item-album {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 0;
    width: 100%;
    border-radius: .33rem;
    -ms-flex-negative: 0;
    justify-content: center;
    align-items: center
}

.goods-item .item-album img {
    position: absolute;
    width: 75%;
    height: 75%;
    transition: transform .2s ease-in-out;
    flex: 1
}

.goods-item .item-album::after {
    display: block;
    padding-top: 100%;
    content: ''
}

.goods-item .item-note {
    overflow: hidden;
    height: calc(1em * 3 * 1.5)
}

.goods-item .item-brand,
.goods-item .item-note {
    color: var(--light-color-secondary)
}

.dark-theme .goods-item .item-brand,
.dark-theme .goods-item .item-note {
    color: var(--dark-color-secondary)
}
</style>
<link rel="stylesheet" href="https://blogcdn.loliko.cn/memos/goods/bootstrap.css">
<div id=goods class="d-flex flex-column">
<div class="goods row flex-fill"></div>
</div> 

<script>
document.addEventListener("DOMContentLoaded", ()=>{
    memoGoods()
}
);
function memoGoods(e) {
    let t = e || 12;
    var n = "https://memos.ee"
      , s = n + "/api/v1/memo?creatorId=1&limit=" + t + "&tag=好物";
    let i = 1;
    const o = /\n/;
    fetch(s).then(e=>e.json()).then(e=>{
        for (var t, s, i, a, d, u, h, m, f, p, g, c = "", l = "", r = e, n = 0; n < r.length; n++)
            a = r[n].content.replace(`#好物 \n`, ""),
            t = a.split(o),
            i = t[0].replace(/!\[.*?\]\((.*?)\)/g, "$1"),
            s = t[0].replace(/!\[(.*?)\]\(.*?\)/g, "$1"),
            d = s.split(",")[0],
            u = s.split(",")[1],
            h = t[1].replace(/\[.*?\]\((.*?)\)/g, "$1"), 
            m = t[1].replace(/\[(.*?)\]\(.*?\)/g, "$1"),
            c += '<div class="col-6 col-md-4 mb-3"><div class="goods-item p-3"><div class="item-album mb-2"><img loading="lazy" decoding="async" src="' + i + '"></div><div class="item-content"><div class="item-brand text-xs mb-1">' + d + '</div><div class="item-title"><h3><a href="' + h + '" target="_blank">' + u + '</a></h3></div> <div class="item-note mt-2">' + m + "</div></div></div></div>";
        f = document.querySelector(".goods"),
        p = "",
        g = "",
        l = c,
        f.innerHTML = l
    }
    )
}
</script>