---
title: Blog's change in 2025
date: 2026-01-04
tags:
  - Essay
  - Blog
excerpt: "2025年对Blog功能和性能上做了优化。本文将回顾这一年来的主要变化（主要为流水账）"
---

## Markdown

今年年初将 Markdown 渲染引擎切换为 markdown-it，主要为使用Obsidian Callout插件

后面基于 markdown-it [[inline_code_highlight|折腾行内代码高亮]]插件，由于markdown-it不支持异步，导致插件编写的方式比较别扭

又后来，刷推特发现 [SerKo](https://serko.dev/) 用 TypeScript 重写了该引擎，并支持异步渲染。于是开发了对应的 [hexo renderer插件](https://github.com/Efterklang/hexo-renderer-markdown-exit) 并将插件迁移至 Markdown Exit 生态，好消息是CI 构建时间也从 110s 降至 90s。另外对markdown it的社区生态也有了更多的了解，今年新增/更换如下 markdown-it 插件：

- 数学公式渲染：采用 markdown-it-mathjax3-pro，支持服务端生成（Server Side Generation）
- 标题锚点：使用 markdown-it-anchors，为 h1-h6 添加页内链接
- 选项卡：用 @mdit/tabs 替代 Hexo Custom Tag
- 脚注：支持 markdown-it-footnote
- 各插件的预览效果见 [[test_markdown|markdown preview]]

## Image

- [[medium-zoom|2 月 22 日]]引入了 [medium-zoom](https://github.com/francoischalifour/medium-zoom) 插件，实现类似 [Medium](https://medium.com/) 的图片点击放大预览，显著提升了图片浏览体验。

|                                                        Before<br>                                                         |                                                          After                                                           |
| :-----------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: |
| <video autoplay loop muted playsinline><source src="https://assets.vluv.space/medium_zoom1.mp4" type="video/mp4"></video> | <video autoplay loop muted playsinline><source src="https://assets.vluv.space/medium-zoom.mp4" type="video/mp4"></video> |

- **响应式与渐进式加载**
  - [[responsive_image|7 月 24 日]]：为图片添加响应式设计，适配不同终端。
  - 9 月 6 日：实现图片渐进式加载，优先加载低分辨率占位图或 [ThumbHash](https://evanw.github.io/thumbhash/) 占位图，提升首屏速度。
- **性能相关优化**
  - [x] 图片格式统一采用 avif/webp，替代传统 jpg/png/gif，显著减小体积。
  - [x] 图片托管迁移至 Bitiful OSS，分发采用 EdgeOne/Bitiful CDN。
  - [x] 响应式加载与渐进式加载技术，减少带宽消耗，提升加载体验。
  - [x] 懒加载原图，优先展示小体积缩略图或 Base64 占位图。

## Color

- 2月17日开始主题支持 [Catppuccin Mocha](https://catppuccin.com/) 配色，后续又新增了 Tokyo Night、Nord 等多套主题。按下`Ctrl/Cmd + Shift + P`即可切换主题
- 多主题适配范围涵盖：
  - [x] 行内代码
  - [x] 代码块
  - [x] Blog Logo
  - [x] Twikoo 评论
  - [x] Obsidian Callout
  - [x] 大部分 SVG 图片
  - [ ] Mermaid：等上游支持，[mermaid Issue #6677](https://github.com/mermaid-js/mermaid/issues/6677)

<video autoplay loop muted playsinline style="width: 80%">
  <source src="https://assets.vluv.space/blog_themes.webm" type="video/webm">
</video>

## Font

字体方面，主要使用OS内置的字体；由于大多数系统没有内置Nerd Font，代码字体引入了Maple Mono NF CN网络字体

---

<h4 style="font-family: var(--font-serif);">Serif Font 衬线</h4>
<font id="Serif" style="font-family: var(--font-serif);"></font>

<h4 style="font-family: var(--font-sans-serif);">Sans Serif Font 无衬线</h4>
<font id="Sans-Serif" style="font-family: var(--font-sans-serif);"></font>

<h4 style="font-family: var(--font-handwriting);">Handwriting Font 手写</h4>
<font id="Handwriting" style="font-family: var(--font-handwriting);"></font>

<h4 style="font-family: var(--font-mono);">Monospace Font 等宽</h4>
<font id="monospace" style="font-family: var(--font-mono);"></font>

<script data-swup-reload-script>
    document.getElementById("Serif").innerText = window.getComputedStyle(document.body).getPropertyValue('--font-serif');
    document.getElementById("Sans-Serif").innerText = window.getComputedStyle(document.body).getPropertyValue('--font-sans-serif');
    document.getElementById("Handwriting").innerText = window.getComputedStyle(document.body).getPropertyValue('--font-handwriting');
    document.getElementById("monospace").innerText = window.getComputedStyle(document.body).getPropertyValue('--font-mono');
</script>

---

## Responsive Design

移动端的适配也很重要，2025年主要做了以下优化：

- **TOC**：移动端屏幕右下角新增按钮，点击弹出目录。
- **Navbar Burger**：移动端点击后，菜单在导航栏下方展开。

![20260104230550174](https://assets.vluv.space/20260104230550174.avif)

## End

还有一些杂项修改：

- 使用ESBuild, Minify-HTML代替Hexo-Minifier-All，相关文章 [[post-build]]
- 移除Bulma CSS中未使用的样式，将不同端的CSS拆分加载，优化性能
- 重写Footer样式
- 用iconify-icon代替FontAwesome图表
- 移除Hexo Category插件，后面写文章只使用Tag标注
- 修改Archive界面，按年份-季节归档
- 完成备案，加入开往
- To Be Continued?...

还有细节没有列出，放在 [ChangeLog - GnixAij-Blog](https://vluv.space/change)，后面如果勤快，就补充一下吧