博客功能全面测试

目录导航测试

本文用于全面测试博客的各项功能，包括目录导航（TOC）、代码块高亮、图片展示、表格渲染、引用块样式等。你可以通过左侧的目录导航快速跳转到各个章节，也可以在阅读完后使用右下角的「回到顶部」按钮。

这段文字的作用是增加页面高度，确保滚动行为和 TOC 追踪功能正常工作。当你向下滚动时，左侧目录中的当前章节应该会自动高亮。

代码块测试

JavaScript / TypeScript

下面是一个使用 Astro Content Collections 获取博客文章的示例：

import { getCollection } from "astro:content";

interface BlogPost {
  title: string;
  date: Date;
  tags?: string[];
}

export async function getSortedPosts() {
  const posts = await getCollection("blogs");
  return posts
    .filter((post) => !post.data.draft)
    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
}

// 按标签过滤
export async function getPostsByTag(tag: string) {
  const posts = await getSortedPosts();
  return posts.filter((post) => post.data.tags?.includes(tag));
}

Python

一个简单的 Web 爬虫示例：

import asyncio
import aiohttp

async def fetch_page(session, url):
    async with session.get(url) as response:
        return await response.text()

async def main():
    urls = [
        "https://example.com/page1",
        "https://example.com/page2",
        "https://example.com/page3",
    ]
    async with aiohttp.ClientSession() as session:
        tasks = [fetch_page(session, url) for url in urls]
        results = await asyncio.gather(*tasks)
        for url, html in zip(urls, results):
            print(f"{url}: {len(html)} chars")

asyncio.run(main())

CSS

UnoCSS 快捷方式配置示例：

/* 自定义链接样式 */
.prose a {
  color: #0284c7;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(2, 132, 199, 0.3);
  transition: border-color 0.2s ease;
}

.prose a:hover {
  border-bottom-color: rgba(2, 132, 199, 1);
}

html.dark .prose a {
  color: #fff;
  border-bottom-color: rgba(163, 163, 163, 0.3);
}

Shell 命令

# 创建 Astro 项目
npm create astro@latest my-blog

# 安装依赖
cd my-blog
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build && pnpm preview

行内代码

在 Astro 中，你可以使用 getCollection("blogs") 获取所有博客文章，通过 Astro.props 接收页面参数，用 import.meta.env.PROD 判断是否为生产环境。

图片测试

下面是一张测试图片，用于验证图片在 prose 容器中的渲染效果：

图片应该自动适应容器宽度，带有圆角和适当的上下间距。

引用块测试

代码是写给人看的，只是顺便能被机器执行。 — Harold Abelson, Structure and Interpretation of Computer Programs

多段引用块：

Astro 是一个现代化的静态站点生成器，专注于内容驱动的网站。它的 Islands Architecture 允许你在静态页面中嵌入交互式组件。

与传统的 SPA 框架不同，Astro 默认不向客户端发送 JavaScript，只在需要交互的地方按需加载。这使得 Astro 网站的加载速度极快。

表格测试

技术栈对比

特性	Astro	Next.js	Nuxt
渲染模式	SSG / SSR / Hybrid	SSR / SSG / ISR	SSR / SSG
UI 框架	React / Vue / Svelte / 任意	React	Vue
默认 JS	零 JS	全量 hydration	全量 hydration
内容管理	Content Collections	MDX / CMS	Content Module
学习曲线	低	中	中
适用场景	博客、文档、营销页	Web 应用、电商	Web 应用

CSS 方案对比

方案	包大小	运行时	原子化	类型安全
UnoCSS	~6KB	无	是	是
Tailwind CSS	~10KB	无	是	部分
Styled Components	~12KB	有	否	是
CSS Modules	0KB	无	否	否

列表测试

无序列表

• Astro 的核心优势：
  • 零 JavaScript 默认输出
  • Islands Architecture 按需 hydration
  • 支持多种 UI 框架混用
  • 内置 Content Collections 类型安全
• 适合的项目类型：
  • 个人博客和作品集
  • 技术文档站点
  • 营销和落地页
  • 内容驱动的网站

有序列表

搭建 Astro 博客的步骤：

1. 初始化项目：npm create astro@latest
2. 选择模板和配置选项
3. 安装额外依赖（UnoCSS、MDX 等）
4. 配置 Content Collections Schema
5. 创建布局和页面组件
6. 编写博客文章（Markdown / MDX）
7. 添加 RSS 订阅和 Sitemap
8. 部署到静态托管平台

混合格式测试

这段文字包含 加粗文本、斜体文本、加粗斜体、行内代码、以及外部链接。

你也可以使用 删除线 来标记已废弃的内容。

---

长文本测试

这个章节的目的是增加页面长度，以便测试「回到顶部」按钮的显示和功能。

关于 Astro 的 Content Collections

Content Collections 是 Astro 2.0 引入的核心功能之一。它提供了一种类型安全的方式来管理和查询本地内容（Markdown、MDX、JSON 等）。通过 Zod Schema 定义 frontmatter 的结构，你可以在编译时捕获数据错误，而不是在运行时才发现问题。

每个 Collection 由一个目录和一个 Schema 定义组成。目录中的每个文件就是一个 Entry。你可以使用 getCollection() 获取整个集合，或使用 getEntry() 获取单个条目。

关于 UnoCSS

UnoCSS 是一个即时按需的原子化 CSS 引擎。与 Tailwind CSS 类似，但更加灵活和高效。它支持自定义规则、快捷方式、预设系统，并且可以与任何框架配合使用。

UnoCSS 的核心理念是「约定优于配置」。通过预设（Presets），你可以快速获得 Tailwind CSS、Windi CSS、Bootstrap 等框架的功能，同时保持极小的包体积。

关于 Islands Architecture

Islands Architecture（岛屿架构）是一种 Web 架构模式，由 Katie Sylor-Miller 在 2019 年首次提出，后由 Jason Miller 进一步发展。核心思想是：页面的大部分内容是静态 HTML，只有需要交互的部分（“岛屿”）才加载 JavaScript。

在 Astro 中，你可以通过 client:* 指令控制组件的 hydration 策略：

• client:load — 页面加载时立即 hydrate
• client:idle — 浏览器空闲时 hydrate
• client:visible — 组件进入视口时 hydrate
• client:media — 满足媒体查询条件时 hydrate
• client:only — 仅在客户端渲染，跳过 SSR

这种细粒度的控制让你可以在保持极快加载速度的同时，为需要的部分添加丰富的交互体验。

性能优化建议

构建高性能的 Astro 网站，以下几点值得注意：

1. 图片优化：使用 Astro 内置的 <Image /> 组件自动优化图片格式和尺寸
2. 字体加载：使用 @fontsource 自托管字体，避免外部请求延迟
3. 代码分割：利用 Astro 的自动代码分割，只加载当前页面需要的 JS
4. 预渲染：尽可能使用 SSG 预渲染页面，减少服务端计算
5. 缓存策略：为静态资源设置长期缓存头，利用 CDN 加速分发

---

总结

如果你能看到这里，说明页面的滚动功能正常工作。现在你可以：

1. 点击右下角的「回到顶部」按钮，测试平滑滚动
2. 观察左侧 TOC 目录的高亮是否跟随滚动正确切换
3. 检查上方各种内容元素（代码块、表格、引用块等）的渲染效果
4. 切换深色/浅色模式，验证所有元素的暗色适配
5. 在下方的评论区测试 Utterances 评论系统