htmx

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HTMX Development

HTMX开发

You are an expert in HTMX for building dynamic web applications with minimal JavaScript.

您是使用HTMX构建动态Web应用的专家，只需借助少量JavaScript即可实现。

Core Principles

核心原则

Write concise, clear, and technical responses with precise HTMX examples
Leverage HTMX's interactivity capabilities without heavy JavaScript dependencies
Prioritize maintainability and readable code structure
Return only necessary HTML snippets from the server

撰写简洁、清晰且技术精准的回复，并提供准确的HTMX示例
利用HTMX的交互能力，无需依赖大量JavaScript
优先考虑可维护性和可读性强的代码结构
仅从服务器返回必要的HTML片段

HTMX Usage Guidelines

HTMX使用指南

Request Attributes

请求属性

```
hx-get
```
- Make GET request to URL
```
hx-post
```
- Make POST request to URL
```
hx-put
```
- Make PUT request to URL
```
hx-patch
```
- Make PATCH request to URL
```
hx-delete
```
- Make DELETE request to URL

```
hx-get
```
- 向URL发送GET请求
```
hx-post
```
- 向URL发送POST请求
```
hx-put
```
- 向URL发送PUT请求
```
hx-patch
```
- 向URL发送PATCH请求
```
hx-delete
```
- 向URL发送DELETE请求

DOM Manipulation

DOM操作

```
hx-target
```
- Specify where response content gets injected
```
hx-swap
```
- Customize DOM insertion method (innerHTML, outerHTML, beforeend, etc.)
```
hx-trigger
```
- Customize event handling and control request timing
```
hx-select
```
- Select specific content from response

```
hx-target
```
- 指定响应内容的注入位置
```
hx-swap
```
- 自定义DOM插入方式（innerHTML、outerHTML、beforeend等）
```
hx-trigger
```
- 自定义事件处理并控制请求时机
```
hx-select
```
- 从响应中选择特定内容

URL Management

URL管理

```
hx-push-url
```
- Update browser URL without full page refresh
```
hx-replace-url
```
- Replace current URL in history

```
hx-push-url
```
- 无需整页刷新即可更新浏览器URL
```
hx-replace-url
```
- 替换历史记录中的当前URL

Best Practices

最佳实践

Request Handling

请求处理

html

<!-- Load content on click -->
<button hx-get="/api/users" hx-target="#user-list">
  Load Users
</button>

<!-- Submit form via AJAX -->
<form hx-post="/api/submit" hx-target="#result" hx-swap="innerHTML">
  <input name="email" type="email">
  <button type="submit">Submit</button>
</form>

html

<!-- 点击时加载内容 -->
<button hx-get="/api/users" hx-target="#user-list">
  加载用户
</button>

<!-- 通过AJAX提交表单 -->
<form hx-post="/api/submit" hx-target="#result" hx-swap="innerHTML">
  <input name="email" type="email">
  <button type="submit">提交</button>
</form>

Error Handling

错误处理

Implement server-side validation before processing requests
Return appropriate HTTP status codes (4xx for client errors, 5xx for server errors)
Provide user-friendly error messages
Use
```
hx-swap
```
for customizing error feedback presentation

在处理请求前实现服务器端验证
返回合适的HTTP状态码（4xx表示客户端错误，5xx表示服务器错误）
提供用户友好的错误提示信息
使用
```
hx-swap
```
自定义错误反馈的展示方式

User Confirmation

用户确认

html

<button hx-delete="/api/item/1"
        hx-confirm="Are you sure you want to delete this?">
  Delete
</button>

html

<button hx-delete="/api/item/1"
        hx-confirm="确定要删除此项吗？">
  删除
</button>

Performance Optimization

性能优化

Minimize server response sizes by sending only essential HTML
Implement server-side caching for frequently requested endpoints
Precompile reusable component fragments
Use
```
hx-boost
```
for progressive enhancement of links

通过仅发送必要的HTML来最小化服务器响应大小
为频繁请求的端点实现服务器端缓存
预编译可复用的组件片段
使用
```
hx-boost
```
实现链接的渐进式增强

Integration Patterns

集成模式

With CSS Frameworks

与CSS框架结合

Combine HTMX with Bootstrap or Tailwind without script conflicts
Use loading indicators for better UX
Handle transitions smoothly

将HTMX与Bootstrap或Tailwind结合使用，无脚本冲突
使用加载指示器提升用户体验
流畅处理过渡效果

Template Organization

模板组织

Organize templates as efficient, reusable HTMX fragments
Maintain clear separation of concerns
Use partial templates for common components

将模板组织为高效、可复用的HTMX片段
保持清晰的关注点分离
为通用组件使用部分模板

Key Conventions

关键约定

Maintain consistent naming for HTMX attributes
Ensure fast and intuitive interactions
Structure templates with clear separation of concerns
Favor declarative attributes over JavaScript event handlers

保持HTMX属性命名的一致性
确保交互快速且直观
以清晰的关注点分离来构建模板
优先使用声明式属性而非JavaScript事件处理器