博客改动备份

阅读数: 0次 2024-11-17

字数：1.9k字 | 预计阅读时长：8分钟

博客完善过程中免不了会有各种功能的添加、显示效果的修改、BUG的修复等等，以前的一些改动时间久了已经有点忘记了，导致再次修改时候一头雾水，从现在开始感觉还是有必要对这些改动做一些简单的记录，当成一个类似Git的版本控制备份，方便后续对博客的改动做一些回顾。

如果内容恰好可以帮助到你，我非常开心！

更换Hexo的公式渲染引擎（241018）

将原来Yilia博客主题中自带的mathjax公式渲染引擎更换为新的渲染引擎hexo-renderer-markdown-it中的一个插件markdown-it-katex，修改方法可以参考hexo-renderer-markdown-it的README中的公式配置部分（How can I add math support?）。

hexo-renderer-markdown-it：hexojs/hexo-renderer-markdown-it: Markdown-it is a Markdown parser, done right. A faster and CommonMark compliant alternative for Hexo.

markdown-it-katex：renbaoshuo/markdown-it-katex: Add Math to your Markdown with a KaTeX plugin for MarkdownIt

安装插件后，在配置文件hexo-renderer-markdown-it的插件列表中添加：

- name: '@renbaoshuo/markdown-it-katex'
      options:
        skipDelimitersCheck: true
        strict: false

KaTeX样式表的CDN链接添加在了Blog\themes\yilia\layout\_partial\article.ejs中：

<!-- 添加用于hexo-renderer-markdown-it渲染器的数学公式插件markdown-it-katex配置 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css"
/>

Yilia主题配置中的数学公式mathjax选项配置为false。

修复KaTeX公式过长超出页面（241106）

KaTeX公式比较长时候，手机或电脑将窗口拉小时公式会超出屏幕显示范围，在main.0cf68a.css中加入以下代码：

/*为过长的公式加滚动条*/
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
}

可在公式过长时候像代码块一样加入一个滚动条。

现在因为不知道源码如何重构，只能在源代码生成后的CSS里改，找时间重构一下源码。

更换404页面（241117）

由于一些奇怪的原因，原来的404页面显示有问题，而且以前的404页面比较复杂，加载时候会有点慢。

换了一个更加简洁的404页面，把所有的CSS和JS代码都整合到了一个HTML文件中，感谢分享：

52linglong/404: 404模板

好看的404模板*直接免费下载_404页面模板下载 *单页HTML_主题通用 - 陶小桃Blog

对页面中的文字与按钮部分做了一些定制的修改，使页面更加简洁。

查看更改之后的404页面，可以访问网页：404 - 该页面不存在

解决网页在浏览器控制台中的一个报错（241123）

这个报错和解决方案适用于Yilia主题。

分析网站时，突然发现浏览器中一个502 Bad Gateway报错，这个报错有时候会在网页加载完成后一段时间出现，看报错信息，发现是访问链接//litten.me:9005/badjs/超时，错误代码源头在文件main.xxxxx.js中，文件中的第192个模块会对这个链接返回一些错误监控和报告信息，详情见：主题会发送一个请求到https://litten.me:9005/badjs/，并且地址不可达 · Issue #580 · litten/hexo-theme-yilia，是作者用来收集一些错误信息，帮助更好完善主题的，为异步加载，不会对性能产生影响。目前由于//litten.me:9005/badjs/网站已经无法访问了，所以会出现超时502 Bad Gateway报错，192模块代码如下：

192: function (e, t, n) {
        "use strict";
        function o(e) {
            var t = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i"),
                n = window.location.search.substr(1).match(t);
            return null != n ? unescape(n[2]) : null;
        }
        var r = n(388);
        if ((n(197), window.BJ_REPORT)) {
            BJ_REPORT.init({ id: 1 }),
                BJ_REPORT.init({
                    id: 1,
                    uin: window.location.origin,
                    combo: 0,
                    delay: 1e3,
                    url: "//litten.me:9005/badjs/",
                    ignore: [/Script error/i],
                    random: 1,
                    repeat: 5e5,
                    onReport: function (e, t) {},
                    ext: {},
                });
            var i = window.location.host,
                a = top === window,
                u = !(
                    /localhost/i.test(i) ||
                    /127.0.0.1/i.test(i) ||
                    /0.0.0.0/i.test(i)
                );
            a && u && BJ_REPORT.report("yilia-" + window.location.host);
            var l = o("f"),
                c = "yilia-from";
            l
                ? (a && BJ_REPORT.report("from-" + l), r.set(c, l))
                : document.referrer.indexOf(window.location.host) >= 0
                ? ((l = r.get(c)), l && a && BJ_REPORT.report("from-" + l))
                : r.remove(c);
        }
        e.exports = { init: function () {} };
    }

第16行就是出错的网站url，如果想要删除这个错误，可以直接将这一行url注释掉，或者参考如下链接，直接删除整个模块：

yilia主题常见问题及解决办法下 | akbcd博客

查找并删除代码：在该js文件中查找//litten.me:9005/badjs/这段URL，找到包含这段URL的函数，并将其删除。具体来说，就是删除从192:到193之间的所有内容，即上面代码块中的全部内容。
删除函数的调用：在同一文件中搜索192，会看到n(386),n(192);这样的代码，将n(192);删除，并将n(386),改为n(386);。

重新生成部署一下，发现报错消失。

修改404页面，解决报错（241126）

解决cordClip找不到404 Not Found报错，修改404.html

解决报错：Uncaught TypeError: Cannot read properties of null(reading 'addEventListener')

这是Kimi给出的解答：

出现Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')错误通常意味着你尝试在一个null值上调用addEventListener方法。这通常发生在你尝试选择一个不存在的DOM元素时。
在你的代码中，问题出在这一行：
1
const burger = document.querySelector(".burger");
如果页面上没有类名为.burger的元素，document.querySelector(".burger")将返回null。然后，当你尝试在这个null值上调用addEventListener时，就会抛出上述错误。
要解决这个问题，请确保：
页面上确实存在一个类名为.burger的元素。
JavaScript代码在DOM元素加载完成后执行。如果JavaScript代码在文档的<head>标签中，或者在<body>标签的开始处，它可能会在DOM元素渲染之前执行。确保你的JavaScript代码在DOM元素渲染之后执行，或者使用事件委托或者DOMContentLoaded事件来确保DOM完全加载。
例如，你可以将JavaScript代码放在<body>标签的底部，或者使用以下方式确保DOM加载完成：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.addEventListener("DOMContentLoaded", function () {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector("nav");

  if (burger) {
    burger.addEventListener("click", (e) => {
      burger.dataset.state === "closed"
        ? (burger.dataset.state = "open")
        : (burger.dataset.state = "closed");
      nav.dataset.state === "closed"
        ? (nav.dataset.state = "open")
        : (nav.dataset.state = "closed");
    });
  }
});
这样，你可以确保在尝试访问.burger元素之前，DOM已经完全加载，并且该元素存在。如果元素不存在，代码不会尝试添加事件监听器，从而避免了错误。