如题，昨天博客突然崩了。当时是想尝试添加置顶功能，然后不知道为什么编译报错，页面整个404。然后把指定功能相关的代码删除了，但仍然报错。好奇怪！

用Mac的时间机器将它恢复到了15号的样子，但是编辑任意文件，提示文件已锁定，且不能解锁。试着生成网页，也提示没有权限。于是一气之下建立了一个新的博客文件夹，把所有东西复制一份过去，然后把原文件夹删除，cd到新目录再编辑里面的内容。比较惊讶的是删除原文件夹竟然没有提示权限不够！？

于是15号之后的修改都要重做了。花了一天时间，根据之前的笔记重新操作。但是！明明是一模一样的代码，却出现了新的bugs！

解决这些bugs的过程中参考了社友AliceZ的建议，并接受了社友茨月的科普，在此感谢。

Bug 1：切换到与系统偏好相反的颜色模式后，再切换页面，颜色模式跳回到和系统偏好一致

把夜间模式相关的代码改成和这个页面所写的一致（2023-10-19版本），结果出现了这个问题。以前从未有过。解决方案如下：

<script>
    (function() {
        // 在页面加载时根据存储的主题或用户的系统偏好设置主题
        const savedTheme = sessionStorage.getItem('theme') || localStorage.getItem('theme');
        const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        const useDarkMode = savedTheme ? savedTheme === 'dark' : userPrefersDark;

        if (useDarkMode) {
            document.documentElement.classList.add('dark-theme');
        }
    })();

document.addEventListener('DOMContentLoaded', function() {
    const themeToggleCheckbox = document.getElementById('switch_default'); // 复选框
    const themeToggleMobile = document.getElementById('mobile-toggle-theme'); // 移动端切换按钮

    function updateButtonText(isDark) {
        themeToggleMobile.textContent = isDark ? '· Dark' : '· Light';
    }

    function toggleTheme() {
        const isDark = document.documentElement.classList.toggle('dark-theme');
        document.body.classList.toggle('dark-theme', isDark);
        sessionStorage.setItem('theme', isDark ? 'dark' : 'light');
        updateButtonText(isDark);
    }

    // 初始化按钮文本
    const initialIsDark = document.documentElement.classList.contains('dark-theme');
    updateButtonText(initialIsDark);

    // 为复选框和移动端的切换按钮添加事件监听器
    themeToggleCheckbox.addEventListener('change', function() {
        const isDark = themeToggleCheckbox.checked;
        document.documentElement.classList.toggle('dark-theme', isDark);
        document.body.classList.toggle('dark-theme', isDark);
        sessionStorage.setItem('theme', isDark ? 'dark' : 'light');
        updateButtonText(isDark);
    });

    themeToggleMobile.addEventListener('click', toggleTheme);
});
</script>

中途发生了一件神奇的事情：ChatGPT给我生成的代码，Light和Dark刚好是反的……我手动更换了一下才正确。实在是非常奇怪，居然出现这样的失误？

Bug 2：菜单展开时将页面左上角的内容挤到一起

如图：

也是之前根本没出现过的问题！

最后的解决是让展开的菜单栏“浮在”左上角各个元素之上，让它直接覆盖在这些元素的上面而不是挤到它们：

@media screen and (max-width: 479px) {
    .navbar-mobile .menu {
        position: absolute;
        top: 80.66px; /* 调整这个值，使菜单栏下移 */
        left: 0;
        width: 100%;
        background-color: #fff; /* 或其他颜色 */
        z-index: 2; /* 确保在其他元素之上 */
        display: none; /* 默认隐藏 */
    }

    .navbar-mobile .menu.active {
        display: block; /* 当菜单激活时显示 */
    }

    .navbar-mobile .navbar-header,
    .navbar-mobile .menu-toggle {
        z-index: 1; /* 确保在菜单之下 */
    }
}

其中80.66px是用网页检查器测量出来的上方元素的高度。这样修改后就没问题了。

反思

在这个事件中，我显然犯了一些错误。下面进行反思。

不要急着推倒重来

博客刚崩掉并且回滚代码恢复不了时，我的第一反应是用时间机器恢复到以前的版本。但是仔细想想，应该有更优的解决方案。首先，GitHub上有历史记录可以恢复！这个我根本就不知道，还是我男朋友告诉我的。但他告诉我时，我已经重建了博客文件夹，历史记录就没有了。

而且我发现我缺乏一种刨根问底的精神，觉得只要问题解决了就可以了。诚然，重建博客文件夹或许可以解决这个问题，但是一旦重建，我就没法知道究竟是什么原因导致博客崩掉的了。虽然据说程序员的原则是“能跑就行”，但是我不是程序员啊！我只是一个普通的爱好者！作为爱好的话，还是尝试深入理解其本质比较合适吧。

版本控制

在这两天之前我完全没听说过“版本控制”这个词……结果AliceZ和茨月都强调了版本控制的重要性。于是去查了，以下是GPT的解说：

Version control（版本控制）是一种记录文件更改历史的系统，以便将来可以查看特定版本的文件。版本控制系统对于软件开发项目特别有用，因为它们帮助开发团队跟踪和管理代码的更改。GitHub 是一个基于 Git 的在线版本控制系统，用于协作开发项目。

以下是如何在 GitHub 上进行版本控制的基本步骤：

1. 创建仓库（Repository）

• 访问 GitHub。
• 点击右上角的 “+”，然后选择 “New repository”。
• 填写仓库名称、描述等信息，然后点击 “Create repository”。

2. 克隆仓库（Clone）

• 找到你想要克隆的仓库。
• 点击 “Code” 按钮，复制 URL。
• 在本地计算机上打开命令行，输入以下命令：

  git clone [复制的URL]

3. 创建和切换分支（Branch）

• 在命令行中，进入你的项目目录。
• 输入以下命令创建并切换到新分支：

  git checkout -b [分支名称]

4. 添加和提交更改（Add & Commit）

• 对项目进行更改。
• 使用以下命令将更改添加到暂存区：

  git add .

• 使用以下命令提交更改：

  git commit -m "[提交信息]"

5. 推送更改到 GitHub（Push）

• 使用以下命令将更改推送到 GitHub：

  git push origin [分支名称]

6. 创建拉取请求（Pull Request）

• 返回 GitHub 的仓库页面。
• 点击 “Pull requests”，然后点击 “New pull request”。
• 选择你推送的分支，然后点击 “Create pull request”。

7. 合并拉取请求（Merge Pull Request）

• 在拉取请求页面，点击 “Merge pull request”，然后点击 “Confirm merge”。

8. 拉取最新更改（Pull）

• 在本地项目目录中，切换回主分支：

  git checkout main

• 拉取最新更改：

  git pull origin main

以上是 GitHub 版本控制的基本流程。根据项目和团队的不同，可能会有更多的步骤和策略，如代码审查、持续集成/持续部署（CI/CD）等。

大概意思是要做什么修改的时候，就切换到一个新分支，然后修改成功之后再把它拉回主分支吧。我学习！以后一定吸取教训！！

情绪管理

这一点就不多说了。昨天修了一天bug还没修好，大崩溃。今天修好了，心情就大好。感觉情绪忽上忽下的，总之还是没能成为一个成熟的大人。

寻求帮助

出现这两个新bug之后不好意思问男朋友具体的解决办法，毕竟他已经多年没写前端了（更正：他说他其实从来没写过前端……），问他会给他增加额外的学习成本。之后在闭社发嘟文吐槽，附上了问题描述，其实有暗戳戳期待会不会有人来帮忙。好在最后没有尴尬收场：茨月和AliceZ在评论区提出了观点和建议，让我学到很多，我也根据这些建议解决了部分问题。

发现我在寻求帮助的时候总是很别扭，一方面希望有人帮忙，另一方面又怕麻烦别人，于是就采取了这种迂回的方式求助（而不是比如直接给了解前端开发的社友发私信）。这跟我的性格有关，我的默认状态是不向任何人求助，自己独立解决问题。这在人生的早期比较好使，因为我当时算是同龄人中较聪明者，遇到问题的时候每每自己就给它解决了，不会造成很多困难。但是现在，我的能力渐渐触碰到天花板，遇到的无法独立解决的棘手问题越来越多，这种时候一个人内耗就不好使了。

所以真的很感谢GPT（的开发者）……虽然它经常不怎么靠谱，但是我可以一直问它而没有心理负担。但一直依赖GPT也不是办法，我总要找到一个适合我的向活人求助的方式，因为总会有需要这样的场合出现。所以还是得继续探索自我。