Django：电子邮件以 html 形式发送以进行密码重置

Question

Django：电子邮件以 html 形式发送以进行密码重置

San*_*nip 1 django html-email django-authentication

发送的重置密码电子邮件将显示为原始 HTML 内容。并非每个用户都会遇到这种情况，但对于相当数量的用户来说，这个问题就会出现。

\n\n

这是我重置密码的网址：

\n\n

from django.contrib.auth.views import password_reset\nurl(r\'^accounts/password/reset/\', password_reset, {\'template_name\':\'users/login.html\',\'html_email_template_name\':\'registration/password_reset_email.html\', \'post_reset_redirect\':\'/users/accounts/login/?reset=1\', \'extra_context\':{\'reset\':\'1\'}}, name=\'password_reset\'),\n

Run Code Online (Sandbox Code Playgroud)\n\n

这些是我的密码重置电子邮件模板：

\n\n

注册/password_reset_email.html

\n\n

{% extends \'users/email_base.html\' %}\n\n{% block content %}\n{% load i18n %}\n\n\n  <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f0f0f0" align="center">\n      <tbody>\n        <tr>\n          <td style="font-size:0;" align="center">\n            <div style="display:inline-block;width:100%;max-width:800px;vertical-align:top;" class="width800 mrt-30">\n              <!-- ID:BG SECTION-1 -->\n              <table class="display-width" style="max-width:800px;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">\n                <tbody>\n                  <tr>\n                    <td class="padding" align="center">\n                      <div style="display:inline-block;width:100%;max-width:600px;vertical-align:top;font-family:Ubuntu, sans-serif;" class="main-width">\n                        <table class="display-width-inner" style="max-width:600px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">\n                          <tbody>\n                            <tr>\n                              <td style="mso-line-height-rule:exactly;line-height:30px;font-size:0;" height="30">\n                                \xc2\xa0\n                              </td>\n                            </tr>\n\n                            <tr>\n                              <td style="mso-line-height-rule:exactly;line-height:10px;font-size:0;" height="10">\n                                \xc2\xa0\n                              </td>\n                            </tr>\n                            <tr>\n                              <td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:400;font-size:14px;line-height:24px; text-align:justify;">\n                                {% blocktrans %}\n                                    You\'re receiving this email because you requested a password reset for your user account at {{ site_name }}.\n                                {% endblocktrans %}\n                              </td>\n                            </tr>\n                           <tr>\n                              <td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:400;font-size:14px;line-height:24px; text-align:justify;">\n                                Please go to the following page and choose a new password:\n                                {% block reset_link %}\n                                    https://{{ domain }}{% url \'auth_password_reset_confirm\' uidb64=uid token=token %}\n                                {% endblock %}\n                               Your username, in case you\'ve forgotten: {{ user.get_username }}\n                              </td>\n                            </tr>\n                           <tr>\n                              <td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:400;font-size:14px;line-height:24px; text-align:justify;">\n                                {% trans "Thanks for using our Application!" %}\n\n                               The {{ site_name }} team\n                              </td>\n                            </tr>\n                          </tbody>\n                        </table>\n                      </div>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n\n{% endblock %}\n

Run Code Online (Sandbox Code Playgroud)\n\n

用户/email_base.html

\n\n

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n  <head>\n    <title>Fieldsight</title>\n    <meta http-equiv="content-type" content="text/html; charset=utf-8">\n    <meta name="viewport" content="width=display-width, initial-scale=1.0, maximum-scale=1.0,">\n    <!-- OUR PACKAGES-1 TITLE STARTS -->\n\n  <style type="text/css">\n        @import url(\'https://fonts.googleapis.com/css?family=Ubuntu:400,500\');\n        html{\n            width:100%;\n        }\n        body{\n            margin:0;\n            padding:0;\n            width:100%;\n            -webkit-text-size-adjust:none;\n            -ms-text-size-adjust:none;\n            background-color:#f0f0f0;\n            font-family:\'Ubuntu\',sans-serif;\n        }\n        img{\n            display:block !important;\n            border:0;\n            -ms-interpolation-mode:bicubic;\n        }\n        .ReadMsgBody{\n            width:100%;\n        }\n        .ExternalClass{\n            width:100%;\n        }\n        .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{\n            line-height:100%;\n        }\n        .images{\n            display:block !important;\n            width:100% !important;\n        }\n\n        p{\n            margin:0 !important;\n            padding:0 !important;\n        }\n\n        .display-button a:hover{\n            text-decoration:none !important;\n        }\n    @media only screen and (min-width:799px){\n        .saf-table{\n            display:table !important;\n        }\n\n}   @media only screen and (min-width:799px){\n        .main-width{\n            width:600px;\n        }\n\n}   @media only screen and (min-width:799px){\n        .width800{\n            width:800px !important;\n            max-width:800px !important;\n        }\n\n}   @media only screen and (min-width:799px){\n        .mrt-30{\n            margin-top:50px;\n        }\n\n}   @media only screen and (min-width:799px){\n        .mrb-30{\n            margin-bottom:50px;\n        }\n\n}   @media only screen and (max-width:799px){\n        body{\n            width:auto !important;\n        }\n\n}   @media only screen and (max-width:799px){\n        .display-width{\n            width:100% !important;\n        }\n\n}   @media only screen and (max-width:799px){\n        .display-width-inner{\n            width:600px !important;\n        }\n\n}   @media only screen and (max-width:799px){\n        .padding{\n            padding:0 20px !important;\n        }\n\n}   @media only screen and (max-width:799px){\n        .res-padding-full{\n            padding:0 !important;\n        }\n\n}   @media only screen and (max-width:799px){\n        .res-padding-left{\n            padding-left:0 !important;\n        }\n\n}   @media only screen and (max-width:799px){\n        .width800{\n            width:100% !important;\n            max-width:100% !important;\n        }\n\n}   @media only screen and (max-width:768px){\n        .width768{\n            max-width:684px !important;\n        }\n\n}   @media only screen and (max-width:768px){\n        .child1-width{\n            width:50% !important;\n            max-width:50% !important;\n        }\n\n}   @media only screen and (max-width:768px){\n        .child2-width{\n            width:50% !important;\n            max-width:50% !important;\n        }\n\n}   @media only screen and (max-width:768px){\n        .full-width-height{\n            padding-top:40px !important;\n            padding-bottom:25px !important;\n        }\n\n}   @media only screen and (max-width:680px){\n        .child1-width{\n            width:50% !important;\n            max-width:50% !important;\n        }\n\n}   @media only screen and (max-width:680px){\n        .child2-width{\n            width:50% !important;\n            max-width:50% !important;\n        }\n\n}   @media only screen and (max-width:680px){\n        .res-padding-left{\n            padding-left:40px !important;\n        }\n\n}   @media only screen and (max-width:680px){\n        .padding-hide{\n            padding-bottom:0 !important;\n        }\n\n}   @media only screen and (max-width:680px){\n        .res-attract-height{\n            padding:20px 10px 0 !important;\n        }\n\n}   @media only screen and (max-width:680px){\n        .full-width-height{\n            padding-top:50px !important;\n            padding-bottom:40px !important;\n        }\n\n}   @media only screen and (max-width:660px){\n        .child1-width{\n            width:50% !important;\n            max-width:50% !important;\n        }\n\n}   @media only screen and (max-width:660px){\n        .child2-width{\n            width:50% !important;\n            max-width:50% !important;\n        }\n\n}   @media only screen and (max-width:660px){\n        .res-padding-left{\n            padding-left:30px !important;\n        }\n\n}   @media only screen and (max-width:660px){\n        .res-attract-height{\n            padding:20px 10px 0 !important;\n        }\n\n}   @media only screen and (max-width:660px){\n        .full-width-height{\n            padding-top:45px !important;\n            padding-bottom:20px !important;\n        }\n\n}   @media only screen and (max-width:640px){\n        .res-attract-height{\n            padding:20px 10px 0 !important;\n        }\n\n}   @media only screen and (max-width:640px){\n        .child1-width,.child2-width{\n            width:50% !important;\n            max-width:50% !important;\n        }\n\n}   @media only screen and (max-width:640px){\n        .res-padding-left{\n            padding-left:20px !important;\n        }\n\n}   @media only screen and (max-width:640px){\n        .full-width-height{\n            padding-top:40px !important;\n            padding-bottom:30px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        body{\n            width:auto !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .display-width{\n            width:100% !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .display-width-inner,.display-width-child{\n            width:100% !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .display-width-child .button-width .display-button{\n            width:auto !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .res-padding-full{\n            padding:0 20px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .padding-hide{\n            padding:0 !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .padding{\n            padding:0 20px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .saf-table{\n            display:block !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .width282{\n            width:282px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .div-width{\n            display:block !important;\n            width:100% !important;\n            max-width:100% !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .res-height20-bottom{\n            padding-bottom:20px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .res-height-top{\n            padding-top:60px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .full-width-height{\n            padding-bottom:60px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .footer-width{\n            width:151px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .height20{\n            height:20px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .height30{\n            height:30px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .hide-height,.hide-bar{\n            display:none !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .txt-center{\n            text-align:center !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        span.unsub-width{\n            width:100% !important;\n            display:block !important;\n            padding-bottom:10px !important;\n        }\n\n}   @media only screen and (max-width:639px){\n        .res-center{\n            margin:0 auto !important;\n            display:table !important;\n        }\n\n}   @media only screen and (max-width:480px){\n        .display-width table,.display-width-child2 table{\n            width:100% !important;\n        }\n        .mrbm-30{\n            margin-bottom: 30px !important;\n        }\n\n}   @media only screen and (max-width:480px){\n        .display-width .button-width .display-button{\n            width:auto !important;\n        }\n\n}   @media only screen and (max-width:480px){\n        .display-width-child .footer-width{\n            width:151px !important;\n        }\n\n}   @media only screen and (max-width:480px){\n        .display-width .width282{\n            width:282px !important;\n        }\n\n\n}   @media only screen and (max-width:480px){\n        .div-width{\n            display:block !important;\n            width:100% !important;\n            max-width:100% !important;\n        }\n\n}   @media only screen and (max-width:380px){\n        .display-width table{\n            width:100% !important;\n        }\n\n}   @media only screen and (max-width:380px){\n        .display-width .button-width .display-button{\n            width:auto !important;\n        }\n\n}   @media only screen and (max-width:380px){\n        .display-width-child .width282{\n            width:100% !important;\n        }\n\n}   @media only screen and (max-width:330px){\n        .res-font{\n            font-size:33px !important;\n        }\n\n}</style>\n</head>\n  <body>\n    {% block content %}\n\n    {% endblock %}\n\n  <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f0f0f0" align="center">\n    <tbody>\n      <tr>\n        <td style="font-size:0;" align="center">\n          <div style="display:inline-block;width:100%;max-width:800px;vertical-align:top;" class="width800 mrb-30">\n            <!-- ID:BG FOOTER -->\n            <table class="display-width" style="max-width:800px;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">\n              <tbody>\n                <tr>\n                  <td class="padding" align="center">\n                    <div style="display:inline-block;width:100%;max-width:600px;vertical-align:top;" class="main-width">\n                      <table class="display-width-inner" style="max-width:600px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">\n                        <tbody>\n                            <tr>\n                            <td style="line-height:20px;mso-line-height-rule:exactly;font-size:0;" height="20">\n                              \xc2\xa0\n                            </td>\n                          </tr>\n                            <tr>\n                                <td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:600;font-size:14px;line-height:24px;" align="left">\n                                    <strong style="color:#0488d1;text-decoration:none;text-transform:capitalize;font-weight:500;margin:0 5px 0 0;">Happy FieldSighting!</strong>\n                                </td>\n                            </tr>\n                            <tr>\n                            <td style="line-height:15px;mso-line-height-rule:exactly;font-size:0;" height="15">\n                              \xc2\xa0\n                            </td>\n                          </tr>\n                          <tr>\n                            <!-- ID:BR FOOTER BORDER -->\n                            <td style="line-height:15px;mso-line-height-rule:exactly;border-bottom:1px solid #e5e5e5;font-size:0;" height="15">\n                              \xc2\xa0\n                            </td>\n                          </tr>\n                          <tr>\n                            <td style="line-height:15px;mso-line-height-rule:exactly;font-size:0;" height="15">\n                              \xc2\xa0\n                            </td>\n                          </tr>\n\n                          <!-- SOCIAL ICONS -->\n                          <tr>\n                            <td align="center">\n                              <table style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">\n                                <tbody>\n                                  <tr>\n                                    <td class="div-width mrbm-30" align="center">\n                                        <table>\n                                            <tbody>\n                                                <tr>\n                                                    <td style="border-collapse:collapse;color:#333333;" align="center">\n                                                      <a href="https://www.fieldsight.org/" target="_link" style="color:#333333;text-decoration:none;"> <img src="https://gallery.mailchimp.com/7548f1bce7a62e405ffe789fd/images/8087ebbb-7ee5-4377-9b52-209086142dcf.png" alt="150x50" style="margin:0; border:0; padding:0; display:block;" width="120"></a>\n                                                    </td>\n                                                </tr>\n                                            </tbody>\n                                        </table>\n                                    </td>\n                                    <td align="center" class="div-width">\n                                      <table style="width:auto !important;" cellspacing="0" cellpadding="0" border="0" align="center">\n                                        <tbody>\n                                          <tr>\n                                            <!-- ID:TXT FOOTER ADDRESS -->\n                                            <td width="30" valign="middle" align="left">\n                                              <a href="https://www.facebook.com/FieldSight-761158147606014/" target="_link" style="color:#666666;text-decoration:none;"> <img src="https://gallery.mailchimp.com/7548f1bce7a62e405ffe789fd/images/e0ed2f36-4a6d-449b-a85d-be4ba2bfd1fc.png" alt="48x48x7" style="max-width:30px; width:100%; height:auto; margin:0; border:0; padding:0; display:block;" width="30" height="30"></a>\n                                            </td>\n                                            <td width="10">\n                                              \xc2\xa0\n                                            </td>\n                                            <td width="30" valign="middle" align="left">\n

Answer 1

Mat*_*our 9

默认情况下，纯文本电子邮件模板称为registration/password_reset_email.html（我个人认为这很令人困惑，因为纯文本不是html）。在您的情况下，email_template_name（纯文本）和html_email_template（html 电子邮件）都使用相同的模板，这意味着如果客户端无法使用 html，它将回退到包含 html 语法的纯文本电子邮件。

来自文档：

email_template_name：用于生成带有重置密码链接的电子邮件的模板的全名。如果未提供，则默认为 Registration/password_reset_email.html。

html_email_template_name：用于生成带有密码重置链接的文本/html 多部分电子邮件的模板的全名。默认情况下，不发送 HTML 电子邮件。

要解决这个问题：

将 html 电子邮件模板的名称更改为：html_password_reset_email.html
urls.py更新设置中的关键字参数html_email_template_name=registration/html_password_reset_email.html，

现在，这将为可以呈现 html 的客户端发送 html 电子邮件模板，并为只能呈现纯文本的客户端回退到纯文本（django 默认）模板。

其他信息：发送密码重置电子邮件的来源可以在这里找到： https: //github.com/django/django/blob/7f612eda80db1c1c8e502aced54c2062080eae46/django/contrib/auth/forms.py#L247

简而言之，该变量email_template_name用于发送电子邮件的纯文本版本。如果您包含html_email_template_name，则会将额外的有效负载添加到电子邮件中；其中包括一个 html 电子邮件附件 ( html_email_template_name)。

归档时间：	6 年，9 月前
查看次数：	2641 次
最近记录：	6 年，9 月前