django-allauth教程(4): 美化模板，自定义邮件和消息内容

django-allauth 是一个强大的能够解决你的注册和认证需求的 Django 应用。无论你需要构建本地注册系统还是社交账户注册系统，django-allauth 都能够帮你做到。然而django-allauth自带的模板和用户界面是没有经过美化的，非常简陋（如下图所示)。另外涉及邮箱验证的电子邮件和各种消息也是固定的，你需要学会修改它们才能真正将django-allauth为己所用。本文将教你如何美化django-allauth的模板（尤其是注册与登录表单），以及修改邮件和消息文本内容。

本文是django-allauth教程的最后一部分，前三部分已完结。

• 安装与基本使用(注册，登录) - 已完结

• 用户资料扩展及修改 -  已完结

• 实现第三方auth登录 - 已完结

• 美化登录与注册表单

本文参考了下文《如何手动渲染Django表单》

https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html

下载django-allauth模板和邮件文本文件

如果你要修改django-allauth的模板和邮件文本，你必需先要知道它们的位置。如果你是通过pip安装的django-allauth，你将不会在你的项目文件夹mysite下找到allauth的templates文件夹。此时你需要从github上将allauth的/templates/accounts/文件夹整个拷贝到你的本地应用中去(下载地址: https://github.com/pennersr/django-allauth/tree/master/allauth)。

假如你的应用名字叫myaccount，新的templates/accounts/文件夹位置应该是myaccount/templates/accounts/（如下图所示)。这是因为django-allauth总是会在templates/accounts/文件夹中寻找模板。文件夹中不仅包括了各种html模板（都继承了base.html)，还包括了messages和email文本文件。

下载好上述文件后，你就可以开始动手改了。由于修改txt格式的email和message文本非常直接，我们这里就不细讲了。我们重点放在美化html模板，让其更漂亮专业。

使用bootstrap美化表单，修改base.html

不管是注册，登录还是重置密码页面，html模板主要内容都是表单。我们将使用bootstrap迅速美化模板和表单。最快速的方式就是修改base.html（如果没有该文件，你需要创建一个)，加入boostrap样式和js。

html>
lang="en">

  charset="utf-8">
  http-equiv="X-UA-Compatible" content="IE=edge">
  name="viewport" content="width=device-width, initial-scale=1">
  
  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >



  

      
class="container">
      {% block content %}
      {% endblock %}
    
  


  
  

我们以注册页面为例，教你如何美化django-allauth的表单。注册页面默认的signup.html代码如下，我们先不做任何修改。

{% extends "account/base.html" %}

{% load i18n %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
{% trans "Sign Up" %}

{% blocktrans %}Already have an account? Then please href="{{ login_url }}">sign in.{% endblocktrans %}

class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}
  {{ form.as_p }}
  {% if redirect_field_value %}
  type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}
  type="submit">{% trans "Sign Up" %} »


{% endblock %}

因为我们在base.html添加了bootstrap样式，此时当你访问http://127.0.0.1/accounts/signup/时，注册页面已经改进了许多，变成了如下的样子。

给表单及其字段添加css样式

一个标准的boostrap表单代码如下，每个输入字段field都是包围在div里的(class="form-group")，同时每个input的css都有form-control这个属性。而我们django的表单渲染form.as_p或则form.as_table显然满足不了我们的要求，因为我们没法将css类名加进去。

  
class="form-group">
    for="id_email">Email address
    type="email" class="form-control" id="id_email" name="email">
  
  
class="form-group">
    for="id_password">Password
    type="password" class="form-control" id="id_password" name="password">
  
  type="submit" class="btn btn-default">Submit

当然你也可以使用自定义widge的属性来给各个字段添加css，或者直接使用django-crispy-forms傻瓜表单，然而我并不喜欢这2种方式。我喜欢自己能控制css的类名，这时我推荐使用django-widget-teaks。

$ pip install django-widget-tweaks

当你通过pip安装这个第三方包后，你需要把它加到INSTALLED_APP里去，这时在模板中{% load widget_tweaks %}，你就可以给你想要的字段添加css了。以signup.html，我们给每个输入字段都加入了form-control属性。

{% extends "account/base.html" %}

{% load i18n %}
{% load widget_tweaks %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
{% trans "Sign Up" %}

{% blocktrans %}Already have an account? Then please href="{{ login_url }}">sign in.{% endblocktrans %}

class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}

     {% for hidden in form.hidden_fields %}
      {{ hidden }}
    {% endfor %}

    {% for field in form.visible_fields %}
      
class="form-group">
        for="{{ field.id_for_label }}">{{ field.label }}
        {{ field|add_class:'form-control' }}
        {% for error in field.errors %}
          class="help-block">{{ error }}
        {% endfor %}
      
    {% endfor %}
  

  {% if redirect_field_value %}
  type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}

    
class="form-group">
  type="submit" class="btn btn-success"">{% trans "Sign Up" %}
    


{% endblock %}

这时注册页面已经变成了如下所示, 美观多了。

django-widget-tweaks还提供了强大的render_field方法，可以自定义某个字段的css和提示词placeholder。

{% render_field form.first_name class="form-control" placeholder=form.first_name.label %}

我有没有告诉过你，django-allauth表单是自带验证的？它会检查用户名和email是否已经注册，也来检查密码强度是否够以及用户输入的两次密码是不是一致。如下图所示:

建立一个可以重用的bootstrap表单

由于大部分用户注册登录管理相关页面都与表单有关，你可能不希望将上述form的代码拷贝到每个html模板件中去。这时你可以建立一个可以重用的bootstrap表单，然后在各html模板中直接把它包含进去。

我们可以在snippets文件夹中建立一个新文件bs4_form.html, 添加如下代码:

{% load widget_tweaks %}

{% for hidden_field in form.hidden_fields %}
  {{ hidden_field }}
{% endfor %}

{% if form.non_field_errors %}
  
class="alert alert-danger" role="alert">
    {% for error in form.non_field_errors %}
      {{ error }}
    {% endfor %}
  
{% endif %}

{% for field in form.visible_fields %}
  
class="form-group">
    {{ field.label_tag }}

    {% if form.is_bound %}
      {% if field.errors %}
        {% render_field field class="form-control is-invalid" %}
        {% for error in field.errors %}
          
class="invalid-feedback">
            {{ error }}
          
        {% endfor %}
      {% else %}
        {% render_field field class="form-control is-valid" %}
      {% endif %}
    {% else %}
      {% render_field field class="form-control" %}
    {% endif %}

    {% if field.help_text %}
      class="form-text text-muted">{{ field.help_text }}
    {% endif %}
  
{% endfor %}

然后可以在signup.html和其它模板文件中这样使用它，这样可以将代码大大简化。

{% extends "account/base.html" %}

{% load i18n %}
{% load widget_tweaks %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
{% trans "Sign Up" %}

{% blocktrans %}Already have an account? Then please href="{{ login_url }}">sign in.{% endblocktrans %}

class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}
    {% include 'account/snippets/bs4_form.html' with form=form %}
  {% if redirect_field_value %}
  type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}

    
class="form-group">
  type="submit" class="btn btn-success"">{% trans "Sign Up" %}
    


{% endblock %}

自此django-allauth教程的最后一部分就到此结束啦。坚持写点原创内容不易，欢迎点赞。

• 安装与基本使用(注册，登录) - 已完结

• 用户资料扩展及修改 -  已完结

• 实现第三方auth登录 - 已完结

• 美化登录与注册表单 - 已完结

下面我们将重回django基础知识高级进阶，同时开始写python爬虫应用，欢迎关注。