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 (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() { fetch('https://v1.hitokoto.cn').then(response => response.json()).then(data => { hitokotoText = data.hitokoto; charIndex = 0; typeWriter(); }).catch(console.error); } fetchHitokoto();</script>

_config.yml 示例：

1
2
3

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 (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() { fetch('https://v1.hitokoto.cn').then(response => response.json()).then(data => { hitokotoText = data.hitokoto; charIndex = 0; typeWriter(); }).catch(console.error); } fetchHitokoto();</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

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