Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto | 文章

前言

Hexo Volantis主题副标题以打字效果输出 Hitokoto

步骤

一

修改 _config.yml

在 import body_end加入 js 代码

<script>const textElement=document.querySelector('.top .subtitle');let charIndex=0;let isDeleting=false;let hitokotoText='';let typingInterval;const typingSpeed=180;const deletingSpeed=100;const delayBetweenCycles=2500;function typeWriter(){if(!shouldRunEffect()){clearInterval(typingInterval);return}if(isDeleting){textElement.innerHTML=hitokotoText.slice(0,charIndex--)}else{textElement.innerHTML=hitokotoText.slice(0,++charIndex)}if(!isDeleting&&charIndex===hitokotoText.length){setTimeout(()=>isDeleting=true,delayBetweenCycles)}else if(isDeleting&&charIndex===0){isDeleting=false;clearInterval(typingInterval);fetchHitokoto();return}const speed=isDeleting?deletingSpeed:typingSpeed;typingInterval=setTimeout(typeWriter,speed)}function fetchHitokoto(){if(!shouldRunEffect())return;fetch('https://v1.hitokoto.cn').then(response=>response.json()).then(data=>{hitokotoText=data.hitokoto;charIndex=0;typeWriter()}).catch(error=>{console.error(error);hitokotoText='获取失败 ε(┬┬﹏┬┬)3';charIndex=0;errortypeWriter()})}function errortypeWriter(){typingInterval=setInterval(()=>{textElement.innerHTML=hitokotoText.slice(0,++charIndex);if(charIndex===hitokotoText.length){clearInterval(typingInterval)}},typingSpeed)}function shouldRunEffect(){const currentPath=window.location.pathname;return currentPath==='/'||currentPath==='/archives/'}fetchHitokoto();volantis.pjax.push(()=>{if(shouldRunEffect()){fetchHitokoto()}else{clearInterval(typingInterval);textElement.innerHTML=''}});</script>

_config.yml 示例：

import:
  body_end:
    - "<script>const textElement=document.querySelector('.top .subtitle');let charIndex=0;let isDeleting=false;let hitokotoText='';let typingInterval;const typingSpeed=180;const deletingSpeed=100;const delayBetweenCycles=2500;function typeWriter(){if(!shouldRunEffect()){clearInterval(typingInterval);return}if(isDeleting){textElement.innerHTML=hitokotoText.slice(0,charIndex--)}else{textElement.innerHTML=hitokotoText.slice(0,++charIndex)}if(!isDeleting&&charIndex===hitokotoText.length){setTimeout(()=>isDeleting=true,delayBetweenCycles)}else if(isDeleting&&charIndex===0){isDeleting=false;clearInterval(typingInterval);fetchHitokoto();return}const speed=isDeleting?deletingSpeed:typingSpeed;typingInterval=setTimeout(typeWriter,speed)}function fetchHitokoto(){if(!shouldRunEffect())return;fetch('https://v1.hitokoto.cn').then(response=>response.json()).then(data=>{hitokotoText=data.hitokoto;charIndex=0;typeWriter()}).catch(error=>{console.error(error);hitokotoText='获取失败 ε(┬┬﹏┬┬)3';charIndex=0;errortypeWriter()})}function errortypeWriter(){typingInterval=setInterval(()=>{textElement.innerHTML=hitokotoText.slice(0,++charIndex);if(charIndex===hitokotoText.length){clearInterval(typingInterval)}},typingSpeed)}function shouldRunEffect(){const currentPath=window.location.pathname;return currentPath==='/'||currentPath==='/archives/'}fetchHitokoto();volantis.pjax.push(()=>{if(shouldRunEffect()){fetchHitokoto()}else{clearInterval(typingInterval);textElement.innerHTML=''}});</script>"

二

建立或修改 source\_volantis\style.styl

加入以下代码

// 副标题打字效果
.top .subtitle
  position: relative
  display: inline-block

.top .subtitle::after
  content: '|'
  position: absolute
  right: -10px
  animation: blink 0.8s step-end infinite

@keyframes blink
  0%, 50%
    opacity: 1
  51%, 100%
    opacity: 0

三

修改 _config.volantis.yml

cover:
  subtitle: ":D 获取中..."