修改Anzhiyu主题的列表样式和粗体样式

在使用anzhiyu主题时，主题将默认的数字和短横线列表项替换为蓝色圆点或带数字的蓝色圆点，并且Markdown 中的加粗文本（**...**）默认显示为蓝色，而非普通的黑色加粗文本。

于是乎，我开启了vibe coding，本文由qwen3-coder提供支持。（cursor到期了，悲）

列表样式的解决

在/themes/anzhiyu/source/css/_extra/anzhiyu/custom.css中添加如下内容：

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* 恢复默认列表样式 - 更彻底的解决方案 */
#article-container ol,
#article-container ul {
  list-style: inherit !important;
  padding-left: 1.5rem !important;
  counter-reset: none !important;
  background: transparent !important;
  margin-top: 0.4rem !important;
  margin-left: 0 !important;
}

#article-container ol {
  list-style: decimal !important;
}

#article-container ul {
  list-style: disc !important;
}

/* 移除主题自定义的:before伪元素并统一设置列表项样式 */
#article-container ol li::before,
#article-container ul li::before,
#article-container ul > li:not(.tab)::before {
  display: none !important;
  content: "" !important;
  background: none !important;
  color: inherit !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: inherit !important;
  line-height: inherit !important;
  transition: none !important;
  border: none !important;
}

/* 统一设置marker样式和列表项样式 */
#article-container ol::marker,
#article-container ul::marker,
#article-container li::marker {
  color: var(--font-color) !important;
  font-size: 1em !important;
  vertical-align: baseline !important;
}

#article-container ol > li:not(.tab),
#article-container ul > li:not(.tab) {
  padding: 0.1em 0 !important;
  margin: 0.2rem 0 !important;
  background: transparent !important;
  position: static !important;
}

#article-container ol li,
#article-container ul li,
#article-container ol li:hover,
#article-container ul li:hover {
  background: transparent !important;
  color: var(--font-color) !important;
  transition: none !important;
}

#article-container ol li a,
#article-container ul li a,
#article-container ol li a:hover,
#article-container ul li a:hover {
  background: transparent !important;
  color: var(--anzhiyu-fontcolor) !important;
  transition: none !important;
}

/* 增大二级列表的缩进距离 */
#article-container ol ol,
#article-container ul ul,
#article-container ol ul,
#article-container ul ol {
  margin-left: 2rem !important;
}

#article-container.post-content li::marker {
  content: unset !important;
  color: var(--font-color) !important;
}

#article-container code {
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0 4px;
  line-height: 2;
  box-shadow: var(--anzhiyu-shadow-border);
}

#article-container.post-content li::marker {
  content: none;
}

通过以上修改，列表将恢复为以下默认样式：

  1. 有序列表显示为正常的数字编号（1., 2., 3., …）
  2. 无序列表显示为默认的短横线（•）
  3. 列表标记颜色为正常黑色文本
  4. 二级列表有适当的缩进

粗体样式的解决

只需修改 /themes/anzhiyu/source/css/_extra/reset/reset.css文件，将加粗文本颜色从蓝色改为默认字体颜色。

将原文下面这部分代码：

1
2
3
b, strong {
  color: var(--anzhiyu-lighttext);
}

改为下面这样：

1
2
3
b, strong {
  color: var(--font-color);
}

通过修改，加粗文本不再显示为蓝色，而是黑色的粗体。

本文使用CC BY-NC-SA 4.0协议进行许可