折腾一天：终于给副标题加上了打字轮询动画

params:
  # 1. 启用首页 profile 模式（必须开，否则副标题不显示）
  profileMode:
    enabled: true                # 核心开关，关了整个 profile 都没了
    title: "我的博客"             # 主标题不变
    subtitle: ""                 # 副标题留空！后面让 JS 填内容
    imageUrl: "img/avatar.jpg"   # 头像路径（放 static/img 里）
    imageWidth: 275
    imageHeight: 275

  # 2. 要轮询的句子列表（和 profileMode 平级！别嵌套进去）
  quotes:
    - "生命不是要超越别人，而是要超越自己。"
    - "人生伟业的建立，不在能知，乃在能行。"
    - "任何的限制，都是从自己内心开始的。"
    - "含泪播种的人一定能含笑收获。"

<!-- 副标题：加 class 供定位，加 data-quotes 传句子列表 -->
<span class="profile-subtitle" 
      data-quotes='{{ site.Params.quotes | jsonify | safeHTMLAttr }}'>
</span>

// 等 DOM 加载完再执行，避免找不到元素
document.addEventListener("DOMContentLoaded", () => {
  // 1. 找到副标题元素
  const subtitle = document.querySelector(".profile-subtitle");
  if (!subtitle) return; // 没找到元素就退出，避免报错

  // 2. 读取 data-quotes 里的句子列表
  const quotes = JSON.parse(subtitle.dataset.quotes || "[]");
  if (quotes.length === 0) return; // 没句子也退出

  // 3. 动画参数（可自己调速度）
  const typingSpeed = 100;       // 打字速度（毫秒/字）
  const deletingSpeed = 50;      // 删除速度
  const pauseAfterTyping = 2000; // 打完停顿2秒
  const pauseAfterDeleting = 500;// 删除完停顿0.5秒

  // 4. 状态变量
  let currentQuoteIndex = Math.floor(Math.random() * quotes.length); // 随机开始第一句
  let currentText = "";         // 当前显示的文字
  let charIndex = 0;            // 当前处理的字符索引
  let isDeleting = false;       // 是否在删除状态

  // 5. 核心打字函数
  function typeWriter() {
    const currentQuote = quotes[currentQuoteIndex];

    if (isDeleting) {
      // 删除阶段：逐字减少
      currentText = currentQuote.substring(0, charIndex - 1);
      charIndex--;
    } else {
      // 打字阶段：逐字增加
      currentText = currentQuote.substring(0, charIndex + 1);
      charIndex++;
    }

    // 更新副标题内容
    subtitle.textContent = currentText;

    // 切换状态/句子
    if (!isDeleting && charIndex === currentQuote.length) {
      // 打完一句，准备删除
      isDeleting = true;
      setTimeout(typeWriter, pauseAfterTyping);
    } else if (isDeleting && charIndex === 0) {
      // 删除完，切换下一句（避免重复）
      isDeleting = false;
      let newIndex;
      do {
        newIndex = Math.floor(Math.random() * quotes.length);
      } while (newIndex === currentQuoteIndex);
      currentQuoteIndex = newIndex;
      setTimeout(typeWriter, pauseAfterDeleting);
    } else {
      // 继续打字/删除
      setTimeout(typeWriter, isDeleting ? deletingSpeed : typingSpeed);
    }
  }

  // 6. 启动动画
  typeWriter();
});

/* 副标题基础样式：确保文字可见 */
.profile-subtitle {
  position: relative;        /* 给光标定位用 */
  display: inline-block;     /* 避免光标换行 */
  color: inherit !important; /* 继承父元素颜色，防止和背景同色 */
  white-space: nowrap;       /* 文字不换行 */
}

/* 光标样式：用伪元素生成竖线 */
.profile-subtitle::after {
  content: "|";                /* 光标符号 */
  position: absolute;          /* 绝对定位，跟着文字走 */
  right: -6px;                 /* 光标在文字右侧的距离 */
  animation: blink 1s step-end infinite; /* 1秒闪烁一次 */
  color: inherit;              /* 光标颜色和文字一致 */
}

/* 光标闪烁动画 */
@keyframes blink {
  from, to { opacity: 1; } /* 开始和结束显示 */
  50% { opacity: 0; }      /* 中间隐藏 */
}

<!-- 加载光标样式 CSS -->
{{ $customCss := resources.Get "css/extended/custom.css" }}
{{ if $customCss }}
  <link rel="stylesheet" href="{{ $customCss.RelPermalink }}">
{{ end }}

<!-- 加载打字动画 JS -->
{{ $typewriter := resources.Get "js/typewriter.js" }}
{{ if $typewriter }}
  <script src="{{ $typewriter.RelPermalink }}"></script>
{{ end }}