一言是一个非常有趣的小工具,即随机输出一句话,今天就分享一下WordPress网站小工具实用美化之一言的教程,适用于任何主题
首先在网站后台添加一个自定义HTML小工具,名字叫自定义即可。内容粘贴下面的代码,保存即可。
<p id="hitokoto">:D 获取中...</p>
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
[title]api使用示例[/title]
以下的示例包含超链接,您可能需要手动配置样式使其不变色。如果您嫌麻烦,可以移除。
<p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
<!-- 以下写法,选取一种即可 -->
现代写法,推荐(不支持 IE)
<script>
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
const hitokoto = document.getElementById('hitokoto_text')
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto
})
.catch(console.error)
</script>
如果你配置了 axios
<script>
axios.get('https://v1.hitokoto.cn')
.then(({ data }) => {
const hitokoto = document.getElementById('hitokoto_text')
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto
})
.catch(console.error)
</script>
如果你的站点使用了 jQuery(如果是 JQ 3.x 以及更新的版本, 你得使用完整版的 JQ), 那么你可以...
<script>
$.ajax({
type: 'GET',
url: 'https://v1.hitokoto.cn',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'hitokoto',
success (data) {
$('#hitokoto_text').attr('href', 'https://hitokoto.cn/?uuid=' + data.uuid)
$('#hitokoto_text').text(data.hitokoto)
},
error (jqXHR, textStatus, errorThrown) {
// 错误信息处理
console.error(textStatus, errorThrown)
}
})
</script>
<!-- P.S 我们不推荐使用 jQuery Ajax。 推荐使用 fetch api 或者 axios.js-->
老式写法,兼容性最好; 支持 IE
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v1.hitokoto.cn');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
var hitokoto = document.getElementById('hitokoto_text');
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto;
}
}
xhr.send();
</script>
新 API 方法, 十分简洁
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>