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中格式如下
#好物
![名称,品牌](图片链接)
[简介](商品链接)
好物后面有空格,并回车
引入以下代码
<link rel="stylesheet" href="https://blogcdn.loliko.cn/memos/goods/goods.css">
<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>
评论 (0)