问题1 - Githubissues

问题描述：

在加载页面时，遇到了多个错误和警告。以下是详细的错误信息：

资源加载错误：

avatar.jpg: 加载失败，服务器返回了 404 错误。

Failed to load resource: the server responded with a status of 404 () [avatar.jpg:1]

JavaScript 错误 - 无法读取 null 的属性：
- 发生在多个 .html 文件中，特别是在 style 相关的代码行。
```
Uncaught TypeError: Cannot read properties of null (reading 'style')
at 5.html:594:36
```

JavaScript 错误 - 未定义的函数 runShortcodes：

发生在 5.html 文件的第 213 行。

Uncaught ReferenceError: runShortcodes is not defined
at HTMLDocument.<anonymous> (5.html:213:21)

WebSocket 连接失败：

WebSocket 连接到指定的地址失败。

WebSocket connection to 'wss://hw-v2-web-player-tracker.biliapi.net/socket.io/?buvid=&sdkVersion=2.13.0%3Aleecher&aid=78977350&cid=144705558&sessionid=EhDR17QNvSnh-bK5H4R_d&mid=0&duration=235&testID=0&EIO=4&transport=websocket' failed

混合内容警告：

页面通过 HTTPS 加载，但请求了一些不安全的 HTTP 元素。浏览器自动升级为 HTTPS 请求。

Mixed Content: The page at 'https://player.bilibili.com/player.html?bvid=BV1KJ411C7SB&autoplay=0' was loaded over HTTPS, but requested an insecure element 'http://i1.hdslb.com/bfs/archive/9b2e3895104207e3f1755fa7359f5ca7755e8cd5.jpg'. This request was automatically upgraded to HTTPS.

重现步骤：

访问该页面或进行相关操作。
错误和警告将在浏览器的控制台中显示。

期望的行为：

所有资源应正确加载，不应出现 404 错误。
JavaScript 错误应解决，确保 style 属性能正确访问。
WebSocket 连接应成功。
应避免混合内容警告，确保所有请求使用 HTTPS。

PJAX 选择器优化:
- 问题： 由于 .right-sidebar 在不同页面中可能存在或不存在，导致 PJAX 切换页面时出现 "Pjax switch fail" 错误。
- 解决方法： 将 .right-sidebar 从 PJAX 的 selectors 数组中移除。
- 代码：
```
new Pjax({
 // ... 其他配置
 selectors: ["pjax", "script[data-pjax]", "title", ".main"] // 移除 .right-sidebar
});
```
- 说明： 这个修改的前提是你的侧边栏内容不需要 PJAX 更新。如果需要更新，需要确保所有页面都有 .right-sidebar 且结构一致，或使用更精确的选择器。
内容和页脚加载:
- 问题： 缺少加载主要内容和页脚的代码，导致页面内容不完整。
- 解决方法： 在 <main> 标签中添加 <?php $this->content(); ?>，并在 <body> 的末尾添加 <?php $this->need('footer.php'); ?>。
- 代码：
```
<main class="main">
 <?php $this->content(); ?> </main>
<?php $this->need('footer.php'); ?>
```
- 说明： $this->content(); 用于显示文章或页面的主要内容，$this->need('footer.php'); 用于引入页脚文件。
JavaScript 函数的定义:
- 问题： updateIcon 和 initializeCommentsOwO 函数原本在 IIFE 中定义，导致 PJAX 回调函数无法访问。
- 解决方法： 将这两个函数移到全局作用域中定义。
- 代码：
```
// 全局函数 updateIcon
function updateIcon(theme) { /* ... */ }

// 全局函数 initializeCommentsOwO
function initializeCommentsOwO() { /* ... */ }
```
- 说明： 现在 PJAX 的回调函数可以正确访问这两个函数了。
updateIcon 函数中的 null 检查:
- 问题： 如果 theme-icon 元素不存在，访问其属性会导致错误。
- 解决方法： 添加 if (iconElement) 条件语句。
- 代码：
```
function updateIcon(theme) {
 const iconElement = document.getElementById('theme-icon');
 if (iconElement) { //  只有当 iconElement 存在时才执行
     // ...
 }
}
```
- 说明： 这可以避免在 theme-icon 元素不存在时出现错误。
OwO 初始化:
- 问题： OwO 表情可能只在页面初始加载时初始化，PJAX 更新后可能无法正常工作。
- 解决方法： 在 DOMContentLoaded 和 pjax:success 事件中都调用 initializeCommentsOwO 函数。
- 代码：
```
document.addEventListener('DOMContentLoaded', () => {
// ...
 initializeCommentsOwO(); // 初始加载时初始化
});

document.addEventListener("pjax:success", () => {
 // ...
 initializeCommentsOwO(); // PJAX 更新后初始化
});
```
- 说明： 确保 OwO 表情在页面加载和 PJAX 更新后都能正常工作。

riceshowerX / PureSuck

问题1 #1