使用Memos API 创建 好物页面

浪子
2024-03-13 / 5 评论 / 搜一下 / 565 阅读 / 正在检测是否收录...
AI摘要:本文介绍了如何使用Memos API创建一个好物页面。首先需要修改代码中的`https://memos.ee`为自己的memos地址,并将`creatorId=1`改为自己的ID,`tag=好物`改为自己的tag。然后引入给定的代码,该代码会从memos中获取数据并展示在页面上。展示的数据格式为`#好物`后面加上空格和回车,然后是商品的图片链接、商品的简介和商品的链接。最后,将展示的代码插入到页面中即可。

代码来自于网络

步骤

修改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>

评论 (5)

取消
  1. 头像
    carlyleliu
    Windows 10 · Google Chrome

    https://blogcdn.loliko.cn/memos/goods/goods.css
    地址无法访问了,可以再提供下吗

    回复
    1. 头像
      浪子 作者
      Windows 10 · Google Chrome
      @ carlyleliu

      已经更新了

      回复
      1. 头像
        carlyleliu
        Windows 10 · Google Chrome
        @ 浪子

        https://blogcdn.loliko.cn/memos/goods/bootstrap.css
        这个链接好像也失效了,部署后显示是异常的,这个能不能也帮忙提供下

        回复
        1. 头像
          浪子 作者
          Windows 10 · Google Chrome
          @ carlyleliu

          bootstrap 是框架,建议自己写css,因为会有很多冲突

          回复
          1. 头像
            carlyleliu
            Windows 10 · Google Chrome
            @ 浪子

            好的,感谢

            回复