Django AllAuth 你如何自定义你自己的 HTML 或 CSS

Question

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

{% load url from future %}
{% load i18n %}

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

{% block content %}

</style>
<h1><b>Free Membership</b>Sign up Today</h1>
<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>

<h1><b>Free Membership</b>Sign up Today</h1>
{% endblock %}
{% block content2 %}
{% endblock %}

这是来自 Django All Auth 的原始代码。

我想做的是让它更加生动，比如添加一些更好的 HTML5 或 CSS，当我这样做时它不会改变？

Answer 1

这是我的 login.html 模板（我使用 Bootstrap、Jquery 和 Font-Awesome 作为图标）。

{% extends "account/base.html" %} {% load i18n custom_tags account %} {% block head_title %}{% trans "Sign In" %}{% endblock %} {% block common_scripts %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
  // Load jquery straight from the cdn for this page.
  $(function() {
    // We need some mappings for Providers names from AllAuth to the icon class names.
    $('.btn-google').addClass('btn-google-plus');
    $('.btn-linkedin_oauth2').addClass('btn-linkedin');
    $('.fa-linkedin_oauth2').addClass('fa-linkedin');
    $('#id_login').addClass('form-control').removeAttr('autofocus').blur();
    $('#id_password').addClass('form-control');
  });
</script>
{% endblock %} {% block content %}
<div class="container col-md-12">
  <div class="well login-well">
    <div class="socialaccount_ballot">
      <ul class="socialaccount_providers">
        {% load socialaccount %} {% for provider in socialaccount.providers %} {% if provider.id == "openid" %} {% for brand in provider.get_brands %}
        <li>
          <a title="{{ brand.name }}" class="btn btn-block btn-social btn-md btn-{{ provider.id }} socialaccount_provider {{ brand.id }}" href="{% provider_login_url provider.id openid=brand.openid_url process=" login " %}">
            <i class="fa fa-{{ provider.id }}"></i>Log in with {{ brand.name }}
          </a>
        </li>
        {% endfor %} {% endif %}
        <li>
          <a title="{{ provider.name }}" class="btn btn-block btn-social btn-md socialaccount_provider btn-{{ provider.id }}" href="{% provider_login_url provider.id process=" login " %}">
            <i class="fa fa-{{ provider.id }}"></i>Log in with {{ provider.name }}
          </a>
        </li>
        {% endfor %}
      </ul>
      <hr>

      <form class="django-login" method="POST" action="{% url 'login' %}">
        {% csrf_token %} {% if form.non_field_errors %}
        <div class="alert alert-warning">
          <ul class="alert-message">
            {% for error in form.non_field_errors %}
            <li>{{ error }}</li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        <div class="input-group {% if form.login.errors %}has-error{% endif %}">
          <span class="input-group-addon glyphicon glyphicon-envelope"></span>
          {{ form.login }}
        </div>

        <div class="input-group {% if form.password.errors %}has-error{% endif %}">
          <span class="input-group-addon glyphicon glyphicon-lock"></span>
          {{ form.password }}
        </div>

        <div class="fieldWrapper form-inline remember text-center">
          {{ form.remember }}
          <label for="id_remember" class="text-muted">Remember me</label>
        </div>

        {% if redirect_field_value %}
        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />{% endif %}
        <div class="btn-div pull-center">
          <button class="btn btn-primary btn-block" type="submit">{% trans "Sign In" %}</button>
        </div>
      </form>
    </div>
    <hr>
    <div>
      <small><a class="text-muted" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a></small>
      <br>
      <small><a class="text-muted" href="{% url 'signup' %}">Sign up</a></small>
    </div>
  </div>
</div>
{% endblock %}

以及它的外观：

Answer 2

您可以将 allauth 的自定义模板放在 template 目录下的 account 文件夹中。 Django allauth 会从中获取自定义模板并呈现它。

以下是我几天前创建的示例注册页面：

{% extends "base.html" %}
{% load staticfiles %}
{% load socialaccount %}

{% block extra_body %}account-bg{% endblock %}

{% block partial %}
    <div class="container">
        <div class="row">
          <div class="account-form-container">
            <div class="row">
              <div class="col-md-12">
                <h3>Create New Account</h3>
              </div>
            </div>
            <div class="row">
                    <form class="form-horizontal signup-form" id="userSignupForm" action="{% url "account_signup" %}" method="post" role="form">
                    {% csrf_token %}
                    {% if request.GET.next %}
                        <input type="hidden" name="next" value="{{request.GET.next}}">
                    {% endif %}

                    {% if form.non_field_errors %}
                    <div class="fieldWrapper alert alert-danger">
                        <ul>
                        {% for error in form.non_field_errors %}
                                <li>{{ error | lower}}</li>
                        {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                        <div class="col-lg-12">
                            <div class="form-group inner-addon left-addon {% if form.email.errors %}has-error{% endif %}">
                                <i class="icon-user"></i>
                                <input class="form-control login-field" type="text" id="id_email" name="email" placeholder="Email">
                                <span class="help-block">{{ form.email.errors }}</span>
                            </div>
                            <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
                                <i class="icon-lock"></i>
                                <input class="form-control login-field" type="password" id="id_password1" name="password1" placeholder="Password">
                                <span class="help-block">{{ form.password1.errors }}</span>
                            </div>

                            <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
                                <i class="icon-lock"></i>
                                <input class="form-control login-field" type="password" id="id_password2" name="password2" placeholder="Confirm Password">
                                <span class="help-block">{{ form.password1.errors }}</span>
                            </div>

                            <div class="form-group">
                              <div class="col-md-5">
                                <button type="submit" class="btn btn-complete btn-bold pull-right">Sign Up</button>
                              </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

希望对你有帮助。