Julian Blog

Article Outline 插件Bug修复手册

作者：

Julian

在

在开发Article Outline插件的过程中，我遇到了一些技术问题，通过分析和调试，最终找到了解决方案。本文将详细介绍这些问题和解决过程，希望能为其他插件开发者提供参考。

11
24
63
5

一、大纲定位与重叠问题

1. 问题现象

在初始设计中，大纲使用fixed定位固定在页面右侧，但在向下滑动网页时，大纲会与页脚等其他内容重叠，影响用户体验。

2. 原因分析

fixed定位使元素脱离了正常的文档流，不会随页面内容滚动而隐藏，导致与页面底部内容重叠。

3. 解决方案

将大纲的定位方式从fixed改为sticky，并使用float:right让大纲在内容流中：

@media (min-width: 1024px) {
    .article-outline {
        position: sticky;
        top: 20px;
        width: 280px;
        max-width: 280px;
        float: right;
        margin-left: 30px;
    }
}

4. 改进效果

  • 大纲会跟随内容滚动，但保持在视口中可见
  • 不会与页脚等其他内容重叠
  • 在内容结束时自然消失

二、调试与日志记录

1. 问题现象

在开发过程中，遇到问题时难以定位具体原因，调试效率低下。

2. 原因分析

缺乏有效的调试机制和日志记录。

3. 解决方案

3.1 添加错误日志

在关键位置添加错误日志，便于追踪问题：

if ($original_content !== $content) {
    // Debug: Count number of headings with IDs
    preg_match_all('/<h([1-6]) id="([^"]+)">/', $content, $id_matches);
    error_log('Article Outline: Found ' . count($id_matches[0]) . ' headings with IDs');
} else {
    error_log('Article Outline: No headings found or no IDs added');
}

3.2 前端调试

在JavaScript代码中添加控制台日志：

console.log('Article Outline JS loaded (Vanilla JS)');
// ...
console.log('Outline link clicked:', link);
console.log('Target ID:', targetId);
// ...

4. 改进效果

  • 提高了调试效率
  • 便于定位和解决问题
  • 有助于理解代码执行流程

更多文章