|
|
|
|
@ -1,32 +1,43 @@
|
|
|
|
|
{# 继承项目中通用的账户页面布局模板，确保页面风格、公共组件（如导航、页脚）的一致性 #}
|
|
|
|
|
{% extends 'share_layout/base_account.html' %}
|
|
|
|
|
|
|
|
|
|
{# 加载Django静态文件标签库，用于引入CSS、JavaScript、图片等静态资源 #}
|
|
|
|
|
{% load static %}
|
|
|
|
|
{% block content %}
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
|
|
{# 定义当前模板的“内容区块”，填充到基础模板中对应的{% block content %}占位区域 #}
|
|
|
|
|
{% block content %}
|
|
|
|
|
<div class="container"> {# 页面布局容器，用于排版和响应式设计（通常配合Bootstrap等前端框架） #}
|
|
|
|
|
{# 页面主标题，样式使其居中并应用表单登录相关样式 #}
|
|
|
|
|
<h2 class="form-signin-heading text-center">绑定您的邮箱账号</h2>
|
|
|
|
|
|
|
|
|
|
<div class="card card-signin">
|
|
|
|
|
{% if picture %}
|
|
|
|
|
<div class="card card-signin"> {# 卡片式容器，包裹头像与表单，提升视觉层次感 #}
|
|
|
|
|
{% if picture %} {# 条件判断：若存在用户自定义头像（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 %}
|
|
|
|
|
{# 表单区域：通过POST方法提交数据，action为空表示提交到当前页面URL #}
|
|
|
|
|
<form class="form-signin" action="" method="post">
|
|
|
|
|
{# CSRF令牌：防止跨站请求伪造攻击，POST表单必须包含 #}
|
|
|
|
|
{% csrf_token %}
|
|
|
|
|
{% comment %}<label for="inputEmail" class="sr-only">Email address</label>
|
|
|
|
|
{# 邮箱输入框：type="email"做基础格式校验，required为必填，autofocus页面加载后自动聚焦 #}
|
|
|
|
|
<input type="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus>
|
|
|
|
|
<label for="inputPassword" class="sr-only">Password</label>
|
|
|
|
|
{# 密码输入框：type="password"隐藏输入内容，required为必填 #}
|
|
|
|
|
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>{% endcomment %}
|
|
|
|
|
{# 显示表单非字段级别的错误信息（如表单整体的验证错误） #}
|
|
|
|
|
{{ form.non_field_errors }}
|
|
|
|
|
{# 循环渲染表单的每个字段及其错误信息 #}
|
|
|
|
|
{% for field in form %}
|
|
|
|
|
{{ field }}
|
|
|
|
|
{{ field.errors }}
|
|
|
|
|
{{ field }} {# 渲染字段的HTML输入元素 #}
|
|
|
|
|
{{ field.errors }} {# 渲染该字段的错误信息 #}
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{# 提交按钮：应用Bootstrap样式，点击后提交表单 #}
|
|
|
|
|
<button class="btn btn-lg btn-primary btn-block" type="submit">提交</button>
|
|
|
|
|
|
|
|
|
|
{# 注释块：暂不启用的“帮助链接”和“记住登录状态”复选框区域 #}
|
|
|
|
|
{% comment %}
|
|
|
|
|
<div class="checkbox">
|
|
|
|
|
<a class="pull-right">Need help?</a>
|
|
|
|
|
@ -37,7 +48,7 @@
|
|
|
|
|
{% endcomment %}
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 跳转到登录页面的链接：通过Django URL反向解析生成登录页地址 #}
|
|
|
|
|
<p class="text-center">
|
|
|
|
|
<a href="{% url "account:login" %}">登录</a>
|
|
|
|
|
</p>
|
|
|
|
|
|
