Ksable' 小屋

ホーム留言板
友達ブログについて

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

发表于 2024-07-21 11:22
更新于 2024-08-26 11:28
154 字
1 min read

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 記事

4 カテゴリー

7 タグ
ホーム
留言板
カテゴリー
タグ
アーカイブ
友達
ブログについて
一些实用的网站
astro-koharu 使用指南
音楽
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸
この投稿は「日本語」では表示できません。元の投稿を表示しています。
Hexo Volantis 主题副标题以打字效果输出 Hitokoto 在 加入 js 代码

## 前言

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

気に入ったら、コメントを残してね～

日本語
中文 English 日本語

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 記事

4 カテゴリー

7 タグ
ホーム
留言板
カテゴリー
タグ
アーカイブ
友達
ブログについて
一些实用的网站
astro-koharu 使用指南
音楽
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸