430 字
2 分钟
在网页中嵌入随机名言

什么是一言?#

以下是 一言开发者文档 中的介绍:

动漫也好、小说也好、网络也好,不论在哪里,我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来,形成一言网络,以传递更多的感动。如果可以,我们希望我们没有停止服务的那一天。

简单来说,一言指的就是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。 或是感动,或是开心,有或是单纯的回忆。来到这里,留下你所喜欢的那一句句话,与大家分享,这就是一言存在的目的。

打开 一言 的官网,映入眼帘的便是每次都会刷新的一句话,也可以通过它提供的接口,将这句话嵌入到我们自己的网页中。

接口的调用#

官方文档 给出了这样的调用方法:

<p id="hitokoto">
  <a href="#" id="hitokoto_text">:D 获取中...</a>
</p>
<script>
  fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.querySelector('#hitokoto_text')
      hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`
      hitokoto.innerText = data.hitokoto
    })
    .catch(console.error)
</script>

这样的调用方式采用了 <a> 标签,链接指向了一言源网页。但这种调用方式会在文字下方生成下划线。下面给出一种采用段落 <p> 标签的示例:

<p id="hitokoto_text">:D 获取中...</p>
<p id="hitokoto_from">from</p>
<script>
    fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
        hitokoto_text.innerText = data.hitokoto
        hitokoto_from.innerText = data.from
    })
    .catch(console.error)
</script>

此代码中, .hitokoto 即为获取到的一句话内容, .from 即为来源。对于其中的参数、返回的内容都可以参考 官方文档 进行设定。请注意,请在合适的地方添加对于 一言 的引用。

在网页中嵌入随机名言
https://blog.wely.fun/posts/在网页中嵌入随机名言/
作者
Wely
发布于
2024-05-01
许可协议
CC BY-NC-SA 4.0