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。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block head_title %} {% endblock %}</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<body>

  <main>
      <div class="container">
      {% block content %}
      {% endblock %}
    </div>
  </main>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>
</html>

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

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

{% load i18n %}

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

{% block content %}
<h1>{% trans "Sign Up" %}</h1>

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

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

{% 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类名加进去。

<form>
  <div class="form-group">
    <label for="id_email">Email address</label>
    <input type="email" class="form-control" id="id_email" name="email">
  </div>
  <div class="form-group">
    <label for="id_password">Password</label>
    <input type="password" class="form-control" id="id_password" name="password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

当然你也可以使用自定义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 %}
<h1>{% trans "Sign Up" %}</h1>

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

<form 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 %}
      <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field|add_class:'form-control' }}
        {% for error in field.errors %}
          <span class="help-block">{{ error }}</span>
        {% endfor %}
      </div>
    {% endfor %}
  

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

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

{% 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 %}
  <div class="alert alert-danger" role="alert">
    {% for error in form.non_field_errors %}
      {{ error }}
    {% endfor %}
  </div>
{% endif %}

{% for field in form.visible_fields %}
  <div 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 %}
          <div class="invalid-feedback">
            {{ error }}
          </div>
        {% endfor %}
      {% else %}
        {% render_field field class="form-control is-valid" %}
      {% endif %}
    {% else %}
      {% render_field field class="form-control" %}
    {% endif %}

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

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

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

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

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

{% block content %}
<h1>{% trans "Sign Up" %}</h1>

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

<form 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 %}
  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}

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

{% endblock %}

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

安装与基本使用(注册，登录) - 已完结
用户资料扩展及修改 - 已完结
实现第三方auth登录 - 已完结
美化登录与注册表单 - 已完结

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

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

猜你喜欢