用途
该技能为使用 Astro 框架构建与部署静态网站提供系统性指导。Astro 采用零运行时 SSG 方式,支持部分水合(partial hydration)与 Markdown 内容处理,适合内容驱动的站点。技能描述中列出其适用范围包括:被要求「创建 astro 站点」等场景。
主要能力
资料按主题列出以下内容:
- 快速开始:使用
npm create astro@latest创建项目(Markdown 站点可用 Blog 模板);npm run dev在 http://localhost:4321 启动本地服务器;npm run build在 dist/ 生成静态文件;npm run preview预览生产构建。 - 项目结构:src/ 下包含 components、content(含 config.ts 与内容集合)、layouts、pages;public/ 存放静态资源;astro.config.mjs 为框架配置。
- 渲染模式:SSG(默认,构建时渲染,适合博客、文档、营销站)、SSR(每次请求渲染,适合动态数据与个性化)、Hybrid(混合)。纯静态站点使用默认 output: 'static',无需适配器。
- 内容集合:介绍 Astro 4.x 的 Legacy 模式(在 src/content/config.ts 中用 defineCollection 与 zod 定义 schema),以及 Astro 5.0+ 的 Content Layer API(在 src/content.config.ts 中使用 glob() loader,资料称大型站点构建速度最高提升 75%)。还包含高级 schema 模式(image() 校验图片、reference() 跨集合引用、z.enum 等)与自定义 Loader(从外部 API 如 GitHub releases 拉取内容)。
- 语法高亮:Shiki 基础配置(主题、换行)、双明暗主题(themes 配置 + CSS 变量切换)、行高亮与 Shiki Transformers(Astro 4.14+,含 focus、diff 标记),以及 Expressive Code(推荐用于文档,提供复制按钮、文件名、diff 高亮、终端框架等)。
- 图表集成:Mermaid(
npm install astro-mermaid mermaid,客户端渲染、自动主题切换、离线可用)、rehype-mermaid 的构建时静态 SVG 替代方案(需 Playwright),以及暗色主题策略(CSS 变量、picture 元素、内联 SVG);PlantUML(npx astro add plantuml)。 - 客户端搜索:Pagefind(推荐用于大型站点,构建时索引、无外部服务、离线可用、约 10KB;提供 data-pagefind-body、data-pagefind-ignore、data-pagefind-meta、data-pagefind-weight 等索引控制属性)与 Fuse.js(轻量替代,适合较小站点);并给出两者在架构、带宽、可扩展性、多语言、使用场景上的对比,以及企业场景可考虑 Algolia。
- 版本文档:Starlight(基于 Astro 的文档框架,内置 Pagefind 搜索、i18n、侧边栏导航、暗色模式、组件覆盖);多版本文档的文件夹结构方案;Starlight 版本化可配合 starlight-utils 插件。
- 国际化:astro.config.mjs 中配置 defaultLocale、locales、routing.prefixDefaultLocale;按语言组织内容;组件中通过 Astro.currentLocale 检测语言;缺失翻译时回退到英文并显示提示横幅。
- 常见模式:分页列表(适合 50+ 文章)、标签/分类归档页、RSS feed(@astrojs/rss)、静态表单(SSG 站点使用第三方表单处理服务,如 Formspree)与表单示例。
- 其他章节:性能最佳实践(预取、关键 CSS)、部署(Firebase URL 配置、GitHub Pages)、部署前检查清单、测试与质量(Vitest、Playwright、链接检查)、故障排查。
使用方式
该技能以技能文档形式提供操作指引,典型入口为 npm create astro@latest 创建项目,随后按需配置内容集合、Markdown 增强、搜索、文档框架与部署。示例代码可通过对应 npm 包安装后写入 astro.config.mjs 或相应源文件。
适用场景
资料明确指向静态站点生成(SSG),典型场景为博客、文档站与营销站点,以及需要分页、标签归档、RSS、站内搜索、多语言与多版本文档的内容型网站。
限制
资料明确列出以下情形不宜使用该技能,并建议考虑其他方案:
- 实时数据应用——应使用带数据库连接的 SSR 模式;
- 用户认证流程——需要服务端会话处理;
- 动态库存电商——应使用混合模式或完整 SSR;
- 单页应用(SPA)——可考虑直接使用 React/Vue 等框架。
若需混合 SSG+SSR 模式,资料指向 Astro 的适配器文档。其他未在资料中提及的功能、收费、价格、平台或效果,暂未提供。