如何在邮件中使用Materialize.css？Django邮件模板开发咨询

Hey there! I see you're trying to build a Django email template with Materialize.css—great pick for modern styling, but email clients have some quirky limitations we need to work around. Let's start by cleaning up your template code, then dive into key tips to make it work reliably.

Your Original Template (Completed & Formatted) #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Activation</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- I assume your Materialize CSS link was cut off here, e.g.:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    -->
</head>
<body>
    <!-- Your activation content would go here -->
</body>
</html>

Critical Tips for Materialize + Django Email Templates #

Email clients don't handle modern CSS frameworks like browsers do—here's how to adapt:

• Skip external CSS links: Gmail, Outlook, and most other clients block or ignore external stylesheets. Instead, inline critical styles directly on HTML elements, or use an inlining tool (like Juice) to auto-convert Materialize styles into inline code before sending.
• Replace Flexbox with tables: Materialize relies heavily on Flexbox for responsiveness, but most email clients (especially older Outlook versions) have terrible Flexbox support. Stick to nested HTML tables for layout—it's old-school, but it's the only reliable way to get consistent rendering.
• Avoid Material Icons (use images instead): Web fonts are often blocked in emails. If you need icons, use inline PNG/SVG images with alt text fallbacks instead of Material Icons.
• Use absolute URLs for activation links: Relative links won't work in emails. In your Django template, combine {% url %} with request.build_absolute_uri to generate a full, working URL. Example:

  {% url 'activate' uidb64=uid token=token as activation_path %}
  <a href="{{ request.build_absolute_uri(activation_path) }}" class="btn">Activate Your Account</a>
  

• Test across clients: What looks perfect in Chrome might break in Outlook 2016. Use tools like Mailtrap or Litmus to preview your template in dozens of email environments.

Improved Example Template #

Here's a simplified, email-friendly version that borrows Materialize's color scheme and styling while sticking to email-safe practices:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Activation</title>
    <style type="text/css">
        /* Inline-friendly styles inspired by Materialize */
        .btn {
            background-color: #26a69a;
            color: #ffffff;
            padding: 12px 24px;
            border-radius: 4px;
            text-decoration: none;
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
        }
        .container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            font-family: 'Roboto', sans-serif;
        }
        h2 {
            color: #26a69a;
            margin-top: 0;
        }
    </style>
</head>
<body>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center">
                <div class="container">
                    <h2>Activate Your Account</h2>
                    <p>Hi {{ user.username }},</p>
                    <p>Thanks for signing up! Click the button below to activate your account:</p>
                    <p style="margin: 30px 0;">
                        <a href="{{ activation_url }}" class="btn">Activate Now</a>
                    </p>
                    <p>If the button doesn't work, copy and paste this link into your browser:</p>
                    <p style="color: #666666; font-size: 14px; word-break: break-all;">{{ activation_url }}</p>
                    <p>Thanks,<br>The Team</p>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

How to Generate the Activation URL in Django #

In your view, use this code to create the full activation URL and pass it to the template:

from django.contrib.sites.shortcuts import get_current_site
from django.template.loader import render_to_string
from django.core.mail import send_mail
from django.utils.http import urlsafe_base64_encode
from django.utils.encoding import force_bytes
from .tokens import account_activation_token

def send_activation_email(request, user):
    activation_path = reverse('activate', kwargs={
        'uidb64': urlsafe_base64_encode(force_bytes(user.pk)),
        'token': account_activation_token.make_token(user)
    })
    activation_url = request.build_absolute_uri(activation_path)
    
    subject = 'Activate Your Account'
    message = render_to_string('activation_email.html', {
        'user': user,
        'activation_url': activation_url,
    })
    
    send_mail(subject, '', 'your@email.com', [user.email], html_message=message)

内容的提问来源于stack exchange，提问作者Kurt Peek