PaperMod 主题微调：Profile Mode 下的中文排版精修

当年在启用 Hugo PaperMod 主题的过程非常顺利。在首页布局上，我选择了更符合个人品牌调性的 Profile Mode：全屏居中，只展示头像、简介和社交链接，像一张极简的数字名片。

但在“装修”的细节上，我发现了一个体验割裂的问题：首页虽然极简了，但当我点击进入某一篇具体的文章（Post Detail）时，PaperMod 默认的英文排版字体（40px+）对于中文标题来说实在太大了，充满了压迫感。

本文记录了如何通过 custom.css 解决这个问题，以及中间的一个小插曲。

1. 误区：消失的首页列表

起初，我按照网上的教程尝试修改 .entry-header 类，希望能把标题变小。结果无论怎么改，首页都没有任何变化。

经过仔细排查和 F12 审查，我才意识到自己混淆了 PaperMod 的两种模式：

Home Info Mode：首页有“个人信息 + 文章列表”。网上大部分教程都是针对这个模式的列表标题进行调整。
Profile Mode（我正在用的）：首页只有个人信息，没有文章列表。

因此，我之前尝试调整“首页列表标题”的代码全是无效代码。对于 Profile Mode 来说，真正影响阅读体验的痛点只有一个：点击进入文章后的详情页标题。

2. 解决方案：精准狙击

为了保持代码的纯净（Clean Code），我删除了所有关于首页的冗余 CSS，只针对文章详情页 (.post-title) 进行了调整。

在 assets/css/extended/custom.css 中写入：

/* ========================================================
   ChowRay.org - PaperMod (Profile Mode) 样式修正
   ======================================================== */

/* 1. 核心修正：文章详情页标题 */
/* PaperMod 默认标题过大，中文建议调整为 2rem (约 32px) */
/* 增加行高 (1.3)，避免多行标题时文字挤在一起 */
.post-title {
    font-size: 2rem !important;  
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
}

/* 2. (可选) 优化摘要文字 */
/* 统一调整摘要/引用部分的字号和颜色，增加层级感 */
.entry-content {
    font-size: 0.95rem !important;
    color: #6c757d !important;
}

/* 3. 移动端适配 */
@media screen and (max-width: 768px) {
    /* 手机上阅读时进一步缩小标题，提升首屏信息密度 */
    .post-title {
        font-size: 1.6rem !important; 
    }
}

3. 总结

这次微调让我意识到，照抄网上的教程往往行不通。

必须先明确自己的模式配置 (Profile vs HomeInfo)，才能写出最精简、最有效的代码。现在，从极简的个人主页，跳转到舒适的阅读页面，体验终于闭环了。

1. 误区：消失的首页列表#

2. 解决方案：精准狙击#

3. 总结#

1. 误区：消失的首页列表

2. 解决方案：精准狙击

3. 总结