概述

前几天浏览网站的时候看到页面上有句诗，打开调试看了下调用的是“每日诗词”的SDK。本文基于此SDK实现你的页面添加一句诗。

实现效果

实现

1. 引入SDK

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<h2 id="poet"></h2>

2. 调用SDK

jinrishici.load(function (result) {if (result.status === "success") {console.log(result)const { author, dynasty } = result.data.originconst content = result.data.contentdocument.getElementById('poet').innerText = contentdocument.getElementById('poet').setAttribute('info', `${dynasty} • ${author}`)}
});

3. 设置样式

#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;
}