使用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>