基于 Astro 与 Tailwind CSS 构建，组件分为 blocks 与 ui 两层
Astro博客SaaS企业官网启动器
foxi-astro-theme — Astro 博客模板
作者 oxygenna-themes
Foxi 是一个基于 Astro 与 Tailwind CSS 的免费开源网站模板，提供博客、定价、功能、联系等预设计页面，适合搭建 SaaS 与企业官网。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-08查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
提供 Home、Pricing、Features、Contact 等预设计页面，免费版共 10 个页面
博客集合支持 Markdown 与 MDX，并带标签分类
内容数据以 JSON 与 Markdown 文件维护，配置集中在 src/config 的 TypeScript 文件
包含亮/暗模式、页面过渡动画、内置联系表单与站点地图
集成 Google Analytics 与 Google Tag Manager
模板详细介绍
Foxi 是 oxygenna-themes 在 GitHub 上以 MIT 许可发布的 Astro 模板，使用 Tailwind CSS 组件构建，定位为面向 SaaS 与企业官网的响应式站点起点。仓库提供桌面端与移动端首页截图，以及一个代表性内页截图，演示站点部署在 Netlify。
模板自带一组预设计页面，README 列出 Home、Pricing、Features、Contact 等，并包含博客集合，支持 Markdown 与 MDX 写作以及标签分类。内容数据部分放在 JSON 与 Markdown 文件中，便于集中更新；配置集中在 src/config 目录下的 TypeScript 文件，涵盖基础信息、导航、页脚、分析与社交链接。
功能层面，README 提到亮/暗模式、页面加载与过渡动画、内置联系表单、Heroicons 图标、站点地图，以及 Google Analytics 与 Google Tag Manager 的集成。代码按 blocks 与 ui 拆分组件，页面路由由 src/pages 下的 .astro 文件决定。
需要注意免费版与 Pro 版的差异：免费版共 10 个页面，不包含 i18n 多语言、Sitepins CMS、Mega Menu、视频弹窗、Lottie 集成、博客作者、文章分页、eGuides、Roadmap、注册页等；Pro 版为商业许可，定价 79.99 美元。本次收录的仅是公开仓库中的免费代码，不包含付费升级。演示图片、字体、图标等第三方素材需按各自许可单独核对，域名、托管等外部服务也可能产生费用。
Astro博客SaaS企业官网启动器
适合你的项目吗？
适用场景
- 搭建 SaaS 产品官网，使用预设计的首页、功能页与定价页
- 建立带标签分类的 Markdown/MDX 博客
- 制作企业官网，复用可配置的导航、页脚与联系表单
- 作为 Astro 项目起点，按 blocks 与 ui 结构扩展页面
适合人群
- 熟悉 Astro 与 Tailwind CSS 的前端开发者
- 需要快速起步的 SaaS 或企业官网项目
- 希望以 JSON/Markdown 管理内容的站点维护者
- 接受免费版页面数量与功能范围、无需多语言或 CMS 的项目
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
需要 Node.js 22.12.0 或更高版本
- 2
安装依赖后可用 npm run dev 在 localhost:4321 启动本地开发服务器
- 3
构建命令为 npm run build，产物输出到 ./dist/，可用 npm run preview 本地预览
- 4
主题配置位于 src/config 目录，内容数据位于 src/data 与 src/content/blog
- 5
免费版采用 MIT 许可，分发时需保留版权与许可声明；演示素材与外部服务需单独核对许可与费用
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 项目资料提及可选付费版本或功能；本次仅收录公开免费代码，不包含付费升级。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 免费版不包含 i18n 多语言支持，该功能仅在付费 Pro 版提供。
- 免费版不包含 Sitepins CMS，该功能仅在付费 Pro 版提供。
- 免费版不包含 Mega Menu，该功能仅在付费 Pro 版提供。
- 免费版不包含视频弹窗功能，该功能仅在付费 Pro 版提供。
- 免费版不包含 Lottie 文件集成，该功能仅在付费 Pro 版提供。
- 免费版不包含博客作者功能，该功能仅在付费 Pro 版提供。
- 免费版不包含文章分页功能，该功能仅在付费 Pro 版提供。
- 免费版不包含 eGuides 集合，该功能仅在付费 Pro 版提供。
- 免费版不包含 Roadmap 页面，该功能仅在付费 Pro 版提供。
- 免费版不包含注册（SignUp）页面，该功能仅在付费 Pro 版提供。
- 免费版不包含可正常工作的联系页面，该功能仅在付费 Pro 版提供。
- 免费版共 10 个页面，Pro 版提供 20 个以上页面。
- 免费版采用 MIT 许可，Pro 版采用商业许可，两者许可范围不同。
- Pro 版定价为 79.99 美元，属于付费升级，不包含在免费代码中。
- 运行模板需要 Node.js 22.12.0 或更高版本。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
| i18n Multilingual Support | ❌ | ✅ |
README 原文
| Sitepins CMS | ❌ | ✅ |
README 原文
| Mega Menu | ❌ | ✅ |
README 原文
| Video Popup | ❌ | ✅ |
README 原文
| Lottie File Integration | ❌ | ✅ |
README 原文
| Blog Authors | ❌ | ✅ |
README 原文
| Post Pagination | ❌ | ✅ |
README 原文
| eGuides Collection | ❌ | ✅ |
README 原文
| Roadmap Page | ❌ | ✅ |
README 原文
| SignUp Page | ❌ | ✅ |
README 原文
| Working Contact Page | ❌ | ✅ |
README 原文
| Total Pages | 10 | 20+ |
README 原文
| License | MIT | Commercial |
README 原文
| Pricing | Free | $79.99 |
README 原文
https://github.com/oxygenna-themes/foxi-astro-theme/blob/main/LICENSEhttps://github.com/oxygenna-themes/foxi-astro-theme/blob/main/README.md| `nvm use ...` | [Install node js](https://nodejs.org/en/download/) You will need to use Node.js version 22.12.0 or later. |
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-08。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 96 / 100
- 技术栈
- Astro
- 网站类型
- 博客 · SaaS · 企业官网 · 启动器
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-09-17
- 截图检查日期
- 2026-10-08
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16
查看当时使用的来源资料
SHA-256: 1beaaa94365bdb397128df1579c69b65fa8fa39b572398e924ed1254aade28d6
2026-10-08T11:52:16.869Z
来源文件 / 仓库# Foxi - Astro Theme Open-source Astro website template with fully responsive, customizable TailwindCSS components.  [](https://foxi.netlify.app) [](https://pagespeed.web.dev/analysis/https-foxi-netlify-app/c9ig3t85mu?form_factor=desktop) ## Introduction ### About Foxi is a free, highly customizable, and production-ready template for Astro, utilizing Tailwind CSS components. Designed with developers in mind, Foxi offers a solid foundation for building modern, high-performance websites quickly and efficiently.  ### Features - **Astro v6:** Built with the latest version of Astro for optimal performance and features. - **Built with Tailwind CSS:** Powered by Tailwind CSS for rapid UI development and responsive design. - **Perfect Scores in PageSpeed Insights:** Achieve perfect 100s for both desktop and mobile performance. - **Light & Dark Mode Support:** Seamlessly switch between light and dark themes to suit user preferences. - **Fully Responsive & Customizable:** Ensure your site looks great on any device, with easy customization to match your brand’s identity. - **SEO-friendly:** Optimized for search engines to improve visibility and organic traffic. - **Pre-designed Pages:** Includes a variety of pages such as Home, Pricing, Features, Contact, and more, to get you started quickly. - **Blog with MDX Support & Tags:** Create dynamic blog content with Markdown and JSX, complete with tagging for better organization. - **Easy Updates with JSON Files:** Simplify content management and updates using structured JSON files. - **Page Loading & Transition Animations:** Enhance user experience with smooth loading and transition effects. - **Clean Code & Folder Structure:** Maintain a well-organized codebase that’s easy to navigate and extend. - **Heroicons by Tailwind:** Access a wide range of high-quality icons to use across your site. - **Built-in Contact Form:** Ready-to-use contact form included. - **Utilizes WindUI Components:** Integrates optional WindUI TailwindCSS components. - **Modular Design:** The template is organized into reusable blocks enabling easy customization and expansion. - **Integrated Analytics:** Includes integrated Google Analytics and Google Tag Manager functionalities. - **Sitemap Included:** Includes a sitemap to enhance website navigation and search engine indexing. ### Upgrade to Pro Version | Feature | Free Version | Pro Version | | :------------------------ | :------------------------- | :--------------------------------------------------------------- | | Tailwind CSS | ✅ | ✅ | | Mobile Responsive | ✅ | ✅ | | SEO-Friendly | ✅ | ✅ | | i18n Multilingual Support | ❌ | ✅ | | Sitepins CMS | ❌ | ✅ | | Content Collections | ✅ | ✅ | | Mega Menu | ❌ | ✅ | | Video Popup | ❌ | ✅ | | Lottie File Integration | ❌ | ✅ | | Homepage Variations | ❌ | ✅ | | Features Page Variations | ❌ | ✅ | | Integrations Page | ❌ | ✅ | | Advanced Pricing Page | ❌ | ✅ | | Blog Collection | ✅ | ✅ | | Blog Categories | ✅ | ✅ | | Blog Authors | ❌ | ✅ | | Post Pagination | ❌ | ✅ | | eGuides Collection | ❌ | ✅ | | Roadmap Page | ❌ | ✅ | | SignUp Page | ❌ | ✅ | | Changelog Page | ✅ | ✅ | | FAQ Page | ✅ | ✅ | | Terms Page | ✅ | ✅ | | Working Contact Page | ❌ | ✅ | | Total Pages | 10 | 20+ | | | | | | Free Updates | ✅ | ✅ | | License | MIT | Commercial | | | | | | Pricing | Free | $79.99 | | | Continue with Free version | [View Pro Version](https://astro.build/themes/details/foxi-pro/) | [](https://oxygenna.lemonsqueezy.com/buy/2e32ec07-aa31-45a4-835d-8ebb7f6048cc) [](https://foxi-pro.netlify.app/) ## Getting Started ### Commands After downloading the template, you'll need to install some dependencies. Once that's done, you can run it on your local server. Check out the package.json file to see what scripts are available. | Command | Action | | :---------------- | :-------------------------------------------------------------------------------------------------------- | | `nvm use ...` | [Install node js](https://nodejs.org/en/download/) You will need to use Node.js version 22.12.0 or later. | | `npm install` | Installs dependencies | | `npm run dev` | Starts local dev server at `localhost:4321` | | `npm run build` | Build your production site to `./dist/` | | `npm run preview` | Preview your build locally, before deploying | ### Folder structure Inside Foxi Astro project, you'll see the following folders and files: ```plaintext / ├── public/ │ └── favicon.svg ├── src/ │ ├── assets/ │ ├── components/ │ │ ├── blocks/ │ │ │ └── ... │ │ └── ui/ │ │ └── ... │ ├── config/ │ │ └── ... │ ├── content/ │ │ └── blog/ │ │ └── ... │ ├── data/ │ │ └── ... │ ├── icons/ │ │ └── ... │ ├── layouts/ │ │ └── ... │ ├── page-sections/ │ │ └── home/ │ │ └── ... │ └── pages/ │ └── ... └── package.json ``` | Directory/File | Description | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | | `public/` | Contains static assets like images and the favicon. These files are served directly at the root URL. | | `src/assets/` | Contains all images and assets used in the project. | | `src/components/` | Contains reusable components for your site. This directory is divided into `ui` for UI components and `blocks` for section blocks. | | `src/components/blocks/` | Contains Section blocks used throughout the site. | | `src/components/ui/` | Contains individual UI components. | | `src/config/` | Contains configuration files for the project in typescript format. | | `src/content/` | Holds collection data, such as blog posts. | | `src/content/blog/` | Contains individual blog posts in markdown. | | `src/data/` | Contains JSON and md files with content data (like features, testimonials etc). | | `src/icons/` | Contains all icons used in the project, sourced from [Heroicons](https://heroicons.com/). | | `src/layouts/` | Contains layout components that define the overall structure of your pages. | | `src/pages/` | Contains `.astro` files for each page. Each file here is exposed as a route based on its file name. | | `package.json` | Lists dependencies and scripts for your project, including metadata and various package requirements. | ## Theme Configuration You can find the configuration files in the `src/config` directory. The configuration files are written in TypeScript and contain various settings for the theme, such as basic information, navigation bar, footer navigation, analytics, and social links. You can customize these settings to fit your specific needs. | Configuration File | Description | | -------------------------------- | ----------------------------------------------------------------------------------------------- | | `src/config/config.ts` | Includes the basic configuration settings including SEO, mode, and scroll animations. | | `src/config/navigationBar.ts` | Includes menu options for the navigation bar. | | `src/config/footerNavigation.ts` | Includes menu options for the footer navigation. | | `src/config/analytics.ts` | Includes the required codes for Google Analytics, Google Tag Manager and Google Search Console. | | `src/config/socialLinks.ts` | Contains the social link data for the website. | ### Basic configuration settings In the `src/config/config.ts` file, you can find the basic configuration settings. These includes the default SEO settings: - `siteTitle`: The default title of your website. - `siteDescription`: The default description of your website. - `ogImage`: The open graph image for your website. - `logo`: The logo for your website. - `canonical`: Whether to use canonical links for your website. - `noindex`: Prevents search engines from indexing your website if set to true. as well as the default site settings: - `mode`: The default mode for your website. Can be set to 'auto', 'light', or 'dark'. Auto mode will automatically switch between light and dark modes based on the user's system settings, while 'light' and 'dark' will force the site to use the corresponding mode. - `scrollAnimations`: Whether to enable smooth scrolling animations for your website. ## Theme Customization ### Customize the Colors The theme uses two main colors: primary and neutral. These colors are defined in the Tailwind CSS configuration file. To personalize the color scheme of your project, you can easily modify these color values. To customize the colors, follow these steps: 1. Open the `tailwind.config.js` file. 2. Find the `theme` section within the file. 3. Under `theme`, locate the `extend` property and then the `colors` object. 4. Modify the color values for `primary` and `neutral` to suit your preferred color palette. You can use the [tailwind CSS colors](https://nodejs.org/en/download/) or create your [own palette](https://uicolors.app/create) . ### Customize the Fonts To customize the fonts used in your project, follow these steps: 1. **Update the Tailwind CSS Configuration** Open the `tailwind.config.js` file. In the `theme` section, find the `extend` property and update the `fontFamily` object. 2. **Ensure Font Packages are Installed** Verify that the necessary font packages are included in your `package.json` file and also imported in the `src/layouts/Layout.astro` file. You can add your own fonts by following [this guide](https://docs.astro.build/en/guides/fonts/#using-fontsource) ### Dark/Light Mode By default, the site uses an automatic mode switcher, allowing it users to switch between light and dark modes based on the user's system settings or by using the mode switcher in the navigation bar. This is achioeved by setting the `mode-auto` class in the `Layout.astro` file. If you need to enforce a specific theme, you can set the class above as **`mode-light`** or **`mode-dark`**. When **`mode-light`** is applied, the site will consistently display in light mode, and the switcher will not be functional. Similarly, **`mode-dark`** will force the site to dark mode, with the switcher rendered non-functional. These settings allow you to maintain a fixed appearance across the site regardless of user preferences or system settings. ## License Copyright © 2026 - Designed & Developed by [Oxygenna](http://www.oxygenna.com/) Released under the MIT license. ## Want more themes? ### Mizu Check out **Mizu**, a product launch template designed for modern SaaS companies, digital products, and ambitious startups.  [](https://astro.build/themes/details/mizu/) [](https://mizu-theme.netlify.app/) ### Toki Check out **Toki**, a standout agency template with striking design, blazing speed, built for modern agencies and creatives.  [](https://astro.build/themes/details/toki/) [](https://toki-theme.netlify.app/) ### Foxi Framer Check out **Foxi Framer**, our premium Astro website template with fully responsive, customizable Tailwind CSS components.  [](https://framer.link/daY9kpl) [](https://foxi.framer.website/) ## Join the Community You can join our community on [Discord](https://discord.gg/YC5Eup8ZEx)! [](mailto:[email protected],[email protected])
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
astrowind
⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.
Astro · 博客
astro-paper
基于 Astro 的博客主题，使用 Markdown/MDX 内容、Tailwind 样式和 Pagefind 搜索。搜索属于博客功能，不代表独立工具站产品。
Astro · 博客
fuwari
✨A static blog template built with Astro.
Astro · 博客
Firefly
Firefly 是一款基于 Astro 的静态博客主题，由 CuteLeaf 在 saicaca 的 Fuwari 模板基础上二次开发，主打清新美观的视觉风格。
Astro · 博客
astro-theme-cactus
面向博客与笔记发布的 Astro 启动模板，支持 Markdown/MDX 内容、Tailwind 样式与 Pagefind 搜索，主要用途是发布文章和笔记。
Astro · 博客
astrofy
Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCS…
Astro · 作品集