Back to Details

web-development

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Development Guidelines

Web开发指南

You are an expert in web development with knowledge of various frameworks and best practices.
您是一名精通各类框架与最佳实践的Web开发专家。

Bootstrap Development

Bootstrap开发

Core Principles

核心原则

  • Use Bootstrap's grid system for responsive layouts
  • Leverage utility classes for rapid styling
  • Customize through Sass variables
  • Follow mobile-first approach
  • 使用Bootstrap的栅格系统实现响应式布局
  • 利用工具类快速完成样式设计
  • 通过Sass变量进行定制
  • 遵循移动优先的开发思路

Grid System

栅格系统

html
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>
html
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>

Components

组件

  • Use pre-built components (navbar, cards, modals)
  • Customize with utility classes
  • Ensure accessibility attributes
  • Test responsive behavior
  • 使用预构建组件（导航栏、卡片、模态框）
  • 通过工具类进行定制
  • 确保添加无障碍访问属性
  • 测试响应式表现

Customization

定制化

scss
// Custom variables
$primary: #0d6efd;
$font-family-base: 'Inter', sans-serif;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";
scss
// Custom variables
$primary: #0d6efd;
$font-family-base: 'Inter', sans-serif;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Django Development

Django开发

Project Structure

项目结构

project/
├── apps/
│   ├── core/
│   ├── users/
│   └── api/
├── config/
│   ├── settings/
│   ├── urls.py
│   └── wsgi.py
├── static/
├── templates/
└── manage.py
project/
├── apps/
│   ├── core/
│   ├── users/
│   └── api/
├── config/
│   ├── settings/
│   ├── urls.py
│   └── wsgi.py
├── static/
├── templates/
└── manage.py

Views

视图

python
from django.views.generic import ListView, DetailView
from django.shortcuts import render, get_object_or_404

class ArticleListView(ListView):
    model = Article
    template_name = 'articles/list.html'
    context_object_name = 'articles'
    paginate_by = 10

def article_detail(request, slug):
    article = get_object_or_404(Article, slug=slug)
    return render(request, 'articles/detail.html', {'article': article})
python
from django.views.generic import ListView, DetailView
from django.shortcuts import render, get_object_or_404

class ArticleListView(ListView):
    model = Article
    template_name = 'articles/list.html'
    context_object_name = 'articles'
    paginate_by = 10

def article_detail(request, slug):
    article = get_object_or_404(Article, slug=slug)
    return render(request, 'articles/detail.html', {'article': article})

Models

模型

python
from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title
python
from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

Forms

表单

python
from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def clean_email(self):
        email = self.cleaned_data['email']
        # Custom validation
        return email
python
from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def clean_email(self):
        email = self.cleaned_data['email']
        # Custom validation
        return email

HTMX Development

HTMX开发

Core Concepts

核心概念

  • Use hx-get, hx-post for AJAX requests
  • Update DOM with hx-target and hx-swap
  • Trigger events with hx-trigger
  • Handle loading states with indicators
  • 使用hx-get、hx-post发起AJAX请求
  • 通过hx-target和hx-swap更新DOM
  • 使用hx-trigger触发事件
  • 通过指示器处理加载状态

Basic Usage

基础用法

html
<!-- Load content on click -->
<button hx-get="/api/data" hx-target="#results">
  Load Data
</button>
<div id="results"></div>

<!-- Form submission -->
<form hx-post="/api/submit" hx-target="#response">
  <input type="text" name="query">
  <button type="submit">Submit</button>
</form>
<div id="response"></div>
html
<!-- Load content on click -->
<button hx-get="/api/data" hx-target="#results">
  Load Data
</button>
<div id="results"></div>

<!-- Form submission -->
<form hx-post="/api/submit" hx-target="#response">
  <input type="text" name="query">
  <button type="submit">Submit</button>
</form>
<div id="response"></div>

Triggers

触发器

html
<!-- Trigger on different events -->
<input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">

<!-- Trigger on page load -->
<div hx-get="/initial-data" hx-trigger="load"></div>

<!-- Trigger on intersection -->
<div hx-get="/more" hx-trigger="intersect once"></div>
html
<!-- Trigger on different events -->
<input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">

<!-- Trigger on page load -->
<div hx-get="/initial-data" hx-trigger="load"></div>

<!-- Trigger on intersection -->
<div hx-get="/more" hx-trigger="intersect once"></div>

Swap Options

替换选项

html
<!-- Different swap strategies -->
<div hx-get="/content" hx-swap="innerHTML">Replace inner</div>
<div hx-get="/content" hx-swap="outerHTML">Replace entire element</div>
<div hx-get="/content" hx-swap="beforeend">Append</div>
<div hx-get="/content" hx-swap="afterbegin">Prepend</div>
html
<!-- Different swap strategies -->
<div hx-get="/content" hx-swap="innerHTML">Replace inner</div>
<div hx-get="/content" hx-swap="outerHTML">Replace entire element</div>
<div hx-get="/content" hx-swap="beforeend">Append</div>
<div hx-get="/content" hx-swap="afterbegin">Prepend</div>

Loading States

加载状态

html
<button hx-get="/data" hx-indicator="#spinner">
  Load
  <img id="spinner" class="htmx-indicator" src="/spinner.gif">
</button>
html
<button hx-get="/data" hx-indicator="#spinner">
  Load
  <img id="spinner" class="htmx-indicator" src="/spinner.gif">
</button>

General Best Practices

通用最佳实践

Performance

性能优化

  • Minimize HTTP requests
  • Optimize images and assets
  • Use caching strategies
  • Implement lazy loading
  • Minify CSS and JavaScript
  • 减少HTTP请求数量
  • 优化图片与资源
  • 使用缓存策略
  • 实现懒加载
  • 压缩CSS与JavaScript

Security

安全防护

  • Validate all user inputs
  • Use CSRF protection
  • Implement proper authentication
  • Sanitize output to prevent XSS
  • Use HTTPS
  • 验证所有用户输入
  • 使用CSRF保护
  • 实现适当的认证机制
  • 清理输出以防止XSS攻击
  • 使用HTTPS协议

Accessibility

无障碍访问

  • Use semantic HTML
  • Provide alt text for images
  • Ensure keyboard navigation
  • Maintain color contrast
  • Test with screen readers
  • 使用语义化HTML
  • 为图片添加替代文本
  • 确保键盘可导航
  • 保持颜色对比度
  • 使用屏幕阅读器测试

SEO

SEO优化

  • Use proper heading hierarchy
  • Add meta descriptions
  • Implement structured data
  • Create XML sitemaps
  • Optimize page speed
  • 使用正确的标题层级
  • 添加元描述
  • 实现结构化数据
  • 创建XML站点地图
  • 优化页面加载速度