|
|
|
|
@ -1,45 +1,59 @@
|
|
|
|
|
{% extends 'share_layout/base_account.html' %}
|
|
|
|
|
{% extends 'share_layout/base_account.html' %} {# 继承账户相关的基础模板 #}
|
|
|
|
|
|
|
|
|
|
{% load static %} {# 加载静态文件标签 #}
|
|
|
|
|
|
|
|
|
|
{% load static %}
|
|
|
|
|
{% block content %}
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="container"> {# Bootstrap容器 #}
|
|
|
|
|
|
|
|
|
|
<h2 class="form-signin-heading text-center">绑定您的邮箱账号</h2>
|
|
|
|
|
<h2 class="form-signin-heading text-center">绑定您的邮箱账号</h2> {# 页面标题 #}
|
|
|
|
|
|
|
|
|
|
<div class="card card-signin">
|
|
|
|
|
{% if picture %}
|
|
|
|
|
<img class="img-circle profile-img" src="{{ picture }}" alt="">
|
|
|
|
|
{% else %}
|
|
|
|
|
<img class="img-circle profile-img" src="{% static 'blog/img/avatar.png' %}" alt="">
|
|
|
|
|
<div class="card card-signin"> {# 卡片式表单容器 #}
|
|
|
|
|
{# 用户头像显示 #}
|
|
|
|
|
{% if picture %} {# 如果提供了第三方账号头像 #}
|
|
|
|
|
<img class="img-circle profile-img" src="{{ picture }}" alt=""> {# 显示第三方头像 #}
|
|
|
|
|
{% else %} {# 如果没有提供头像 #}
|
|
|
|
|
<img class="img-circle profile-img" src="{% static 'blog/img/avatar.png' %}" alt=""> {# 显示默认头像 #}
|
|
|
|
|
{% endif %}
|
|
|
|
|
<form class="form-signin" action="" method="post">
|
|
|
|
|
{% csrf_token %}
|
|
|
|
|
{% comment %}<label for="inputEmail" class="sr-only">Email address</label>
|
|
|
|
|
|
|
|
|
|
{# 绑定邮箱表单 #}
|
|
|
|
|
<form class="form-signin" action="" method="post"> {# 空action表示提交到当前URL #}
|
|
|
|
|
{% csrf_token %} {# CSRF保护令牌 #}
|
|
|
|
|
|
|
|
|
|
{# 注释掉的原始表单代码，使用Django表单代替 #}
|
|
|
|
|
{% comment %}
|
|
|
|
|
<label for="inputEmail" class="sr-only">Email address</label>
|
|
|
|
|
<input type="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus>
|
|
|
|
|
<label for="inputPassword" class="sr-only">Password</label>
|
|
|
|
|
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>{% endcomment %}
|
|
|
|
|
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
|
|
|
|
{% endcomment %}
|
|
|
|
|
|
|
|
|
|
{# 显示非字段错误（如表单级别的验证错误） #}
|
|
|
|
|
{{ form.non_field_errors }}
|
|
|
|
|
|
|
|
|
|
{# 循环渲染表单的所有字段 #}
|
|
|
|
|
{% for field in form %}
|
|
|
|
|
{{ field }}
|
|
|
|
|
{{ field.errors }}
|
|
|
|
|
{{ field }} {# 渲染字段输入框 #}
|
|
|
|
|
{{ field.errors }} {# 显示该字段的错误信息 #}
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{# 提交按钮 #}
|
|
|
|
|
<button class="btn btn-lg btn-primary btn-block" type="submit">提交</button>
|
|
|
|
|
|
|
|
|
|
{# 注释掉的"记住我"和帮助链接 #}
|
|
|
|
|
{% comment %}
|
|
|
|
|
<div class="checkbox">
|
|
|
|
|
<div class="checkbox">
|
|
|
|
|
<a class="pull-right">Need help?</a>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" value="remember-me"> Stay signed in
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
{% endcomment %}
|
|
|
|
|
{% endcomment %}
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 底部导航链接 #}
|
|
|
|
|
<p class="text-center">
|
|
|
|
|
<a href="{% url "account:login" %}">登录</a>
|
|
|
|
|
<a href="{% url "account:login" %}">登录</a> {# 跳转到登录页面 #}
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
</div> <!-- /container -->
|
|
|
|
|
|
