Waxy主题：自定义公告显示动态一言

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

效果

最终效果演示

实现方法

置顶公告

<div class="hitokoto"><span class="typed" id="hitokoto"></span></div>

自定义CSS样式、

.top-text-body {
    /*设置公告栏高度，可以按需更改*/
    height: 25px;
}
.top-text-body::before{
    /*删除公告栏中公告两个字*/
    content: "";
}

自定义JS

<!--引入打字机效果插件-->
<script src="//cdn.bootcss.com/typed.js/2.0.11/typed.min.js"></script>
<script>
//显示的文字
var typed = null;
//当页面加载好开始执行
$(function () {
  showHitokoto();
});
function showHitokoto(){
  if(typed !== null){typed.destroy(); typed = null;}
  //if(location.pathname !=='/') return;
  $.get("https://v1.hitokoto.cn/", function (data) {
      var data = data;
    var str =  data.hitokoto + "&#12288;By "
    var options = {
      strings: [
          //此处如果有多行，则会展示完后，删除在展示下一行，^1000表示等待时间
        //str + "此处显示1秒^1000",
        //str + "此处显示2秒^2000",
        //str +'此处将一直显示',
        str + data.from,
      ],
      //详细参数请移步typed文档
      typeSpeed: 80,
      startDelay:300,
      // loop: true,
    }
    typed = new Typed(".hitokoto .typed", options);
  })
  //一个定时器，20秒后在调用执行一次自己
  setTimeout(function(){
    showHitokoto();
  },20000);
}
</script>

最终在设置中的效果

具体的设置方法及代码