个人网站的内容结构和设计风格

先把站点的定位说清楚，后面每写一篇文章都会更顺手。

目前这个博客主要围绕三类内容展开：

  • 数学札记
  • 技术博客
  • 兴趣爱好

其中，数学札记和技术博客会是后续的重点，尤其适合记录：

  • 定义、定理和推导过程
  • 算法实现与代码实验
  • 读书笔记和阶段性复盘
  • 一个主题分多次写完的连续记录

所以这个站点的结构不是简单把文章平铺出来，而是尽量把“分类”“系列”和“回看路径”一起组织好。

内容结构

内容层面上，主要有三个抓手：

  • categories 用来区分内容的大方向，比如数学札记、技术博客、兴趣爱好
  • tags 用来标注更细的关键词，比如某个领域、一本书、一个框架
  • series 用来串起同一主题下的分次记录

其中 series 对读书笔记尤其有用。

同一本书往往不会一次看完，有时会按章节写，有时会隔几天再补新的理解。如果每次都写成完全独立的文章，后面回看就容易散掉；把它们放进同一个系列后，文章页右侧就能看到完整的连续线索。

设计风格

页面视觉上现在保留了玻璃态的基调，但已经尽量把外层的漂浮效果收轻了。整体更偏向：

  • 首页有一点个人气质，但不过分装饰
  • 列表页强调内容组织，而不是堆花样
  • 文章页更像 lecture notes 或 research notes，适合长期写数学和代码记录

换句话说，首页可以温柔一点，但真正进入文章后，阅读体验会更偏学术笔记和技术手册。

如何添加新的 Blog

以后新增一篇笔记，最稳的方式是直接用 Hugo 命令生成。

在项目根目录运行：

cd /Users/zeroling/Desktop/MyBlog/my-study-blog
hugo new content posts/泛函分析-01/index.md

执行之后，会自动生成一篇带 front matter 的新文章。你现在的默认模板大致是这样：

+++
date = '2026-03-26T20:00:00+08:00'
draft = true
title = '泛函分析 01'
description = ''
summary = ''
categories = ['个人博客']
tags = []
series = []
ShowToc = true
+++

通常你只需要重点改这几项：

  • title：文章标题
  • description：一句话简介
  • summary：列表页摘要
  • categories：归到哪一类
  • tags：关键词
  • series：如果是连续笔记，就填系列名
  • draft = false：准备发布时改掉

比如一篇数学笔记可以写成：

+++
date = '2026-03-26T20:00:00+08:00'
draft = false
title = '泛函分析读书笔记 01｜赋范线性空间'
description = '整理赋范空间、Banach 空间与几个基础例子。'
summary = '这一篇先收拢定义、直觉和常见例子。'
categories = ['数学札记']
tags = ['泛函分析', 'Banach空间']
series = ['泛函分析读书笔记']
ShowToc = true
TocOpen = true
+++

写完之后，本地预览会自动刷新；如果你想手动确认，可以保持 hugo server 运行，然后打开对应页面查看。

一个简单的写作规则

为了后面查找方便，我建议长期保持下面这个习惯：

  • 一类内容只用一个固定的 category
  • 同一本书或同一专题统一挂在一个 series
  • tags 留给更细的主题词，不要把它当分类来用

这样几年之后回看，结构也不会乱。

在 VS Code 中如何更直观地编辑 Markdown 文档

如果未来重点写的是数学和代码笔记，那 VS Code 已经足够用了，而且很适合和 Hugo 一起工作。

基本工作流

最推荐的写法是左右分栏：

  • 左边写 Markdown 源码
  • 右边打开实时预览

VS Code 里可以直接用内置预览：

Cmd/Ctrl + K V

这样写标题、列表、代码块时，右边会实时看到排版效果。

代码块怎么写

代码块一定记得带语言名，这样高亮会稳定很多：

def norm_sq(xs):
    return sum(x * x for x in xs)

double dot(const vector<double>& a, const vector<double>& b) {
    double ans = 0.0;
    for (size_t i = 0; i < a.size(); ++i) ans += a[i] * b[i];
    return ans;
}

数学公式怎么写

在 Markdown 里，通常会这样写公式源码：

行内公式：$L^2(\Omega)$

块公式：

$$
\|f\|_{L^2}^2 = \int_\Omega |f(x)|^2 \, dx
$$

如果只是为了在 VS Code 里更直观地编辑，预览已经足够有帮助；后面如果你希望博客网页端也把公式真正渲染出来，再接一层数学公式支持会更完整。

我推荐的 VS Code 配置

如果是长期写作，我建议至少装下面几类扩展：

  • Markdown All in One：目录、快捷键、列表体验更好
  • markdownlint：保证 Markdown 结构更整齐
  • Code Spell Checker：适合检查英文术语和变量说明

这套组合对写数学和技术笔记已经很够用。

一个更顺手的写法习惯

为了让一篇笔记后面更容易回看，我建议正文尽量保持这样的层级：

  • h2 用来划分一级主题
  • h3 用来拆具体问题
  • 公式、定义、代码示例都放在对应小节下面
  • 一篇文章尽量只围绕一个明确问题展开

这样目录会天然更像 paper outline，写到后面也不会散。

小结

这篇先把最关键的三件事定下来：

  1. 这个网站写什么，以及为什么要这样组织内容
  2. 以后新增一篇 Blog 时，具体该怎么操作
  3. 在 VS Code 里如何把 Markdown、代码和公式写得更顺手

把这三个基础动作打稳，后面无论是数学札记、技术实验，还是一本书的分次笔记，都能比较自然地持续写下去。