调用“每日诗词”在你的页面添加一句诗

概述

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

实现效果

实现

1. 引入SDK

代码语言：javascript

复制

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

2. 调用SDK

代码语言：javascript

复制

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}`)
    }
});

3. 设置样式

代码语言：javascript

复制

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