前言
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
示例:
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
cover:
subtitle: ":D 获取中..."