• 2025年的第一篇博客，来发点修改博客的东西，争取把博客美化好一点。
  • 以后一些博客的比较实用的功能都会放在这里。

公式块默认收缩

  • 在学习数论的时候，我使用公式块记一些数学定理或者定义之类的。有些定理我希望有证明的过程，但是如果每个定理都写证明过程的话就显得我的博客文章写的非常长，而且也不是一个学习笔记该有的样子。

  • 所以我想到了一个方法（其实是看到别人的博客文章），就是将公式的证明过程放在一个数学块中，然后将该公式块设置为默认收缩。这样就解决了既要有证明过程，博客文章又不会太抓不住重点这两大问题。接下来就实现一下。

  • 实现起来很简单。这里给出两种方式，并且只演示一种方式

  • 方式一：使用butterfly主题内置的折叠功能。

  • 方式二：使用hexo-tag-collapse插件

  • 这里我就只使用方式一来实现块折叠。

方式一

  • 这个收缩框不仅仅可以搜素数学公式框，还可以收缩代码框等内容，并且展开证明也可以修改为其他内容。

  • 当我们输入一个数学公式的时候是默认展开该数学框的。这里给出一个例子。

给定一个正整数，把它叫做模.如果用m去除任意两个整数a,b所得的余数相同,则称a,b模m同余，记作a≡b(mod m).如果余数不同，则称a,b对模m不同余,记作a≢b(mod m)\begin{array}{l} \text{给定一个正整数，把它叫做模.}\\如果用m去除任意两个整数a,b所得的余数相同, 则称a,b模m同余，记作a\equiv b(mod ~m).\\ 如果余数不同，则称a,b对模m不同余,记作a\not\equiv b(mod~m) \end{array}

  • 当时我要将该数学框默认收缩。实现如下的效果：

image-20250102193259896

展开证明

给定一个正整数，把它叫做模.如果用m去除任意两个整数a,b所得的余数相同,则称a,b模m同余，记作a≡b(mod m).如果余数不同，则称a,b对模m不同余,记作a≢b(mod m)\begin{array}{l} \text{给定一个正整数，把它叫做模.}\\如果用m去除任意两个整数a,b所得的余数相同, 则称a,b模m同余，记作a\equiv b(mod ~m).\\ 如果余数不同，则称a,b对模m不同余,记作a\not\equiv b(mod~m) \end{array}

  • 要实现如上效果，就只需要按照如下格式书写即可（即在$$符号的开头添加smmary和details）：
1
2
3
4
5
6
7
8
9
10
11
<details>
<summary>展开证明</summary>

$$
\begin{aligned}
a^2 + b^2 &= c^2 \\
E &= mc^2
\end{aligned}
$$

</details>
  • 然后我们可以使用自定义的CSS来修饰这个样式。来修改展开部分的字体、颜色等，使得该部分区别于博客文章的其他重点内容。
  • 我们先在主题目录下的source/css这个文件目录下创建一个styles.css文件。

image-20250102194658591

  • 创建好该文件之后在该文件里面填充内容（填充的内容会实现什么效果我就不说了，没怎么学CSS代码AI跑的）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* 为 <details> 设置默认外部框样式 */
details {
    margin-bottom: 1em;
    border: 2px solid #0078d7; /* 蓝色边框 */
    border-radius: 5px;
    padding: 10px;
    background-color: #f1f1f1; /* 默认背景色为浅灰 */
    transition: all 0.3s ease-in-out; /* 平滑展开收缩动画 */
    color: #333; /* 默认文字颜色 */
}

/* 鼠标悬停时，外框高亮 */
details:hover {
    border-color: #005bb5; /* 边框颜色变深 */
}

/* 展开时的样式 */
details[open] {
    background-color: #000; /* 展开内容的背景色为黑色 */
    color: #fff; /* 展开时文字变为白色 */
}

/* 针对 <summary> 的样式 */
details summary {
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    color: #0078d7; /* 标题文字颜色为蓝色 */
    padding: 5px 0;
}

/* 鼠标悬停标题时 */
details summary:hover {
    text-decoration: underline; /* 添加下划线效果 */
    color: #005bb5; /* 标题颜色变深 */
}

/* 数学公式样式，确保在黑色背景下可读 */
details[open] .katex {
    color: #fff !important; /* 数学公式内容为白色 */
}

  • 添加好代码后直接保存，然后打开butterfly的配置文件，在这个位置添加一行配置文件，这样我们写的CSS文件才会被文章引用。

image-20250102194925524

  • 这样之后我们就可以修饰被我们收缩的数学框那一部分。实际效果如图所示。

image-20250102195036327

image-20250102195044461

标签切换功能