投稿: Hexo Volantisテーマのサブタイトルをタイピング効果で表示する Hitokoto | 文章

AIモデル Qwen/Qwen3-8B による翻訳。

原文言語：Simplified Chinese、翻訳先言語：japanese、翻訳時間：2026-05-01 04:41

。

AI 翻訳は参考に限り、内容の完全な正確性を保証できません。原文をご参照ください。

前言

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 获取中..."