用 Astro，搭建一座数字花园

一座数字花园，可以从一篇笔记开始。

在这个示例里，我们把个人主页想象成一处可慢慢打理的空间：文章负责记录思考，项目展示实践，Now 留下一点当下的状态。页面不必一次就完整，但每一个入口都应该带人到达一个真实的地方。

先给内容一个位置

开始设计之前，先问一个简单的问题：访问者来到这里，最想找到什么？

如果答案是阅读文章，那么文章标题、摘要和分类就应该比装饰更加醒目。背景可以有光，但文字需要自己的安静区域。

这个 Demo 的内容由本地 MDX 文件管理。标题、日期、分类和摘要放在文件顶部，正文写在下面。新增文章时，不用再手动维护第二份列表。

---
title: '第一篇真实笔记'
description: '关于这篇笔记的一句话介绍。'
category: '开发'
date: '2026-10-15'
readingTime: 3
featured: false
art: 'orbit'
tags: ['Astro', '记录']
demo: true
---

## 从这里开始

写下你的第一个想法。

这里的 demo: true 用于确保 v0.1 示例内容具有明确的演示身份。正式发布时，应同步调整内容规则与页面标识，再换入核实过的真实文章。

让页面保持轻盈

内容型页面的大部分工作，其实在构建时就能完成。标题、正文、目录和代码高亮无需等待浏览器再去拼装。

把交互放在需要它的地方

分类筛选、搜索弹窗和阅读进度需要浏览器参与，但它们的逻辑并不复杂。使用少量原生脚本，就能让这些操作直接响应。

const query = '数字花园';
const notes = [
  { title: '用 Astro，搭建一座数字花园', category: '开发' },
  { title: '让界面安静一点', category: '设计' },
];

const visibleNotes = notes.filter((note) =>
  note.title.toLowerCase().includes(query.toLowerCase())
);

console.log(visibleNotes);

不需要为每一次状态变化都引入新的框架。等到交互的复杂程度值得一个组件时，再为那个局部加入合适的工具。

设计一条完整的阅读路径

一个文章页面除了正文，还需要帮助读者回答三个问题：我在哪里、读到哪里、接下来去哪。

目录可以跳转到章节，顶部的细线随阅读推进。读完后，继续探索的入口留在文章底部，让阅读自然衔接。

好的个人主页，不必在第一眼展示所有东西。它可以在每一次点击之后，再多讲一点。

给未来留出空间

数字花园的价值，来自持续整理，而不是一次性的内容堆积。你可以保留几个简单的约定：

• 写下可理解的标题，让未来的自己也找得到。
• 为每篇文章补充一句摘要，帮助读者决定是否展开。
• 分类保持少而清楚，标签描述更具体的主题。
• 项目先解释问题和思路，再谈使用的工具。

这一篇文章本身也是一颗可以替换的种子。把它换成你真正想记录的内容，这个空间就开始有自己的引力了。

下一步可以去看看 让界面安静一点，继续探索内容与视觉之间的平衡。