加入每日短句

效果展示

代码编写

编写everyDay.swig

![[everyDay.swig]]

<link type="text/css" rel="stylesheet" href="{{- url_for('/css/everyDay.css')}}"/>  
<div id="every-dat-text">  
</div>  
<script src="{{- url_for('/js/everyDay.js') }}"></script>

插入swig代码

在\themes\next\layout_layout.swig添加一下代码
在<header class="header" itemscope itemtype="http://schema.org/WPHeader">下面插入

<!--   每日一句   -->  
{{ partial('everyDay.swig', {}, {cache: theme.cache.enable}) }}

js代码

![[everyDay.js]]

function getEveryDayStr() {  
  // 词库
  fetch('https://v.api.aa1.cn/api/yiyan/index.php')  
    .then(function (res) {  
      return res.text()  
    }).then(everyDayStr => {  
    const s = everyDayStr.replace("<p>", "").replace("</p>", "");  
    setTimeout(() => {  
      addEveryDayStr(s)  
    }, 1000)  
  }).catch(()=>{  
    setTimeout(() => {  
      addEveryDayStr("欢迎来到sevenyjl的博客")  
    }, 1000)  
  })  
}  
  
function addEveryDayStr(str) {  
  const text_info = document.getElementById("every-dat-text")  
  const str_split = str.split("")  
  const p = document.createElement("span");  
  p.classList.add('every-dat-animation');  
  p.innerText = "";  
  text_info.appendChild(p);  
//遍历设置为span，定时span的属性中加入动画，  
  for (let i = 0; i < str_split.length; i++) {  
    setTimeout(() => {  
      const temp = document.createElement("span");  
      temp.classList.add('every-dat-animation');  
      temp.innerText = str_split[i];  
      text_info.appendChild(temp);  
    }, (i) * (Math.min(500-i,50)))  
  }  
}

css

![[everyDay.css]]

.every-dat-animation {  
  color: #fff;  
  animation: aa 1s;  
  text-shadow: 0 0 10px #000;  
}  
  
#every-dat-text {  
  padding: 20px;  
  font-weight: bold;  
  background: #fff -webkit-radial-gradient(  
    circle,  
    #1d694b,  
    rgba(255, 255, 255, 0),  
    rgba(255, 255, 255, 0)  
  ) no-repeat -280px -94px;  
  -webkit-background-clip: text;  
  -webkit-background-size: 388px;  
  color: rgba(255, 255, 255, 0.1);  
  -webkit-animation: everyDayLight 6s linear infinite;  
}  
@keyframes everyDayLight {  
  from {  
    background-position: -280px -94px;  
  }  
  to {  
    background-position: 150% -94px;  
  }  
}  
  
@keyframes aa {  
  0% {  
    opacity: 0  
  }  
  100% {  
    opacity: 1  
  }  
}

扩展