打字机效果配置

配置 IndieShow 项目的打字机效果，包括启用开关、打字速度等参数设置

本文档将帮助你配置 IndieShow 项目的打字机效果。打字机效果可以让你的网站文字像打字一样逐字显示，增加网站的动态感和趣味性。

文件结构

打字机效果相关的文件结构：

文件说明：

components/ui/: UI 组件目录
- UITypeWriter.vue: 打字机效果组件，实现文字逐字显示的核心功能
types/components/ui/: 类型定义目录
- uitypewriter.d.ts: 打字机组件的 TypeScript 类型定义，包含组件属性接口

配置参数

基础配置

变量名称	变量描述	默认值
NUXT_PUBLIC_TYPEWRITER_ENABLED	是否启用打字机效果（可选值：true/false）	true
NUXT_PUBLIC_TYPEWRITER_SPEED	打字速度（毫秒/字符，建议范围：50-200，数值越小速度越快）	40

使用示例

在组件中使用

以下是首页 Hero 区域使用打字机效果的示例：

components/ui/UITypeWriter.vue

<template>
  <section class="relative overflow-hidden">
    <div class="mx-auto max-w-4xl text-center">
      <!-- 主要描述 -->
      <UIScrollAnimation animation="fade-up" :delay="800" :duration="1200">
        <p class="mt-8 text-lg leading-8 text-gray-600 dark:text-gray-300 relative animate-float max-w-3xl mx-auto">
          <ClientOnly>
            <UITypeWriter 
              :text="t('site.description')" 
              :start-delay="1500" 
              class="leading-tight" 
            />
          </ClientOnly>
        </p>
      </UIScrollAnimation>
    </div>
  </section>
</template>
 
<script setup lang="ts">
import { useI18n } from "#imports"
 
const { t } = useI18n()
</script>