时隔近 3 年重启 61dh。原本的 2.0.0-beta.51 本地已跑不动，升级到 ^2.0.0-rc.24。本文记录升级过程中的关键改动与差异，方便以后回看。

TL;DR

• 插件与 bundler 升级：替换 vuepress-plugin-sitemap2 → @vuepress/plugin-sitemap，显式使用 viteBundler()。
• 主题默认样式调整：.vp-features / .vp-feature 等类名替代旧的 .features / .feature，并对齐官方样式。
• 首页 footer 在 .vp-home 内：通过 display:flex + margin-top:auto 实现短页贴底、长页自然下推。
• 工具函数 inferSiderbars → inferSidebars，同时支持自动生成带标题/链接的 sidebar。
• 链接/排版风格：移除正文 p a 的下划线、减小 h2 顶部空白。

改动概览（Diffstat）

 docs/.vuepress/config.js         |  12 +++++---
 docs/.vuepress/styles/index.scss |  50 ++++++++++++++++++++-----------
 docs/.vuepress/utils.js          |  20 ++++++++----
 docs/README.md                   |  15 +++++----
 docs/english/README.md           |   2 +-
 docs/health/README.md            |   2 +-
 docs/other/README.md             |   2 +-
 docs/photography/README.md       |   2 +-
 docs/tech/README.md              |   2 +-
 9 files changed, ~80 insertions(+), ~40 deletions(-)

关键改动

1. 配置 (.vuepress/config.js)

• 引入新 bundler 与主题 API：

  import { viteBundler } from "@vuepress/bundler-vite";
  import { defaultTheme } from "@vuepress/theme-default";
  import { defineUserConfig } from "vuepress";
  
• 插件更新：
  • vuepress-plugin-sitemap2 → @vuepress/plugin-sitemap
• 添加 bundler: viteBundler() 配置
• 修正 inferSiderbars → inferSidebars

2. 样式 (.vuepress/styles/index.scss)

• 类名对齐 VuePress v2：
  • .theme-container → .vp-theme-container
  • .hero → .vp-hero
  • .home → .vp-home
  • .description → .vp-hero-description
  • .features → .vp-features
  • .feature h2 → .vp-feature h2
• 新增卡片 hover 与可点击样式：

  a.vp-feature { text-decoration: none }
  .vp-feature:hover span { color: var(--vp-c-accent, #299764); }
  
• Footer 粘底：

  .vp-home { display:flex; flex-direction:column; min-height:100vh; }
  .vp-home .vp-footer { margin-top:auto; flex-shrink:0; }
  

3. Sidebar 工具 (.vuepress/utils.js)

• 函数重命名 inferSiderbars → inferSidebars
• 支持把 .md 文件转成 { text, link } 对象：

  const children = fs.readdirSync(dirpath)
    .filter(item => item.endsWith(".md"))
    .map(item => {
      const name = item.replace(/\.md$/, "");
      return {
        text: name === "README" ? "首页" : name,
        link: `${parent}${name === "README" ? "" : name}.html`,
      };
    });
  

4. 首页内容 (docs/README.md)

• footer 年份更新：2022 → 2025
• Feature 块从：

  <div class="features">
    <div class="feature" v-for="feat in $page.frontmatter.xfeatures">…</div>
  </div>
  
  改为：

  <div class="vp-features">
    <a v-for="feat in $page.frontmatter.xfeatures"
       class="vp-feature"
       :href="feat.link">
      <h2>{{ feat.title }}</h2>
      <p>{{ feat.details }} <span class="go">GO →</span></p>
    </a>
  </div>
  

5. 其他文档 Frontmatter

• 统一把各文档的 sidebar: auto → sidebar: heading。

总结

这次升级主要涉及：

• 依赖更新（插件、bundler、theme API）
• 样式类名重构（全面迁移到 .vp-* 前缀）
• 工具函数改进（sidebar 自动生成更语义化）
• 页面结构调整（features/首页 footer）

升级后站点在 VuePress 2.0.0-rc.24 下已顺利跑通，后续等待 2.0 正式版再进一步微调。