用 Nuxt 重构 Hugo Stack：一次渐进迁移的记录

从 Hugo 到 Nuxt 的结构映射、样式迁移与内容管线。

为什么重构

Hugo 很快，但在交互与组件化上有边界。Nuxt 提供了更灵活的组件体系、路由动画和客户端能力，因此这次迁移的目标是：

保留 Stack 主题的视觉语言
把内容和结构拆成组件
留出后续互动（评论、搜索、动态组件）的空间

结构映射

最直接的映射关系：

Hugo 的 layouts → Nuxt 的 layouts / components
Hugo 的 content → Nuxt Content 的 content/ + queryCollection
Hugo 的 partials → Nuxt 组件

示例：

// Nuxt Content 查询
const { data: posts } = await useAsyncData('blog-list', () =>
  queryCollection('blog').order('date', 'DESC').all()
)

视觉还原：变量优先

Stack 的质感主要来自 变量体系，比如：

--card-background
--card-border-radius
--section-separation

迁移时先确保变量一致，页面的“像不像”就会好很多。

相关文章：简单但有效

相关内容可以先用“标签/分类相似度”做启发式评分：

$score = 2\times |tags_{common}| + 1\times |categories_{common}|$

足够轻量，也能带来合理的推荐效果。

迁移心得

先搬结构，再调样式：否则会在 CSS 泥潭里迷路。
组件要小：小组件可替换性高，也更易复用。
流程自动化：能脚本化的不要手改。

下一步

评论系统（Waline）完善
搜索体验优化
更稳定的内容生成流程

这次重构的结论：先把系统拆“清楚”，再把样子调“好看”。