搜 索

网站调用网易云热评

  • 1.1k阅读
  • 2020年12月31日
  • 9评论

现已经完美适配Cutten4.x主题。代码及样式自取,可以说是上手即用。如有成功实现,还烦请点赞留言

1、在侧边栏sidebar.php文件中合适的地方加入代码

<div class="sidebar-box">
<div class="p-3">网易云热评</div>
<script>
$.ajax ({
    type:"GET",
    url:"https://tenapi.cn/comment",
    dataType:"json",
    scriptCharset: 'utf-8',
    success:function (data) { 
    $("#text").html('<div class="wyycontent">'+data.data.content+'</div><br><div class="wyysong">——《'+data.data.song+'》下的评论</div>');
                        },
                });
</script>
        <wyy id="text" style="padding-left:15px;font-size:15px">思考中……</wyy>
</div>

2、可以在文件底部加入样式

<style>
}
.wyycard{
    margin: 30px;
    padding: 15px;
    color: #f2e6e0;
}
.wyycontent{
    text-align: center;
    font-size: 14px;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: -20px;
}
.wyysong{
   
    text-align: right;
    font-size: 12px;
    padding-right: 15px;
    padding-bottom:15px;
}
.wyycomment{
    padding:20px 20px; 
    padding-bottom: 0px;
    margin: 10% 30% auto 30%;
    border:2px solid #fff; 
    position:relative;    
    border-radius: 4px;
    background: #af2c31;
    box-shadow:  10px -10px 0px #fcfcfc85, 
                -10px 10px 0px transparent;
}
@media screen and (max-width: 700px){
    .wyycomment{
    padding:20px 20px; 
    margin: 10% 1% auto 1% ;
    border:2px solid #fff; 
    position:relative;    
    border-radius: 4px;
    }
}
.wyycomment span{
    width:0; 
    height:0; 
    font-size:0; 
    overflow:hidden; 
    position:absolute;
}
.wyycomment span.bot{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#fff transparent transparent; 
    left:15px; 
    bottom:-41px;
}
.wyycomment span.top{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#af2c31 transparent transparent; 
    left:15px; 
    bottom:-38px;
} 
</style>

3、温馨提示

如果显示“思考中” 一直不显示评论的话,先看自己网站是否有调用jquery.min.js这个文件,如果没有的话,可以调用本站的文件,放在前即可

<script src="https://blog.yshgg.cn/usr/themes/Cuteen/static/js/jquery.min.js"></script>

以上效果皆是本人精心调试过的完美适配Cutten版本,如有其它主题,请自行修改

评论区
轻风记 2021年02月28日 08:45
回复

为啥他一直思考中
https://www.3328bk.cn/959

小妖 轻风记 轻风记 小妖 轻风记 小妖
6 条回复
小妖
小妖 2021年02月28日 10:25
回复

你网站有调用jquery.min.js这个文件没 你先加上我的试试
https://blog.yshgg.cn/usr/themes/Cuteen/static/js/jquery.min.js
放到head.php 前

轻风记
轻风记 2021年02月28日 10:27
回复

轻风记
轻风记 2021年02月28日 10:33
回复

成了成了

小妖
小妖 2021年02月28日 10:34
回复

轻风记
轻风记 2021年02月28日 10:35
回复

博主的邮件模板有问题,模板下方链接是致远博客且无法打开,修改一下

小妖
小妖 2021年02月28日 10:49
回复

啊这 谢谢了 我还没注意这点

SolaKing 2020年12月31日 14:48
回复

先手抢座

小妖
1 条回复
小妖
小妖 2020年12月31日 15:36
回复

测试了一下

avatar