Posts: Hexo Volantis theme subtitle output with a typing effect Hitokoto | Article

Translated by AI model Qwen/Qwen3-8B.

Source Language: Simplified Chinese, Target Language: english, Translation Time: 2026-05-01 02:46

AI translation is for reference only. Accuracy is not guaranteed, please refer to the original text.

Preface

Hexo Volantis theme subtitle outputs Hitokoto with a typewriter effect

Steps

One

Modify _config.yml

Add js code in 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>

_config.yml example:

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>"

Two

Create or modify source\_volantis\style.styl

Add the following code

// 副标题打字效果
.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

Three

Modify _config.volantis.yml

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