0x00 前情概要
最近我花了不少时间对我的博客进行了一些技术上的优化和改进，目的就是为了给大家提供一个更快、更流畅且更加有趣的阅读体验。今天我想跟大家分享一下这些变化背后的故事。虽然这篇文章的确有点标题党，但我这个月的开销确实比上个月多了不少，扯远了让我们回到正题。
0x01 Expressive Code
就像它介绍的那样，Expressive Code 在 Web 上展示我们代码块，使其易于理解且有令人惊叹的视觉效果。通过使用 Expressive Code 的 JavaScript 库，我可以在我的 Astro 博客中展示代码块时，保留终端风格的 ANSI 转义序列，并且能够正确渲染它们。
渲染 ANSI 转义序列
在开发实践中，我们经常需要展示带有颜色标记的命令行输出。传统的 Markdown 渲染器（例如 VS Code）会将 ANSI 转义序列直接显示为乱码字符，而 Expressive Code 能智能解析这些序列并转化为 CSS 样式。不信？试试下面的代码块：
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold: Red Green Yellow Blue Magenta Cyan
- Dimmed: Red Green Yellow Blue Magenta Cyan
256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177
Standard ANSI colors:
- Dimmed: Black Red Green Yellow Blue Magenta Cyan White
- Foreground: Black Red Green Yellow Blue Magenta Cyan White
- Background: Black Red Green Yellow Blue Magenta Cyan White
- Reversed: Black Red Green Yellow Blue Magenta Cyan White
8-bit colors:
\e[0;30m] \e[0;31m] \e[0;32m] \e[0;33m] \e[0;34m] \e[0;35m] \e[0;36m] \e[0;37m]
\e[0;40m] \e[0;41m] \e[0;42m] \e[0;43m] \e[0;44m] \e[0;45m] \e[0;46m] \e[0;47m]
\e[0;90m] \e[0;91m] \e[0;92m] \e[0;93m] \e[0;94m] \e[0;95m] \e[0;96m] \e[0;97m]
\e[0;100m] \e[0;101m] \e[0;102m] \e[0;103m] \e[0;104m] \e[0;105m] \e[0;106m] \e[0;107m]
\e[1;30m] \e[1;31m] \e[1;32m] \e[1;33m] \e[1;34m] \e[1;35m] \e[1;36m] \e[1;37m]
\e[1;40m] \e[1;41m] \e[1;42m] \e[1;43m] \e[1;44m] \e[1;45m] \e[1;46m] \e[1;47m]
\e[1;90m] \e[1;91m] \e[1;92m] \e[1;93m] \e[1;94m] \e[1;95m] \e[1;96m] \e[1;97m]
\e[1;100m] \e[1;101m] \e[1;102m] \e[1;103m] \e[1;104m] \e[1;105m] \e[1;106m] \e[1;107m]
\e[2;30m] \e[2;31m] \e[2;32m] \e[2;33m] \e[2;34m] \e[2;35m] \e[2;36m] \e[2;37m]
\e[2;40m] \e[2;41m] \e[2;42m] \e[2;43m] \e[2;44m] \e[2;45m] \e[2;46m] \e[2;47m]
\e[2;90m] \e[2;91m] \e[2;92m] \e[2;93m] \e[2;94m] \e[2;95m] \e[2;96m] \e[2;97m]
\e[2;100m] \e[2;101m] \e[2;102m] \e[2;103m] \e[2;104m] \e[2;105m] \e[2;106m] \e[2;107m]
\e[3;30m] \e[3;31m] \e[3;32m] \e[3;33m] \e[3;34m] \e[3;35m] \e[3;36m] \e[3;37m]
\e[3;40m] \e[3;41m] \e[3;42m] \e[3;43m] \e[3;44m] \e[3;45m] \e[3;46m] \e[3;47m]
\e[3;90m] \e[3;91m] \e[3;92m] \e[3;93m] \e[3;94m] \e[3;95m] \e[3;96m] \e[3;97m]
\e[3;100m] \e[3;101m] \e[3;102m] \e[3;103m] \e[3;104m] \e[3;105m] \e[3;106m] \e[3;107m]
\e[4;30m] \e[4;31m] \e[4;32m] \e[4;33m] \e[4;34m] \e[4;35m] \e[4;36m] \e[4;37m]
\e[4;40m] \e[4;41m] \e[4;42m] \e[4;43m] \e[4;44m] \e[4;45m] \e[4;46m] \e[4;47m]
\e[4;90m] \e[4;91m] \e[4;92m] \e[4;93m] \e[4;94m] \e[4;95m] \e[4;96m] \e[4;97m]
\e[4;100m] \e[4;101m] \e[4;102m] \e[4;103m] \e[4;104m] \e[4;105m] \e[4;106m] \e[4;107m]
\e[5;30m] \e[5;31m] \e[5;32m] \e[5;33m] \e[5;34m] \e[5;35m] \e[5;36m] \e[5;37m]
\e[5;40m] \e[5;41m] \e[5;42m] \e[5;43m] \e[5;44m] \e[5;45m] \e[5;46m] \e[5;47m]
\e[5;90m] \e[5;91m] \e[5;92m] \e[5;93m] \e[5;94m] \e[5;95m] \e[5;96m] \e[5;97m]
\e[5;100m] \e[5;101m] \e[5;102m] \e[5;103m] \e[5;104m] \e[5;105m] \e[5;106m] \e[5;107m]
24-bit colors (full RGB):
- Dimmed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Foreground: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Background: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Reversed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
256 colors:
0 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
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219
220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239
240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
Font styles:
- Default
- Bold
- Dimmed
- Italic
- Underline
- Reversed
- Strikethrough
Text formatting: Bold Dimmed Italic Underline使用 Bash 生成两个表格：
# 生成 ANSI 颜色表格 ref: https://gist.github.com/JBlond/2fea43a3049b38287e5e9cefc87b2124?permalink_comment_id=5414733#gistcomment-5414733
for x in {0..5}; do echo --- && for z in 0 10 60 70; do for y in {30..37}; do y=$((y + z)) && printf '\e[%d;%dm%-12s\e[0m' "$x" "$y" "$(printf ' \\e[%d;%dm] ' "$x" "$y")" && printf ' '; done && printf '\n'; done; done
# 生成 256 色表格
for i in {0..255}; do printf "\033[38;5;${i}m%3d\033[0m " "$i"; ((i % 20 == 19)) && echo; done如你所见，Expressive Code 能够正确渲染 ANSI 转义序列，并将其转换为相应的 CSS 样式。这样一来，我就可以在博客中展示更丰富的代码块内容，而不必担心乱码问题。通过引入一个小小的组件，现在博客中的每个代码块都能保持终端原生或者 Github 风格的视觉体验，同时获得网页展示的灵活性。
自动换行
说到代码块样式，最让我惊喜的是它支持智能换行功能。以前长代码总要在屏幕左右滑动找尾巴，现在只要设置个 wrap 参数，超长代码就会自动折行显示。就像下图这样（在手机上浏览长代码时再也不用左右滑动了）：
function getLongString() {
return "This is a very long string that will most probably not fit into the available space unless the container is extremely wide";
}
getLongString();对比传统代码块：
function getLongString() {
return "This is a very long string that will most probably not fit into the available space unless the container is extremely wide";
}
getLongString();终端风格的代码块
是的，你没有看错！Expressive Code 还支持终端风格的代码块，这意味着我可以在博客中展示类似于命令行界面的代码块，使得代码块看起来更像是在真实的终端中运行的。
# This is a terminal-style code block
echo "Hello, World! It supports ANSI colors and styles."# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-TailCollapsible Sections
是的，我还安装了一个名为 Collapsible Sections 的插件，它允许我在代码块中创建可折叠的部分，非常适合隐藏冗长的代码或注释，帮助读者更聚焦于核心内容。这里贴上官网的示例：
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from "@example/some-boilerplate";
import { evenMoreBoilerplate } from "@example/even-more-boilerplate";
const engine = someBoilerplateEngine(evenMoreBoilerplate());
// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn);
function calcFn() {
// You can have multiple collapsed sections
const a = 1;
const b = 2;
const c = a + b;
// This will remain visible
console.log(`Calculation result: ${a} + ${b} = ${c}`);
return c;
}
// All this code until the end of the block will be collapsed again
engine.closeConnection();
engine.freeMemory();
engine.shutdown({ reason: "End of example boilerplate code" });如何安装？
说了这么多，如何在自己的 Astro 博客中使用 Expressive Code 呢？其实非常简单，按照官网文档的说法，只需要在 Astro 项目中安装 astro-expressive-code 包，然后全站代码块就会自动使用 Expressive Code 渲染，无需额外配置！
npx astro add astro-expressive-code整个过程就像点外卖一样方便，装完即用，完全不用手动配置。现在我的博客终于能完美呈现代码的「原生质感」，朋友们都说像在看真正的开发环境演示。
0x02 Plausible Analytics
为了更好地了解读者的行为和偏好，我还集成了 Plausible Analytics。这是一个轻量级、隐私友好的网站分析工具，能够提供关于访问量、用户来源、页面浏览等数据的详细统计。通过 Plausible，我可以更好地了解哪些内容最受欢迎，哪些页面需要优化，从而不断改进博客的质量和用户体验。Plausible 的安装也非常简单，只需在 Astro 项目中添加 script 标签即可。
为什么选择 Plausible Analytics？
和 Google Analytics 不同，Plausible Analytics 更注重用户隐私和数据安全。它不使用 Cookies，也不收集个人数据，完全符合 GDPR 和 CCPA 等隐私法规。此外，Plausible 的界面非常简洁，易于理解，适合像我这样的小型博客使用。但是请注意，Plausible Analytics 后端服务器相当消耗资源，尤其是在访问量较大的时候。因此，我建议如果你有考虑自建 Plausible Analytics 的话，考虑选择 4GB 内存以上的云服务器。作为参考，我的实例分配了 8GB，毕竟这种分析工具在数据量大的时候还是挺吃资源的。
0x03 其他更新
除了 Expressive Code 和 Plausible Analytics，我还对博客做了一些其他的更新和优化：
- 新增了几篇关于 Linux 部署的实战笔记，包括如何用 Docker Compose 搭建本地开发环境和用于生产的小技巧。最近收到读者留言说「你一顿吃多少 Emoji」，这很明显是关注我 Docker Hub 动态的读者，让我觉得花时间打磨这些细节挺值得的。
- 另外调整了移动端的排版，现在在地铁上刷文章时代码块不会自动缩放了
- 优化了博客 Open Graph 和 Twitter Card 的元数据，确保在社交媒体上分享时能有更好的展示效果
那么这就是我最近对博客的更新和优化。希望这些改进能让你在阅读时有更好的体验！如果你对本文有任何疑问，欢迎在评论区留言交流。