astroflare

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Astroflare

Expert guidance for TypeScript, Tailwind, and Astro framework for scalable web development on the Cloudflare platform.

针对在Cloudflare平台上进行可扩展Web开发的TypeScript、Tailwind和Astro框架的专业指南。

Key Principles

核心原则

Write concise, technical responses with accurate Astro examples
Prioritize static generation and server-side islands with minimal JavaScript
Use descriptive variable names and follow Astro's naming conventions
NEVER change the site output without explicit user confirmation - issues are likely elsewhere in configuration, environment variables, or build process
Organize files using Astro's file-based routing system
Native over frameworks: Prefer native HTML elements (
```
<dialog>
```
,
```
<form>
```
) and web components over framework-specific solutions when possible. Use framework features only when they provide clear value.

撰写简洁、技术准确的回复，并附带正确的Astro示例
优先选择静态生成和服务端孤岛（Server-side Islands），尽量减少JavaScript使用
使用描述性变量名，遵循Astro的命名规范
未经用户明确确认，绝不修改站点输出 - 问题可能出在配置、环境变量或构建流程的其他环节
使用Astro的基于文件的路由系统组织文件
原生优先于框架：尽可能使用原生HTML元素（如
```
<dialog>
```
、
```
<form>
```
）和Web组件，而非框架特定方案。仅当框架功能能提供明确价值时才使用。

Project Architecture

项目架构

Deployment Target

部署目标

Cloudflare Workers with
```
output: 'static'
```
and component server islands for server-side rendering
Use
```
server:defer
```
directive for server islands to optimize performance
Cloudflare adapter configured with platformProxy for forms/server actions
Trailing slashes always (
```
trailingSlash: 'always'
```
) to match Cloudflare Workers behavior

采用
```
output: 'static'
```
和组件服务端孤岛实现服务端渲染的Cloudflare Workers
为服务端孤岛使用
```
server:defer
```
指令以优化性能
配置Cloudflare适配器并启用platformProxy以支持表单/服务端操作
始终保留尾部斜杠（
```
trailingSlash: 'always'
```
），以匹配Cloudflare Workers的行为

Project Structure

项目结构

src/
  ├── components/       # Astro components and custom web elements
  │   ├── core/         # Reusable core components
  │   ├── forms/        # Form components with client-side logic
  │   ├── modals/       # Modal dialogs
  │   └── animations/   # Animated components
  ├── layouts/          # Page layouts
  ├── pages/            # File-based routing
  ├── actions/          # Server actions (forms, API endpoints)
  ├── utils/            # Utility code
  └── styles/           # Global styles

src/
  ├── components/       # Astro组件和自定义Web元素
  │   ├── core/         # 可复用核心组件
  │   ├── forms/        # 包含客户端逻辑的表单组件
  │   ├── modals/       # 模态对话框
  │   └── animations/   # 动画组件
  ├── layouts/          # 页面布局
  ├── pages/            # 基于文件的路由
  ├── actions/          # 服务端操作（表单、API端点）
  ├── utils/            # 工具代码
  └── styles/           # 全局样式

Component Development

组件开发

Create
```
.astro
```
files for all components - this is the default and preferred approach
Use
```
components/core/
```
for reusable components
Prefer custom web components over React islands for interactivity
Use native HTML elements (
```
<dialog>
```
,
```
<form>
```
) when possible

所有组件均创建为
```
.astro
```
文件 - 这是默认且推荐的方式
将可复用组件放在
```
components/core/
```
目录下
对于交互功能，优先选择自定义Web组件而非React孤岛
尽可能使用原生HTML元素（如
```
<dialog>
```
、
```
<form>
```
）

Package Management

包管理

Use pnpm as the package manager
Node version: 24.x
pnpm version: >=10

使用pnpm作为包管理器
Node版本：24.x
pnpm版本：>=10

References

参考资料

For detailed guidance, see:

```
references/components.md
```
- Component patterns and Starwind UI
```
references/routing.md
```
- Routing and pages
```
references/forms.md
```
- Forms and server actions
```
references/styling.md
```
- Tailwind CSS patterns
```
references/seo.md
```
- Comprehensive SEO guide
```
references/testing.md
```
- Testing patterns
```
references/deployment.md
```
- Build and deployment

如需详细指南，请参阅：

```
references/components.md
```
- 组件模式与Starwind UI
```
references/routing.md
```
- 路由与页面
```
references/forms.md
```
- 表单与服务端操作
```
references/styling.md
```
- Tailwind CSS模式
```
references/seo.md
```
- 全面SEO指南
```
references/testing.md
```
- 测试模式
```
references/deployment.md
```
- 构建与部署