一篇用来检查博客排版的文章

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

打开的笔记本、钢笔与咖啡,象征安静写作

这里有一个指向博客首页的链接。链接应该能被看见,但不应该抢走正文的注意力。

从一段文字开始

好的阅读体验通常不靠夸张的装饰,而是靠稳定的规则:合适的字宽、清楚的层级,以及段落之间恰到好处的距离。

我希望这块正文像一张安静的纸。文字可以慢慢读,重点自然浮现,而不是每一行都在争夺注意力。

一个小小的检查清单

  • 段落的行距是否足够舒展?
  • 二级标题是否能划分内容章节?
  • 链接、强调文字和代码是否容易辨认?
  • 列表是否比连续的长段落更容易扫读?

当页面里出现 POSTS_PER_PAGE 这样的变量时,行内代码应该有自己的轻微标记,但不应该像一整块代码那样占据视线。

把步骤写得具体一点

有时候,一件看起来很大的事,只要拆成小步骤就会变得可开始。比如开发这个博客时,可以按下面的顺序推进:

  1. 用 Markdown 写一篇文章。
  2. 在首页显示文章列表。
  3. 点击卡片进入文章详情页。
  4. 最后再慢慢处理分页、样式和细节。

不必等到所有功能完成才开始写。一个能持续更新的简单博客,比永远停在计划里的“完美博客”更有价值。

一段真正的代码

下面这段代码来自首页的分页思路。代码块应该有明显的背景和边界,让读者知道它和普通段落不同:

---
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>

代码表达的是:从全部文章中取出当前页需要的文章,并计算一共有多少页。


最后再放一段普通文字,检查文章结尾的节奏。等正文基础样式稳定后,我们再让图片、代码块和表格也拥有同一套安静、清晰的视觉语言。