Pix主题01:接入一言接口
在博客左上位置加入一言,效果如下:
首先在PIX主题下的inc文件下找到pix-fn.php文件,然后在大概419行,修改代码为
$html = '<div class="top_logo"><a href="'.home_url('/').'"><img src="'.$logo.'" '.$class.'></a><p id="hitokoto_text"></p></div>';
接下来在PIX主题设置-扩展设置-头部HTML代码里添加(引入加载方式)
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
底部HTML代码里添加(引入一言)
<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
let data_ = data.hitokoto
if(data_.length > 22){
data_ = data_.substring(0,22);
data_ = data_ + "...";
}
hitokoto.innerText = data_
var top_logo_me = document.getElementById('hitokoto_text');
top_logo_me.style.display = 'block';
})
.catch(console.error)
</script>
自定义CSS里添加(这个是头像圆角和高度的设置,可根据需要选择)
#hitokoto_text{
font-size: 0.5rem;
width: 70%;
display: none;
animation-duration: 3s;
animation-fill-mode: both;
animation-name: fadeIn;
}
.top_logo{
display: flex;
justify-content: space-between;
align-items: center;
height: 116px;
}
.top_logo img {
border-radius: 5px;
}
出处:我五岁了啊 https://wwsla.com/202/
原作:小简博客「详细设置的文章」https://cloud.tencent.com/developer/article/2189722
赶快写下您的首评!