从博客到技术平台的最小升级路径（三）：构建平台型首页——让读者从'看到'到'发现'

写作声明 本文基于笔者对博客首页进行三次重构的实战经验。涉及的设计决策均来自真实的读者反馈和行为观察。

---

引子：首页不是文章的起点，而是内容发现的入口

专题化和标签系统完成后，我开始重构首页。

最初的想法很简单：既然有了专题，首页就展示专题列表吧。于是首页变成了这样：

[博客标题]

专题列表：
- AI 工程化实践
- 后端工程
- Agent 系统构建
- ...

最新文章：
- 文章 1
- 文章 2
- 文章 3

看起来整洁有序，但读者反馈了一个问题：

“我每次打开首页，都要先想我该进哪个专题。有时候我只是想看看你最近写了什么，但专题列表挡住了最新内容。”

问题核心：我把”分类导航”和”内容发现”混为一谈了。

专题列表适合带着明确目标的读者（“我想看 AI 相关内容”），但大多数访问首页的读者是”随便看看”的状态。他们需要的是一个内容发现界面，而不是分类目录。

---

问题诊断：传统博客首页为什么失效

传统博客首页的默认结构

大多数博客模板的首页遵循同一个模式：

最新文章（按时间倒序）
├── 文章 1（最新）
├── 文章 2
├── 文章 3
├── ...
└── 分页 → 更旧的文章

这个结构有三个假设：

1. 时间是读者最关心的维度 → 实际上读者更关心”是否相关”
2. 读者会按顺序阅读 → 实际上读者会跳着看
3. 新文章对所有人都有价值 → 实际上新老读者需求不同

技术平台首页的核心差异

技术平台的首页设计要解决一个更复杂的问题：如何让不同类型的读者都能找到适合他们的内容。

读者类型多样性：

• 新读者：不知道你是谁，想快速了解”这人写什么”
• 老读者：想看你最近更新了什么
• 目标型读者：带着具体问题来（如”RAG 部署”）
• 探索型读者：想了解某个领域（如”AI 工程”）

关键设计原则：首页应该提供多条路径，而不是单一路径。

---

框架设计：四层内容发现体系

经过试错，我设计了首页的”四层内容发现体系”：

第一层：精选内容（Featured）

目标读者：第一次访问的新读者

设计意图：用最优质的内容建立第一印象，展示博客的价值主张

内容选择：

• 3-6 篇代表性文章
• 覆盖不同专题领域
• 兼顾深度和可读性

实现方式：

# 文章 frontmatter 中标记
---
title: "xxx"
featured: true  # 精选标记
---

// 首页获取精选文章
const featuredPosts = await getCollection('blog')
  .filter(post => post.data.featured)
  .slice(0, 6);

第二层：专题入口（Topics）

目标读者：带着领域兴趣的探索型读者

设计意图：提供按技术领域浏览的路径

展示策略：

• 展示专题标题 + 简短描述
• 显示该专题下的文章数量
• 突出热门或推荐专题

<section class="topics-section">
  <h2>从专题进入</h2>
  <div class="topic-grid">
    {topics.map(topic => (
      <a href={`/topics/${topic.slug}`} class="topic-card">
        <h3>{topic.data.title}</h3>
        <p>{topic.data.description}</p>
        <span>{topic.postCount} 篇文章</span>
      </a>
    ))}
  </div>
</section>

第三层：最新更新（Latest）

目标读者：回访的老读者

设计意图：满足”看看最近更新了什么”的需求

关键设计：

• 限制数量（4-6 篇），不要无限滚动
• 明确标注发布时间
• 提供”查看全部”的入口链接

为什么限制数量：

• 老读者关心的只是”最近”，不需要历史存档
• 太多最新文章会挤压其他发现路径
• 完整的历史列表有专门的”/blog”页面

第四层：快速索引（Quick Index）

目标读者：带着具体问题的目标型读者

设计意图：提供标签、分类等元数据入口

内容构成：

• 热门标签（前 10-15 个高频标签）
• 内容分类（按文章类型如教程、指南、解读）
• 推荐阅读路径（如果有的话）

---

页面结构：从线性到网状的布局设计

传统线性布局的问题

[Header]

[Hero 区域]

最新文章
- 文章 1
- 文章 2
- 文章 3
...

[Footer]

读者只有一条路径：往下滚动。看到什么取决于你最近写了什么。

平台型首页的网状布局

[Header - 全局导航]

[Hero - 价值主张 + 搜索入口]

[精选内容 - 横向卡片]
┌─────────┐ ┌─────────┐ ┌─────────┐
│ 文章 1  │ │ 文章 2  │ │ 文章 3  │
└─────────┘ └─────────┘ └─────────┘

[专题入口 - 网格布局]
┌─────┐ ┌─────┐ ┌─────┐
│topic│ │topic│ │topic│
└─────┘ └─────┘ └─────┘

[最新更新 - 双列列表]
┌──────────┐ ┌──────────┐
│ 文章 4   │ │ 文章 5   │
├──────────┤ ├──────────┤
│ 文章 6   │ │ 文章 7   │
└──────────┘ └──────────┘

[快速索引]
标签云 + 分类入口 + RSS

[Footer]

关键变化：

• 每个区块都是独立的入口
• 读者可以在任意层级”横向跳转”
• 不同区块服务不同类型的读者

---

实战代码：Astro 首页实现

1. 数据获取层

---
// src/pages/index.astro
import { getCollection } from 'astro:content';

// 并行获取所有数据
const [
  featuredPosts,
  recentPosts,
  topics,
  tagCounts
] = await Promise.all([
  // 精选文章（最多6篇）
  getCollection('blog')
    .then(posts => posts
      .filter(p => p.data.featured)
      .slice(0, 6)
    ),

  // 最新文章（4篇）
  getCollection('blog')
    .then(posts => posts
      .sort((a, b) => b.data.pubDate - a.data.pubDate)
      .slice(0, 4)
    ),

  // 专题列表
  getCollection('topics'),

  // 标签统计
  getTagCounts(),
]);
---

2. Hero 区域

<section class="hero">
  <div class="hero-content">
    <h1>一个围绕技术专题化知识沉淀的个人知识库</h1>
    <p>涵盖后端工程、AI 工程化、分布式系统等领域</p>
    <div class="hero-actions">
      <a href="/topics" class="btn-primary">浏览专题</a>
      <a href="/guides" class="btn-secondary">查看指南</a>
    </div>
  </div>
</section>

3. 精选内容区块

<section class="featured">
  <div class="section-header">
    <h2>精选内容</h2>
    <p>优先阅读这些代表性内容</p>
    <a href="/blog">浏览全部写作 →</a>
  </div>

  <div class="featured-grid">
    {featuredPosts.map(post => (
      <article class="featured-card">
        <span class="topic-badge">{post.data.topic}</span>
        <h3><a href={`/blog/${post.slug}`}>{post.data.title}</a></h3>
        <p>{post.data.description}</p>
        <div class="meta">
          {post.data.tags.slice(0, 3).map(tag => (
            <span class="tag">{tag}</span>
          ))}
        </div>
      </article>
    ))}
  </div>
</section>

4. 专题入口区块

<section class="topics">
  <div class="section-header">
    <h2>从专题进入</h2>
    <p>按技术领域浏览内容</p>
    <a href="/topics">查看全部专题 →</a>
  </div>

  <div class="topic-grid">
    {topics.map(topic => (
      <a href={`/topics/${topic.slug}`} class="topic-card">
        <h3>{topic.data.title}</h3>
        <p>{topic.data.description}</p>
        <span class="count">{topic.postCount} 篇文章</span>
      </a>
    ))}
  </div>
</section>

5. 最新更新区块

<section class="latest">
  <div class="section-header">
    <h2>最近更新</h2>
    <p>最新发布的内容</p>
  </div>

  <div class="latest-grid">
    {recentPosts.map(post => (
      <article class="latest-card">
        <div class="meta">
          <span class="topic">{post.data.topic}</span>
          <time>{formatDate(post.data.pubDate)}</time>
        </div>
        <h3><a href={`/blog/${post.slug}`}>{post.data.title}</a></h3>
        <p>{post.data.description}</p>
      </article>
    ))}
  </div>
</section>

6. 快速索引区块

<section class="quick-index">
  <div class="tags-section">
    <h3>热门标签</h3>
    <div class="tag-cloud">
      {tagCounts.slice(0, 12).map(([tag, count]) => (
        <a href={`/tags/${tag}`} class="tag">
          {tag} <span>{count}</span>
        </a>
      ))}
    </div>
    <a href="/tags">查看全部标签 →</a>
  </div>

  <div class="categories-section">
    <h3>分类入口</h3>
    <div class="category-list">
      <a href="/categories/interpretation">原创解读</a>
      <a href="/categories/guide">实践指南</a>
      <a href="/categories/tutorial">入门教程</a>
    </div>
  </div>
</section>

---

设计决策：为什么要这样排列？

首页区块的排列顺序不是随意的，而是基于读者行为分析：

顺序决策逻辑

1. Hero（价值主张）
   └─ 新读者需要知道"这是什么地方"

2. 精选内容
   └─ 建立信任，展示最高质量内容

3. 专题入口
   └─ 引导探索，让读者找到感兴趣的领域

4. 最新更新
   └─ 服务老读者，但限制数量避免主导页面

5. 快速索引
   └─ 为带着具体问题来的读者提供快捷入口

关键权衡

精选 vs 最新：精选放前面是为了给新读者最佳第一印象。老读者会记住”/blog”页面直接看最新内容。

专题 vs 标签：专题放前面是因为它是更稳定的导航结构。标签更适合作为”相关文章”的关联方式。

限制 vs 完整：每个区块都限制数量，目的是提供”入口”而非”完整列表”。完整列表有专门的页面。

---

常见陷阱与应对

陷阱 1：首页变成”第二个 RSS”

症状：首页上只有”最新文章”，而且很长。

问题：浪费了专题化带来的组织优势，读者还是需要按时间翻找。

解决：严格限制最新文章数量（4-6 篇），给专题和精选更多空间。

陷阱 2：区块过多导致决策疲劳

症状：首页有 8+ 个区块，读者不知道该看哪里。

问题：信息过载，每条路径都重要意味着没有路径重要。

解决：合并相关区块，保持核心区块在 4-5 个。

陷阱 3：移动端体验被忽视

症状：桌面端布局精美，移动端所有区块堆叠成超长页面。

解决：

• 移动端减少每行卡片数量（3 列 → 1 列）
• 考虑在移动端折叠部分区块（如标签云）
• 确保所有可点击区域有足够大的触控区域

---

验证指标：如何判断首页设计有效

我使用以下指标验证首页设计：

1. 跳出率

首页跳出率是否下降？理想情况下，专题化首页应该让跳出率降低，因为读者有更多入口可选。

2. 平均访问页面数

读者从首页出发后访问了多少页面？平台型首页应该鼓励读者”探索”而非”看完一篇就走”。

3. 专题页流量占比

有多少读者通过首页进入专题页？这反映专题入口的有效性。

4. 搜索使用率

如果搜索使用率很高，可能说明导航设计还不够直观（读者找不到，只能搜索）。

---

结语：首页是产品的”门面”

完成首页重构后，我收到一条读者反馈：

“你的首页变了？感觉像个真正的技术平台了，不再只是个人博客。”

这句话让我意识到：首页设计改变的不仅是外观，更是读者对内容价值的预期。

专题化让内容有了结构，标签让内容有了关联，而首页设计让这些结构变得可被感知和使用。

在最后一篇文章中，我会分享完整的技术实现——包括 Astro Content Collections 的完整配置、动态路由生成、以及搜索功能的接入。

---

系列文章

1. 从”文件堆”到”专题化”——博客内容组织的第一性原理
2. 标签与专题的设计艺术——如何构建不混乱的内容分类学
3. 构建平台型首页 ← 本文
4. Astro + Content Collections 实战指南

---

参考资源

• Astro 文档：Content Collections
• 信息架构参考：《Information Architecture》by Louis Rosenfeld