个人博客双语改版记录

记录这次 Hexo 个人博客改版,包括双语信息架构、SEO 统一、搜索重构和首页重设计。

Career

背景

之前这个站点更像一个“能发文章的 Hexo 博客”,文章可以正常写,但首页表达、搜索体验、SEO 配置和双语结构都比较松散。随着内容逐渐变多,这种结构会带来两个问题:

  1. 访客第一次进站时,不容易快速理解这个站点主要写什么;
  2. 自己后续维护时,配置、页面、分类、文章元数据之间会越来越不一致。

所以这次做了一轮比较完整的改版,目标不是换框架,而是在现有 Hexo + ZenMind 主题基础上,把个人站升级成一个更清晰、更稳、更容易持续维护的版本。

这次改版的目标

我给这次改版定了几个明确目标:

  • 统一站点域名和 SEO 基址,避免 canonical、feed、sitemap 指向不一致;
  • 把首页从“文章列表页”升级成“个人站落地页”;
  • 正式支持双语站点结构,而不是把中英文内容堆在同一页;
  • 让搜索、分类、标签和文章元数据具备一致的规则;
  • 降低后续维护成本,让新文章发布流程更稳定。

1. 统一域名和 SEO 信号

这次先处理的是最底层的问题:站点已经在用 miaohancheng.com,但部分配置仍然保留旧地址。这个问题会直接影响 canonical、Open Graph、feed 和 sitemap。

改法比较直接:

  • Hexo 主配置中的 url 统一切到 https://miaohancheng.com
  • 保留 CNAME 和 GitHub Actions 的自定义域名配置;
  • 生成结果统一检查 canonical 是否全部落到主域名。

这样做的好处是,搜索引擎和社交分享拿到的站点身份是一致的,不会把同一篇内容拆成多个来源。

2. 首页从文章列表改成个人站入口

原来的首页主要是按时间倒序展示文章摘要,这对博客系统来说没问题,但对个人站来说表达太弱了。

所以这次把首页拆成三段:

  • Hero:一句话说明我是谁、我主要写什么;
  • Topics:直接给出 AI、Quant、Career、Immigration 四个入口;
  • Writing:分成 Featured 和 Latest,两层展示重点文章和最近更新。

这样首页不再只是“最新几篇文章”,而是一个能回答“你是谁、这个站值不值得看、我该从哪里开始”的落地页。

3. 正式做成双语结构

之前 About 页把中英文都放在一个页面里,可读性一般,也不利于页面元信息管理。

这次改成了两个独立页面:

  • /about/ 放中文介绍;
  • /en/about/ 放英文介绍。

两个页面互相提供跳转入口,但文章本身不强制翻译。也就是说,这次采用的是“站点框架双语,内容按原语言保留”的策略。这样不会给历史文章增加维护负担,同时也能让中英文访客各自有清晰入口。

4. 重构搜索页

原来的搜索逻辑属于最小可用版本,主要有几个问题:

  • 搜索框在多个页面重复出现;
  • 同一个搜索页里会出现重复的 DOM id;
  • 每次输入都会重新请求 search.json
  • 代码里还保留了调试输出。

这次的处理方式是:

  • 搜索只保留在 /search/ 页面;
  • 头部导航改成一个明确的 Search 入口;
  • search.json 在第一次搜索时加载一次,之后走内存缓存;
  • 输入做了 debounce,并且限制结果数量;
  • Esc 可以快速清空结果。

这类改动虽然不大,但对站点交互体验和代码可维护性提升很明显。

5. 统一文章元数据模型

为了让首页、文章页、搜索页和 SEO 逻辑都能共享同一套信息,这次补齐了文章 front matter 结构,新增了几个字段:

lang:
summary:
featured:
cover:

这几个字段的作用分别是:

  • lang:控制页面语言和文章语言标识;
  • summary:给首页摘要、搜索摘要和 meta description 提供稳定来源;
  • featured:控制首页精选文章;
  • cover:给后续文章头图留好接口。

同时也顺手把文章分类和标签做了一次收敛。分类控制在少量顶层主题里,标签则主要保留英文技术关键词,避免后续内容越写越散。

6. 模板和主题层的调整

这次没有重写主题,而是在现有 ZenMind 基础上做增量修改,主要包括:

  • 给布局加上基于 page.langhtml lang 输出;
  • 把评论和浏览量脚本做成可配置开关;
  • 去掉不再需要的 jQuery 和模板调试代码;
  • 重写首页和分类页的信息组织;
  • 增加语言标识、分类 pill、精选卡片等可复用 UI。

这种做法的好处是:保留 Hexo 的轻量和简单,不需要为了一个个人站把技术栈抬得太重。

这次改版之后的效果

改完之后,这个站点对外和对内都更清晰了:

  • 对访客来说:首页可以快速理解站点定位;
  • 对搜索引擎来说:域名、canonical、站点结构更统一;
  • 对我自己来说:新文章发布时有稳定的元数据模板,后续维护成本更低。

后续还可以继续做什么

这次改版优先解决的是结构问题,后面还有一些可以继续增强的方向:

  • 给文章增加更明确的封面图策略;
  • 给首页精选区加入更细的排序规则;
  • 把外链图片逐步迁移到更稳定的静态资源路径。
# hexo # seo # frontend # blog