前几天浏览网站的时候看到页面上有句诗,打开调试看了下调用的是“每日诗词”的SDK。本文基于此SDK实现你的页面添加一句诗。
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<h2 id="poet"></h2>
jinrishici.load(function (result) {
if (result.status === "success") {
console.log(result)
const { author, dynasty } = result.data.origin
const content = result.data.content
document.getElementById('poet').innerText = content
document.getElementById('poet').setAttribute('info', `${dynasty} • ${author}`)
}
});
#poet {
width: 42rem;
padding: 2rem 0;
border: 1px dashed #ccc;
text-align: center;
border-radius: 0.3rem;
position: relative;
}
#poet:after {
position: absolute;
content: attr(info);
font-size: 0.85rem;
right: 1.5rem;
top: -0.6rem;
background-color: white;
padding: 0 0.5rem;
}