DjangoBlog/templates/account/forget_password.html

{# gq: #}
{# 1. 模板继承：继承基础账户页面模板，复用头部、底部、样式等公共组件 #}
{# base_account.html 通常包含账户相关页面（登录、注册、密码重置）的通用布局 #}
{% extends 'share_layout/base_account.html' %}

{# 2. 加载Django内置模板标签库 #}
{% load i18n %}  {# 加载国际化标签库，用于实现多语言文本（如英文/中文切换） #}
{% load static %}  {# 加载静态文件标签库，用于引用CSS、JS、图片等静态资源 #}

{# 3. 重写父模板的content块：定义当前页面的核心内容 #}
{# 父模板中会预留content块，子模板通过重写该块注入页面专属内容 #}
{% block content %}
    <div class="container">  {# 容器组件：使用Bootstrap等样式框架的容器类，实现内容居中、响应式布局 #}

        {# 页面标题：显示“忘记密码”（多语言支持，实际文本由i18n翻译决定） #}
        <h2 class="form-signin-heading text-center">{% trans 'forget the password' %}</h2>

        {# 卡片容器：包裹密码重置表单，通过卡片样式提升页面美观度和层次感 #}
        <div class="card card-signin">
            {# 头像图片：引用静态文件夹中的默认头像，增强页面视觉识别度 #}
            {# static标签会自动拼接静态文件根路径，避免硬编码URL #}
            <img class="img-circle profile-img" src="{% static 'blog/img/avatar.png' %}" alt="">

            {# 密码重置表单：提交到账户应用的forget_password视图函数 #}
            <form class="form-signin" action="{% url 'account:forget_password' %}" method="post">
                {# CSRF令牌：Django内置安全机制，防止跨站请求伪造（CSRF）攻击 #}
                {# 所有POST表单必须包含该标签，否则请求会被Django拦截 #}
                {% csrf_token %}

                {# 显示表单非字段级错误：如验证码错误、邮箱不存在等全局错误 #}
                {# form.non_field_errors 存储表单整体验证失败的错误信息 #}
                {{ form.non_field_errors }}

                {# 循环渲染表单字段：动态生成所有密码重置相关字段（如邮箱输入框、验证码输入框） #}
                {# form为视图传递的表单对象，field遍历表单中的每个字段（自动生成input标签） #}
                {% for field in form %}
                    {{ field }}  {# 渲染单个字段的输入框（如<input type="email" name="email">） #}
                    {{ field.errors }}  {# 显示当前字段的验证错误（如邮箱格式错误） #}
                {% endfor %}

                {# 验证码按钮：用于触发获取验证码的逻辑（需配合JS实现点击发送请求） #}
                <input type="button" class="button" id="btn" value="{% trans 'get verification code' %}">

                {# 提交按钮：点击后将表单数据POST到指定视图 #}
                {# 使用Bootstrap样式类（btn、btn-lg等）实现按钮美化和响应式 #}
                <button class="btn btn-lg btn-primary btn-block" type="submit">{% trans 'submit' %}</button>
            </form>
        </div>

        {# 辅助链接：提供首页和登录页的跳转入口，提升用户体验 #}
        <p class="text-center">  {# 文本居中显示 #}
            <a href="/">Home Page</a>  {# 跳转到网站首页（硬编码根路径，也可改用{% url 'home' %}） #}
            |  {# 分隔符，增强链接可读性 #}
            <a href="{% url "account:login" %}">login page</a>  {# 跳转到登录页（使用URL反向解析，避免硬编码） #}
        </p>

    </div> <!-- /container -->
{% endblock %}