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

效果

实现方法

置顶公告

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

自定义CSS样式、

1.top-text-body {
2    /*设置公告栏高度,可以按需更改*/
3    height: 25px;
4}
5.top-text-body::before{
6    /*删除公告栏中公告两个字*/
7    content: "";
8}

自定义JS

 1<!--引入打字机效果插件-->
 2<script src="//cdn.bootcss.com/typed.js/2.0.11/typed.min.js"></script>
 3<script>
 4//显示的文字
 5var typed = null;
 6//当页面加载好开始执行
 7$(function () {
 8  showHitokoto();
 9});
10function showHitokoto(){
11  if(typed !== null){typed.destroy(); typed = null;}
12  //if(location.pathname !=='/') return;
13  $.get("https://v1.hitokoto.cn/", function (data) {
14  	var data = data;
15    var str =  data.hitokoto + "&#12288;By "
16    var options = {
17      strings: [
18	  	//此处如果有多行,则会展示完后,删除在展示下一行,^1000表示等待时间
19        //str + "此处显示1秒^1000",
20        //str + "此处显示2秒^2000",
21        //str +'此处将一直显示',
22        str + data.from,
23      ],
24	  //详细参数请移步typed文档
25      typeSpeed: 80,
26      startDelay:300,
27      // loop: true,
28    }
29    typed = new Typed(".hitokoto .typed", options);
30  })
31  //一个定时器,20秒后在调用执行一次自己
32  setTimeout(function(){
33    showHitokoto();
34  },20000);
35}
36</script>

最终在设置中的效果

具体的设置方法及代码