本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。
效果
实现方法
首先进入主题设置 > 置顶公告/自定义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 + " 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>
最终在设置中的效果
