---
title: Blog Changes in 2025
date: 2026-01-04
tags:
  - Essay
  - Blog
excerpt: "A running review of 2025 blog changes, covering Markdown rendering, images, themes, fonts, responsive design, and performance work."
updated: 2026-07-08 08:07:36
lang: en
i18n:
  cn: /2025-changes
  translation: 2
---

## Markdown

At the beginning of this year, I switched the Markdown rendering engine to markdown-it, mainly to use the Obsidian Callout plugin.

Later, based on markdown-it, I [[inline_code_highlight|spent time building inline code highlighting]]. Because markdown-it does not support async rendering, the plugin implementation was a bit awkward.

Later still, while browsing Twitter, I found that [SerKo](https://serko.dev/) had rewritten the engine in TypeScript and added async rendering support. So I developed the corresponding [Hexo renderer plugin](https://github.com/Efterklang/hexo-renderer-markdown-exit) and migrated the plugin to the Markdown Exit ecosystem. The good news is that CI build time also dropped from 110s to 90s. I also learned more about the markdown-it ecosystem. This year I added or replaced the following markdown-it plugins:

- Math formula rendering: switched to markdown-it-mathjax3-pro, with server-side generation support.
- Heading anchors: use markdown-it-anchors to add in-page links to h1-h6.
- Tabs: use @mdit/tabs instead of Hexo Custom Tag.
- Footnotes: support markdown-it-footnote.
- Preview effects for these plugins are shown in [[test_markdown|markdown preview]].

## Image

- On [[medium-zoom|February 22]], I introduced [medium-zoom](https://github.com/francoischalifour/medium-zoom), implementing Medium-like click-to-zoom image previews and significantly improving the image browsing experience.

<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;">
  <div style="flex: 1;">
   <video autoplay loop muted playsinline><source src="https://assets.vluv.space/medium_zoom1.mp4" type="video/mp4"></video>
  </div>
  <div style="flex: 1;">
    <video autoplay loop muted playsinline><source src="https://assets.vluv.space/medium-zoom.mp4" type="video/mp4"></video>
  </div>
</div>

- **Responsive and progressive loading**
  - [[responsive_image|July 24]]: added responsive image design for different devices.
  - September 6: implemented progressive image loading, prioritizing low-resolution placeholders or [ThumbHash](https://evanw.github.io/thumbhash/) placeholders to improve first-screen speed.
- **Performance-related optimizations**
  - [x] Standardized image formats to avif/webp, replacing traditional jpg/png/gif and significantly reducing file size.
  - [x] Migrated image hosting to Bitiful OSS, with distribution through EdgeOne/Bitiful CDN.
  - [x] Used responsive loading and progressive loading to reduce bandwidth consumption and improve loading experience.
  - [x] Lazy-loaded original images, showing smaller thumbnails or Base64 placeholders first.

## Color

- Since February 17, the theme has supported the [Catppuccin Mocha](https://catppuccin.com/) color scheme. Later I added Tokyo Night, Nord, and several other themes. Press `Ctrl/Cmd + Shift + P` to switch themes.
- Multi-theme adaptation covers:
  - [x] Inline code
  - [x] Code blocks
  - [x] Blog Logo
  - [x] Twikoo comments
  - [x] Obsidian Callout
  - [x] Most SVG images
  - [ ] Mermaid: waiting for upstream support, [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

For fonts, I mainly use OS built-in fonts. Because most systems do not ship Nerd Fonts, the code font uses the Maple Mono NF CN web font.

---

<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>
    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

Mobile adaptation is also important. In 2025, I mainly made the following improvements:

- **TOC**: added a button in the bottom-right corner on mobile; tapping it opens the table of contents.
- **Navbar Burger**: on mobile, tapping it expands the menu below the navbar.

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

## End

There were also some miscellaneous changes:

- Replaced Hexo-Minifier-All with ESBuild and Minify-HTML; related post: [[post-build]]
- Removed unused styles from Bulma CSS and split CSS loading across different device targets to improve performance.
- Rewrote the Footer style.
- Replaced FontAwesome icons with iconify-icon.
- Removed the Hexo Category plugin; future posts will use only Tags.
- Modified the Archive page to archive by year-season.
- Completed ICP filing and joined 开往.
- To Be Continued?...

Some details are not listed here. They are in [ChangeLog - GnixAij-Blog](https://vluv.space/change). If I am diligent later, I will add more notes there.