使用memos的API生成好物推荐页面

   AI摘要
本教程介绍了如何使用 Typecho 博客平台集成 Memos 服务,在博客中展示带有图片、简介和商品链接的好物推荐。通过修改代码中的参数,可以自定义展示内容,包括创作者 ID、标签和展示数量。引入提供的代码后,博客将自动从 Memos 中获取指定标签的好物信息,并以美观的网格形式展示在页面上。
由Google Gemini Pro生成

代码来自于网络

步骤

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

memos中格式如下

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

好物后面有空格,并回车

引入以下代码

<link rel="stylesheet" href="https://blogcdn.loliko.cn/memos/goods/good.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>
CC BY-NC-SA 4.0 Deed | 署名-非商业性使用-相同方式共享
最后更新时间:2024-03-22 13:05:03