英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

🚀 星空风

🌟 2022、2023、2024 和 2025 年最受星标和复刻的 Astro 主题. 🌟

AstroWind 是一个免费且开源的模板，可使用 Astro v7 Tailwind CSS v4 构建您的网站。随时可以开始新项目，并在设计时考虑了网页最佳实践。

• ✅ 适用于生产环境，在 PageSpeed Insights 报告中得分出色。
• ✅ 30 个 页面区块小部件（英雄区块、功能区块、便当区块、标签页、价格对比表、常见问题手风琴、客户评价、团队成员、时间轴、画廊、项目、倒计时、新闻订阅…）可类型化且可组合。
• ✅ 集成 Tailwind CSS v4，支持 暗模式 和 RTL。
• ✅ 快速且 SEO 友好的博客，支持自动 RSS Feed、MDX、分类和标签、社交分享 等功能。
• ✅ 图像优化（使用新 Astro Assets 和 Unpic 提供通用图像 CDN）。
• ✅ 根据您的路由生成 项目站点地图。
• ✅ 社交媒体分享的 Open Graph 标签。
• ✅ 内置 分析功能，集成 Google Analytics。
• ✅ 兼容 shadcn/ui 的设计令牌（如 bg-background、text-foreground、border-border…），源自主题变量。
• ✅ AI 准备就绪：AGENTS.md 以及 .agents/skills/ 中针对 Claude Code、Codex、Cursor 及类似工具的逐步技能指南。

演示

📌 https://astrowind.vercel.app/

摘要

npm create astro@latest -- --template arthelokyo/astrowind

入门

AstroWind 旨在让你快速创建使用 Astro v7 和 Tailwind CSS v4 的网站。这是一个免费的主题，注重简洁、良好的实践和高性能。

只使用了很少的原生 JavaScript 来提供基本功能，以便每个开发者可以决定使用哪个框架（React、Vue、Svelte、Solid JS...）以及如何实现他们的目标。

注意： 需要 Node.js >= 22.22.3（查看 .nvmrc）。模板目前使用 output: 'static'，但博客只有在 prerender = true 时才能正常工作。

项目结构

在 AstroWind 模板中，你将看到以下文件夹和文件：

/
├── .agents/
│   └── skills/
├── AGENTS.md
├── public/
│   ├── _headers
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── favicons/
│   │   ├── images/
│   │   └── styles/
│   │       ├── shadcn.css
│   │       └── tailwind.css
│   ├── components/
│   │   ├── blog/
│   │   ├── common/
│   │   ├── ui/
│   │   ├── widgets/
│   │   │   ├── Header.astro
│   │   │   └── ...
│   │   ├── CustomStyles.astro
│   │   ├── Favicons.astro
│   │   └── Logo.astro
│   ├── content.config.ts
│   ├── data/
│   │   └── post/
│   │       ├── post-slug-1.md
│   │       ├── post-slug-2.mdx
│   │       └── ...
│   ├── layouts/
│   │   ├── Layout.astro
│   │   ├── MarkdownLayout.astro
│   │   └── PageLayout.astro
│   ├── pages/
│   │   ├── [...blog]/
│   │   │   ├── [category]/
│   │   │   ├── [tag]/
│   │   │   ├── [...page].astro
│   │   │   └── index.astro
│   │   ├── index.astro
│   │   ├── 404.astro
│   │   ├-- rss.xml.ts
│   │   └── ...
│   ├── utils/
│   ├── config.yaml
│   └── navigation.ts
├── package.json
├── astro.config.ts
└── ...

Astro 会在 src/pages/ 目录中查找 .astro 或 .md 文件。每个页面会根据其文件名作为路由暴露。

src/components/ 并没有特别的用途，但我们通常会把任何 Astro/React/Vue/Svelte/Preact 组件放在这里。

任何静态资源，如图片，如果不需要任何转换，可以放在 public/ 目录；如果被直接导入，则放在 assets/ 目录。

🧑‍🚀 有经验的宇航员？ 删除此文件 README.md。更新 src/config.yaml 及其内容。玩得开心！

命令

所有命令都从项目根目录的终端运行：

配置

基本配置文件：./src/config.yaml

site:
  name: 'Example'
  site: 'https://example.com'
  base: '/' # Change this if you need to deploy to Github Pages, for example
  trailingSlash: false # Generate permalinks with or without "/" at the end

  googleSiteVerificationId: false # Or some value,

# Default SEO metadata
metadata:
  title:
    default: 'Example'
    template: '%s — Example'
  description: 'This is the default meta description of Example website'
  robots:
    index: true
    follow: true
  openGraph:
    site_name: 'Example'
    images:
      - url: '~/assets/images/default.png'
        width: 1200
        height: 628
    type: website
  twitter:
    handle: '@twitter_user'
    site: '@twitter_user'
    cardType: summary_large_image

i18n:
  language: en
  textDirection: ltr

apps:
  blog:
    isEnabled: true # If the blog will be enabled
    postsPerPage: 6 # Number of posts per page

    post:
      isEnabled: true
      permalink: '/blog/%slug%' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
      robots:
        index: true

    list:
      isEnabled: true
      pathname: 'blog' # Blog main path, you can change this to "articles" (/articles)
      robots:
        index: true

    category:
      isEnabled: true
      pathname: 'category' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
      robots:
        index: true

    tag:
      isEnabled: true
      pathname: 'tag' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
      robots:
        index: false

    isRelatedPostsEnabled: true # If a widget with related posts is to be displayed below each post
    relatedPostsCount: 4 # Number of related posts to display

analytics:
  vendors:
    googleAnalytics:
      id: null # or "G-XXXXXXXXXX"

ui:
  theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"

自定义设计

使用 Tailwind CSS v4，所有配置以 CSS 为主。要自定义字体系列、颜色或更多元素，请参阅以下文件：

• src/components/CustomStyles.astro — 用于颜色和字体的 CSS 变量
• src/assets/styles/tailwind.css — Tailwind 主题令牌（@theme）、自定义工具类（@utility）以及插件
• src/assets/styles/shadcn.css — shadcn/ui 兼容变量（--background、--border、--ring…），来自主题，使 shadcn 样式组件可以使用你的颜色

部署

部署到生产环境（手动）

你可以创建一个优化的生产构建，方式如下：

npm run build

现在，您的网站已准备好部署。所有生成的文件都位于 dist 文件夹中，您可以将该文件夹部署到任何您喜欢的托管服务。

部署到 Netlify

将此仓库克隆到您自己的 GitHub 账户并部署到 Netlify：

部署到 Vercel

将此仓库克隆到您自己的 GitHub 账户并部署到 Vercel：

部署到 Cloudflare

将此仓库克隆到您自己的 GitHub 账户并部署到 Cloudflare Workers（静态资源，无需适配器；仓库中的 wrangler.jsonc 将 Cloudflare 指向 dist/）：

常见问题

AstroWind v1 还在维护吗？ 是的，处于维护模式：v1 接收依赖更新和 bug 修复，而新开发版本为 AstroWind v2（2026 年 10 月）。

如何禁用博客、更改 Open Graph 图片、在子路径下部署、连接 CMS、部署到 Cloudflare…？ 请咨询您的 AI 编程助手。AstroWind 已 准备 AI：仓库随项目附带 AGENTS.md 文件，说明项目约定和在 .agents/skills/ 中逐步列出的常用技能，因此 Claude Code、Codex/ChatGPT、Cursor、Copilot 及类似工具可以可靠地执行这些操作（而且您可以自己阅读这些技能）。

有哪些小部件以及如何使用它们？ 每个部分都是 src/components/widgets/ 中的一个组件，带有类型化的 props。带有 props 的目录以及每个组件展示的位置在 .agents/skills/use-widgets.md；src/pages/landing/ 下的六个页面展示了它们组合成完整登录页的效果。

博客文章存放在哪里？ src/data/post/ 目录下，以 .md 或 .mdx 文件形式存放。在构建时读取。

我在哪里可以更改颜色和字体？ 颜色在 src/components/CustomStyles.astro 文件中（light 和 dark 模式的 CSS 变量），Tailwind 的 token 和工具类在 src/assets/styles/tailwind.css 中，字体在 astro.config.ts 的 fonts 条目中。

需要使用哪个 Node.js 版本？ Node.js 22.22.3 或更高版本（.nvmrc）。

贡献指南

如果您有任何想法、建议或者发现任何漏洞，请随时开启讨论、提交问题或创建拉取请求。这对我们所有人都会非常有用，我们也很乐意倾听并采取行动。

致谢

最初由 Arthelokyo 创建，并由一个 贡献者 社区维护。

许可

AstroWind 在 MIT 许可证下获得许可 —— 详情请参阅 LICENSE 文件。