解决 AISummary插件自定义样式未遍历多容器导致内容不显示的问题

知否离 — Fri, 25 Jul 2025 01:00:00 +0800

AI摘要

文章介绍了在使用AISummary插件时，因多容器导致摘要内容不显示的问题，并提供了遍历所有容器的增强代码及样式调整方案。

引言

在为博客文章实现AI摘要工具时，我选择了大佬--旋的来AISummary插件增强功能（非常好用）。然而，在按大佬的教程配置完毕后，我发现摘要正文并没有输出，经研究后得知，因为阅读模式的存在，出现了两个摘要容器，而大佬的自定义样式不会处理多个摘要容器，导致第二个摘要容器正文无法正常显示（当时不知道(⊙︿⊙)）。本文将详细记录这一问题的排查与解决方案，并在文末给出增强后的完整自定义样式代码。

插件文章链接：Typecho添加文章AI摘要功能（Handsome等全主题适配）By xuan

问题描述

使用环境

博客平台: Typecho
博客主题: bearsimple

具体问题现象

摘要正文未能正常加载

排查过程

分析文章页的HTML文档

可以看到，同时存在两个摘要容器，分别位于阅读模式页面处和文章页面处，并且阅读模式的容器为1号位，且1号位容器内容正常加载，而2号位为空值。故产生的现象为文章处摘要不加载，而阅读模式不会自动被使用，本人对该主题也是刚接触使用，不甚熟悉，故对本人的排查造成了不小的困扰。

分析源代码

主要的逻辑在executeAiSummaryTyping()中，其只处理了第一个容器

function executeAiSummaryTyping() {
    // 【未增强版本】
    // 使用 document.querySelector() 只会获取页面上第一个匹配 '.ai-typewriter-text' 的元素。
    // 这意味着如果页面上有多个AI摘要容器，只有第一个摘要会执行打字机效果。
    const typewriterElement = document.querySelector('.ai-typewriter-text');
    // 获取隐藏的源文本元素。
    const sourceTextElement = document.querySelector('.ai-hidden-text');
    // 定义打字速度。
    const typingSpeed = 50; 
    
    // 如果没有找到对应的元素，则直接返回。
    if (!typewriterElement || !sourceTextElement) return;
    
    // 【未增强版本】
    // 使用全局变量 aiSummaryTypingTimeoutId 来管理定时器。
    // 当页面上有多个摘要时，如果前一个摘要的打字机效果还在进行中，新的打字机效果可能会清除掉旧的定时器，
    // 导致效果异常或只显示一个摘要的打字机效果。
    if (aiSummaryTypingTimeoutId) {
        clearTimeout(aiSummaryTypingTimeoutId);
    }

    // 获取并处理源文本，添加首行缩进。
    let textToType = sourceTextElement.textContent.trim();
    
    if (textToType.length > 0) {
        textToType = '  ' + textToType; // 首行缩进
    }

    // 清空打字机文本内容。
    typewriterElement.textContent = '';
    // 初始化字符索引。
    let charIndex = 0;

    // 定义打字机效果的内部函数。
    function typeNextCharacter() {
        // 如果还有字符未输出。
        if (charIndex < textToType.length) {
            // 逐个添加字符。
            typewriterElement.textContent += textToType.charAt(charIndex);
            charIndex++;
            // 设置定时器，继续输出下一个字符。
            // 【未增强版本】这里仍然使用全局变量来存储定时器ID。
            aiSummaryTypingTimeoutId = setTimeout(typeNextCharacter, typingSpeed);
        } else {
            // 所有字符输出完毕，清除全局定时器ID。
            aiSummaryTypingTimeoutId = null;
        }
    }
    // 启动打字机效果。
    typeNextCharacter();
}

解决方案

对函数做多容器增强

function executeAiSummaryTyping() {
    // 获取页面上所有带有 'aisummary' 类的元素，这些元素代表了不同的AI摘要容器。
    const aiSummaryContainers = document.querySelectorAll('.aisummary');

    // 遍历每一个找到的AI摘要容器。
    aiSummaryContainers.forEach(container => {
        // 在当前容器内部，查找带有 'ai-typewriter-text' 类的元素，这是显示打字机效果的文本区域。
        const typewriterElement = container.querySelector('.ai-typewriter-text');
        // 在当前容器内部，查找带有 'ai-hidden-text' 类的元素，这是存储原始摘要文本的隐藏区域。
        const sourceTextElement = container.querySelector('.ai-hidden-text');
        // 定义打字速度，数值越小，打字速度越快。
        const typingSpeed = 50; 

        // 如果在当前容器中没有找到打字机文本元素或源文本元素，则跳过当前容器，不执行打字机效果。
        if (!typewriterElement || !sourceTextElement) return;

        // 清除可能存在的旧定时器。
        // 这里将定时器ID存储在 'typewriterElement' 自身的属性 'typingTimeoutId' 上，
        // 这样每个打字机元素都有独立的定时器，避免相互干扰，支持多摘要同时运行。
        if (typewriterElement.typingTimeoutId) {
            clearTimeout(typewriterElement.typingTimeoutId);
        }

        // 获取源文本内容并去除首尾空格。
        let textToType = sourceTextElement.textContent.trim();
        
        // 如果源文本不为空，则在文本开头添加两个空格，实现首行缩进效果。
        if (textToType.length > 0) {
            textToType = '  ' + textToType; 
        }

        // 清空打字机文本元素的当前内容，准备开始打字。
        typewriterElement.textContent = '';
        // 初始化字符索引，用于追踪当前打字到哪个字符。
        let charIndex = 0;

        // 定义核心的打字机效果函数。
        const typeNextCharacter = () => {
            // 如果还有未输出的字符。
            if (charIndex < textToType.length) {
                // 将当前字符添加到打字机文本元素中。
                typewriterElement.textContent += textToType.charAt(charIndex);
                // 字符索引递增。
                charIndex++;
                // 设置一个定时器，在指定延迟后再次调用 'typeNextCharacter' 函数，实现逐字输出。
                typewriterElement.typingTimeoutId = setTimeout(typeNextCharacter, typingSpeed);
            } else {
                // 所有字符都已输出完毕，清除该打字机元素的定时器ID。
                typewriterElement.typingTimeoutId = null;
            }
        };
        // 启动打字机效果，开始输出第一个字符。
        typeNextCharacter();
    });
}

并用伪元素实现字符缩进

.ai-typewriter-text {
    display: inline;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* 缩进样式 */
.ai-typewriter-text::before {
    content: '';
    width: 2em; /* 调整宽度以匹配所需的缩进 */
    height: 1em; /* 高度与字体大小相匹配 */
    float: left;
    margin-top: -0.5em; /* 调整这个值以对齐文本基线 */
}

验证修复效果

可以看到，两个容器都能正常加载数据，且缩进会更为合适
文章链接：效果展示

总结

通过这次经历，我记住了在排查前端页面的渲染加载问题时，可以直接从HTML文档出发，从元素本身出发，这样方便我们由果溯因，从而少走弯路，节省时间和精力。再次感谢大佬，不但开发了如此好用的插件（有类似插件付费提供商），还会积极讨论解决问题，希望我的经验能够帮助到其他遇到类似问题的朋友。

拾星漫记 - AISummary