Bearsimple V2侧边栏分类统计计数异常修复

2025-07-25T10:42:00+08:00

AI摘要 Bearsimple V2主题修复了侧边栏分类计数异常问题，通过添加代码正确计算一级分类及其子分类的文章总数，使显示结果更准确。此内容根据文章生成，仅用于文章内容的解释与总结 Typecho主题 - Bearsimple V2侧边栏的根分类计数为0，没有正确计算和现实分类树的权值总和在sidebar.php加上统计的逻辑代码count; // 一级分类本身的文章数 if (!empty($children)) { // 遍历所有子分类，累加它们的文章数 foreach ($children as $mid) { $child = $categorys->getCategory($mid); $totalCount += $child['count']; // 累加子分类文章数 } } ?>

name(); ?> (count(); ?>)

name(); ?> ()

成功显示

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

2025-07-25T01:00:00+08:00

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文档出发，从元素本身出发，这样方便我们由果溯因，从而少走弯路，节省时间和精力。再次感谢大佬，不但开发了如此好用的插件（有类似插件付费提供商），还会积极讨论解决问题，希望我的经验能够帮助到其他遇到类似问题的朋友。完整自定义样式

拾星漫记 - BUG修复

Bearsimple V2侧边栏分类统计计数异常修复

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