前端UI组件【免费下载链接】astrowind⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.项目地址https://gitcode.com/GitHub_Trending/as/astrowind点击查看免费下载AstroWind 是一个免费开源的网站模板基于Astro v7与Tailwind CSS v4构建可生成面向性能、SEO 与可访问性优化的全静态站点。本指南以仓库中的 AGENTS.md由 CLAUDE.md 指定的项目核心文档与 AI Agent 指令为主线结合 astro.config.ts、src/config.yaml、src/assets/styles/tailwind.css 等源码系统讲解该模板的架构、配置系统、目录约定与开发流程帮助你快速上手定制也便于 AI Agent 准确理解并协同开发这个项目。项目概览与技术栈AstroWind 是一个开箱即用的 Astro 起始主题starter theme其核心设计目标是通过单一 YAML 配置文件驱动全站同时借助 Astro 的 Content Layer API、原生 Fonts API 与 Tailwind v4 的 CSS-first 配置将主题定制、内容管理与构建优化统一起来。仓库 package.json 中的描述与依赖明确了技术栈Astro v7astro: ^7.3.1output: static纯静态输出Tailwind CSS v4tailwindcss: ^4.3.3通过tailwindcss/vite插件接入 ViteTypeScript 5.9搭配typescript-eslint8 与 ESLint 10MDXastrojs/mdx与Sharpsharp: ^0.35.3用于内容与图片处理其他关键依赖astro-seo、astrojs/sitemap、astrojs/rss、astro-icon、unpic、tailwind-merge、astro-compress等。快速开始常用命令与运行环境AGENTS.md 给出了全部开发命令速查表package.json 中的scripts与之完全对应命令用途npm run dev启动开发服务器默认地址localhost:4321npm run build生产构建产物输出到./dist/npm run preview本地预览生产构建产物npm run check依次执行astro check ESLint Prettier 检查npm run fix自动修复 ESLint 与 Prettier 问题Node.js 版本要求 22.22.3。该约束同时出现在 AGENTS.md 与 package.json 的engines字段中低于此版本无法保证构建行为一致。值得注意的是check与fix都是复合命令check内部拆分为check:astro、check:eslint、check:prettier三步fix则拆分为fix:eslint与fix:prettier便于在 CI 或本地按需单独执行。目录结构解析AGENTS.md 给出了完整的目录约定与仓库实际结构一致src/ assets/styles/tailwind.css # Tailwind v4 配置主题令牌、工具类、插件 components/ common/ # 共享组件Image、Metadata、Analytics、ToggleTheme ui/ # 基础组件Button、Form、Headline、Timeline、WidgetWrapper widgets/ # 页面区块Hero、Features、Bento、Pricing、Comparison、FAQs、Team、Gallery… blog/ # 博客SinglePost、List、Pagination、Tags CustomStyles.astro # 颜色与字体的 CSS 变量定义 content.config.ts # Content Collections schemaAstro 5 的存放位置 data/post/ # 博客文章.md、.mdx layouts/ # Layout.astro、PageLayout.astro、MarkdownLayout.astro pages/ # 基于文件的路由 utils/ # blog.ts、images.ts、permalinks.ts、frontmatter.ts config.yaml # 站点配置作为虚拟模块加载 navigation.ts # 导航结构 types.d.ts # TypeScript 类型定义 vendor/integration/ # 自定义 Astro 集成负责配置加载从源码结构可以推断出这套约定的设计意图widgets/与ui/分层使页面区块Hero、Pricing 等与基础原语Button、Form解耦common/承载跨布局共享的横切组件utils/收纳非组件逻辑博客数据、图片处理、永久链接生成、frontmatter 解析。路径别名与配置虚拟模块路径别名项目统一使用~/别名导入src/下的模块该别名在 astro.config.ts 的vite.resolve.alias中配置~: path.resolve(__dirname, ./src)。典型用法import Image from ~/components/common/Image.astro; import { SITE } from astrowind:config;配置系统astrowind:config虚拟模块这是 AstroWind 架构的核心亮点。站点配置集中在 src/config.yaml由 vendor/integration/index.ts 中的自定义 Astro 集成读取并通过 Vite 插件暴露为虚拟模块astrowind:config。从 vendor/integration/index.ts 的实现可以看到完整调用链astro:config:setup钩子中调用loadConfig读取 YAML再经configBuilder构建出SITE、I18N、METADATA、APP_BLOG、UI、ANALYTICS六个导出通过updateConfig把site、base、trailingSlash同步给 Astro 自身配置trailingSlash布尔值会被转换为always | never注入一个内联 Vite 插件将六个对象以export const ...形式加载为astrowind:config模块通过addWatchFile监听src/config.yaml改动即触发开发服务器热更新。该集成还包含一个构建后钩子在astro:build:done阶段自动向robots.txt追加或更新Sitemap: site/sitemap-index.xml条目避免手工维护。src/config.yaml关键配置项以下配置节可直接修改以满足站点需求site站点名称、URLsite、base路径、trailingSlash策略、googleSiteVerificationIdmetadata默认 SEO 元数据——title含template模板变量%s、description、robots.index/follow、openGraph站点名、图片尺寸默认使用 src/assets/images/default.png 1200×628、twitterhandle、cardTypei18nlanguage与textDirection如en/ltrapps.blog博客总开关、每页文章数默认 8、文章永久链接模板支持%slug%、%year%、%month%、%day%、%hour%、%minute%、%second%、%category%变量、文章/列表/分类/标签页面的pathname与robots策略、相关文章开关与数量analytics.vendors.googleAnalytics.idGoogle Analytics ID默认null不启用ui.theme取值为system、light、dark、light:only、dark:only。Tailwind CSS v4CSS-first 配置与 v3 的tailwind.config.js不同AstroWind 的 Tailwind v4 配置完全写在 src/assets/styles/tailwind.css 中主题令牌theme { --color-primary: var(--aw-color-primary); ... }将 shadcn/ui 兼容的颜色令牌绑定到--aw-*变量自定义工具类utility bg-page { ... }、utility btn、utility btn-primary等按钮系列通过apply btn ...组合复用深色模式基于类名variant dark (:where(.dark, .dark *))配合CustomStyles.astro中的.dark变量覆盖插件plugin tailwindcss/typography提供博客排版样式自定义变体custom-variant intersect (:not([no-intersect]))配合滚动进入视口的交互动画。CSS 文件还包含博客代码块的暗色适配Shiki 双主题、移动端菜单动画、吸顶头部滚动样式等细节且刻意关闭了csso压缩见 astro.config.ts 中compress配置的注释csso 无法解析 Tailwind v4 输出的媒体范围语法media (width48rem)会误删所有md:/lg:断点样式因此改用 lightningcss。颜色与字体变量集中在 src/components/CustomStyles.astro 中以is:inline样式定义--aw-color-primary、--aw-color-secondary、--aw-color-accent、--aw-color-text-*、--aw-color-bg-page等并分别给出 light/dark 两套取值。--aw-font-sans/serif/heading则指向 Fonts API 注入的--font-inter。类名合并组件接受外部className时统一使用twMerge来自tailwind-mergev3实现条件化类名组合而不会产生冲突相关约定详见 AGENTS.md 的 Component Patterns 一节。内容集合Content Collections内容集合在 src/content.config.ts 中定义采用 Astro 5 的 Content Layer API 与glob()加载器const postCollection defineCollection({ loader: glob({ pattern: [*.md, *.mdx], base: src/data/post }), schema: z.object({ publishDate: z.date().optional(), updateDate: z.date().optional(), draft: z.boolean().optional(), title: z.string(), excerpt: z.string().optional(), image: z.string().optional(), imageAlt: z.string().optional(), category: z.string().optional(), tags: z.array(z.string()).optional(), author: z.string().optional(), metadata: metadataDefinition(), }), });文章存放在 src/data/post/ 目录支持.md与.mdx两种格式。frontmatter 字段与 AGENTS.md 的说明一致title必填其余如publishDate、updateDate、draft、excerpt、image、category、tags、author、metadata均可选metadata复用了站点级 SEO schematitle、canonical、robots、description、openGraph、twitter使每篇文章都能拥有独立的 SEO 覆盖。博客的读取、分页与永久链接逻辑位于 src/utils/blog.ts 与 src/utils/permalinks.tsfrontmatter 处理阅读时长、响应式表格在 src/utils/frontmatter.ts 中实现并已在 astro.config.ts 的markdown.processor中注册为 remark/rehype 插件。组件模式约定AGENTS.md 明确了统一的组件编码规范Props 继承自~/types中定义的接口类型集中在 src/types.d.ts使用class:list做条件类名接收外部className覆盖时使用twMerge()布局组合优先使用命名插槽named slotswidget 组件接受标准化 props便于页面间复用。这套约定保证了widgets/中的几十个页面区块Hero、Hero2、Features、Features2/3、Bento、Pricing、Comparison、FAQs、Team、Gallery、Steps、Timeline 等可以像积木一样被自由组装到任意页面。图片处理src/components/common/Image.astro 封装了完整的图片策略本地图片通过astro:assets走 Sharp 优化响应式尺寸、格式转换并在 astro.config.ts 中开启image.responsiveStyles: true远程图片优先经unpic重写 CDN 查询参数、由提供方Unsplash、Cloudinary、Imgix 等直接输出Astro 不下载回退域名白名单image.domains仅对 Unpic 无法识别的提供方生效如cdn.pixabay.com这些 URL 才会落入 Astro 原生Image /交由 Sharp 处理images.unsplash.com被列入是为了让博客封面能渲染成真正的 1200×626 Open Graph 图。性能约定Hero 图片使用loadingeager与fetchpriorityhigh以加速 LCP。字体Astro 原生 Fonts API字体不再依赖外部 CSS 引入而是由 Astro 7 的原生Fonts API管理配置在 astro.config.ts 的fonts键fonts: [ { provider: fontProviders.fontsource(), name: Inter, cssVariable: --font-inter, weights: [100 900], styles: [normal], subsets: [latin], fallbacks: [sans-serif], }, ],Astro 会自动完成字体自托管、子集化、预加载并生成 metric-adjusted 的 fallback 字体避免布局偏移CLS。注入由 src/layouts/Layout.astro 中的Font /组件完成消费端则通过 src/components/CustomStyles.astro 中的--aw-font-*变量。要更换字体只需改fonts条目并把CustomStyles.astro中的--aw-font-sans等指向新的cssVariable即可。第三方脚本Partytown 按需开启astrojs/partytown被设计为可选开启。在 astro.config.ts 中它受开关控制const hasExternalScripts false; const whenExternalScripts (items) (hasExternalScripts ? ... : []);默认false因此基础模板不携带任何外部脚本包括 GA。当需要把第三方脚本如analytics.vendors.googleAnalytics.partytown卸载到 Web Worker 时将hasExternalScripts改为true即可并配合 src/config.yaml 中的analytics.vendors.googleAnalytics.id设置 ID。内容安全策略CSP的设计取舍AGENTS.md 明确记录了当前版本有意不启用Astro 原生 CSP 的原因它默认开启的ClientRouter /视图过渡不兼容且会阻断模板用户通常自行添加的任意第三方脚本。CSP 被推迟到 AstroWind v2届时组件化模型及可选 SSR能让 CSP 干净且可选用。理解这一取舍可以避免在定制时误以为存在安全配置缺失。开发验证清单AGENTS.md 建议每次改动后按以下顺序验证npm run build构建成功npm run check通过astro check ESLint Prettier浏览器目检首页、博客、深色模式、移动端菜单结构化数据必须如实描述当前站点src/pages/index.astro 中的WebSite/Organization块只从src/config.yaml构建凡是手动补充的内容都必须与真实站点相符。第 4 条特别值得重视结构化数据JSON-LD直接面向搜索引擎任何编造信息都可能造成收录问题。面向 AI Agent 的协作约定AstroWind 为 AI Agent 设定了明确的工作流在执行项目级任务关闭博客、Open Graph 图片、base 路径、CMS、部署、头部定制等之前应优先查阅.agents/skills/目录中已有的 skill 并按之执行当前仓库快照中未发现该目录实际请以仓库最新状态为准。与此同时AGENTS.md 要求 Agent 在改动后执行上文验证清单——这实际上把可验证性固化成了开发流程的一部分也保证了模板修改的可回归性。小结AstroWind 的工程化核心可以概括为三点YAML 驱动全站配置astrowind:config虚拟模块、CSS-first 的 Tailwind v4 主题体系--aw-*变量 theme令牌、Astro 原生能力最大化Content Layer、Fonts API、Partytown 按需集成。无论你是想替换品牌色与字体、开启博客、接入分析工具还是让 AI Agent 辅助开发都可以从 src/config.yaml、astro.config.ts 与 src/assets/styles/tailwind.css 三个文件入手配合本文的目录约定与验证清单快速实现可预测、可检查的定制结果。赞分享前端UI组件【免费下载链接】astrowind⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.项目地址https://gitcode.com/GitHub_Trending/as/astrowind点击查看免费下载相关推荐AstroWind 架构与开发指南Astro v7 Tailwind CSS v4 模板的目录结构、配置系统与命令速查AstroWind 架构与开发指南Astro v7 Tailwind CSS v4 模板的目录结构、配置系统与命令速查 AstroWind 是一个基于 A前端UI组件gh_mirrors/ht/http-kernel异常处理机制从捕获到响应的全流程gh_mirrors/ht/http kernel异常处理机制从捕获到响应的全流程 异常处理全流程概览 gh_mirrors/ht/http kernel以前端UI组件Strands Agents 文档站点开发指南基于 Astro/Starlight 的 CMS 架构与 Agent 协作工作流Strands Agents 文档站点开发指南基于 Astro/Starlight 的 CMS 架构与 Agent 协作工作流 本文是 Strands Age人工智能大模型AI AgentAgent 框架多智能体工具调用MCP 服务上一篇RePKG工具全解析从入门到精通的壁纸资源处理指南下一篇RePKG工具全攻略从资源提取到格式转换的完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考