Pix主题接入一言接口

    5,484

在博客左上位置加入一言,效果如下:


首先在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;
}

文章来源 小简の博客

Comments | 2 条评论
  • Evan

    Pix主题设置的文章太少了,我搬走喽,注明了出处😆

消息盒子
# 您有1条未读消息 #
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息