写一篇博客时,内容的节奏和页面的留白同样重要。这篇文章没有复杂的主题,它的任务是帮我检查:标题是否清晰、段落是否舒适,以及阅读时视线会不会被打断。

这里有一个指向博客首页的链接。链接应该能被看见,但不应该抢走正文的注意力。
从一段文字开始
好的阅读体验通常不靠夸张的装饰,而是靠稳定的规则:合适的字宽、清楚的层级,以及段落之间恰到好处的距离。
我希望这块正文像一张安静的纸。文字可以慢慢读,重点自然浮现,而不是每一行都在争夺注意力。
一个小小的检查清单
- 段落的行距是否足够舒展?
- 二级标题是否能划分内容章节?
- 链接、强调文字和代码是否容易辨认?
- 列表是否比连续的长段落更容易扫读?
当页面里出现 POSTS_PER_PAGE 这样的变量时,行内代码应该有自己的轻微标记,但不应该像一整块代码那样占据视线。
把步骤写得具体一点
有时候,一件看起来很大的事,只要拆成小步骤就会变得可开始。比如开发这个博客时,可以按下面的顺序推进:
- 用 Markdown 写一篇文章。
- 在首页显示文章列表。
- 点击卡片进入文章详情页。
- 最后再慢慢处理分页、样式和细节。
不必等到所有功能完成才开始写。一个能持续更新的简单博客,比永远停在计划里的“完美博客”更有价值。
一段真正的代码
下面这段代码来自首页的分页思路。代码块应该有明显的背景和边界,让读者知道它和普通段落不同:
---
import { getCollection } from "astro:content";
import PostList from "../components/PostList.astro";
const POSTS_PER_PAGE = 5;
const posts = (await getCollection("blog")).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
const currentPosts = posts.slice(0, POSTS_PER_PAGE);
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
---
<section class="article-list">
<h2>最新文章</h2>
<PostList posts={currentPosts} />
<p>共 {totalPages} 页</p>
</section>
代码表达的是:从全部文章中取出当前页需要的文章,并计算一共有多少页。
最后再放一段普通文字,检查文章结尾的节奏。等正文基础样式稳定后,我们再让图片、代码块和表格也拥有同一套安静、清晰的视觉语言。