WordPress网站实现“网易云音乐热评”页面

人这辈子，最害怕突然把某一首歌听懂了。 ——来自 北风神75 在「有多少爱可以重来」的评论

在使用网易云音乐时，经常在评论区看到与之产生共鸣的评论。过了很久，那种感觉仍然不会消失。你能在这倾听别人的故事，亦或许是你的故事。

一、进入后台=》页面=》新建页面

wordpress新建页面后，自行编辑添加一些想要的文本与效果。

二、在内容中添加一下代码（文本编辑模式）

<div id="codeWangyiyun"></div>

三、在Footer中插入如下代码

注：因为我的主题自带网站底部自定义JS代码功能，所以直接添加。如主题无此功能，自行编辑Footer文件。

<script>
let wangyiyunDiv = document.getElementById("codeWangyiyun");
wangyiyunDiv.style.textAlign = 'center';
let xhrWangyiyun = new XMLHttpRequest();
function setWangyiyun(){
wangyiyunDiv.innerText = '加载中 · · · ';
xhrWangyiyun.open('get', 'https://api.comments.hk/');
xhrWangyiyun.onreadystatechange = function () {
if (xhrWangyiyun.readyState === 4) {
let dataWangyiun = JSON.parse(xhrWangyiyun.responseText);
let i = 5;
wangyiyunDiv.innerHTML = '<h3><span style="user-select:none;font-size:40px">“</span>' + dataWangyiun["comment_content"] + '</h3>' +
'<p style="text-align: right">Commented by ' + dataWangyiun["comment_nickname"] + '</p>' +
'<h4>《' + dataWangyiun.title + '》—— ' + dataWangyiun["author"] + '</h4>' +
'<audio controls="controls" src="' + dataWangyiun["mp3_url"] + '"></audio><br>' +
'<div style="display:block;height:40px;line-height:20px"><i class="" style="color:red;cursor: pointer;font-weight: bold;user-select:none;font-size:25px" id="huanWangyiyun">'+i+'</i></div>';
let huan = document.getElementById("huanWangyiyun");
let daojishi = setInterval(function () {
huan.innerText = (--i).toString();
if (i === 0) {
clearInterval(daojishi);
huan.innerText = "";
huan.setAttribute("class", "fa fa-undo");
huan.onclick = function () {
setWangyiyun();
}
}
}, 1000);
}
};
xhrWangyiyun.send();
}
setWangyiyun();
</script>

API地址：乐评-一言

GitHub地址：云村