DjangoBlog/templates/account/registration_form.html

{# gq: #}
{# 1. 模板继承：复用账户相关页面的公共布局 #}
{# base_account.html 通常包含登录、注册、密码重置等页面的通用组件（如头部样式、底部信息）#}
{# 继承后只需专注于当前注册页的专属内容，减少重复代码并保证风格统一 #}
{% extends 'share_layout/base_account.html' %}

{# 2. 加载模板标签库：引入静态资源处理功能 #}
{% load static %}  {# 用于引用图片、CSS、JS等静态文件，避免硬编码路径导致的问题 #}

{# 3. 重写父模板的content块：定义注册页的核心内容 #}
{# 父模板会预留content块，子模板通过重写该块注入当前页面的具体内容 #}
{% block content %}
    <div class="container">  {# 容器组件：基于Bootstrap等样式框架，实现内容居中、响应式适配（适配手机/电脑屏幕） #}

        {# 页面标题：明确当前页面为“创建账户”，居中显示以增强视觉引导 #}
        <h2 class="form-signin-heading text-center">Create Your Account</h2>

        {# 卡片容器：包裹注册表单，通过卡片样式（阴影、圆角）提升页面层次感和美观度 #}
        <div class="card card-signin">
            {# 注册页默认头像：引用静态文件夹中的头像图片 #}
            {# static标签会自动拼接Django配置的静态文件根路径，确保图片能正确加载 #}
            {# img-circle类使图片显示为圆形，符合用户头像的常见设计 #}
            <img class="img-circle profile-img" src="{% static 'blog/img/avatar.png' %}" alt="默认用户头像">

            {# 注册表单：核心交互区域，数据提交到account应用的register视图函数 #}
            <form class="form-signin" action="{% url 'account:register' %}" method="post">
                {# CSRF令牌：Django内置的安全机制，防止跨站请求伪造（CSRF）攻击 #}
                {# 所有使用POST方法的表单必须包含该标签，否则请求会被Django拦截拒绝 #}
                {% csrf_token %}

                {# 显示表单全局错误：非单个字段的错误（如“用户名已存在”“两次密码不一致”等） #}
                {# form.non_field_errors 存储表单整体验证失败的错误信息，直接渲染即可显示 #}
                {{ form.non_field_errors }}

                {# 循环渲染表单字段：动态生成所有注册所需的输入框（如用户名、密码、邮箱等） #}
                {# form为视图函数传递的表单对象（如RegisterForm），field会自动匹配字段类型（text/password/email） #}
                {% for field in form %}
                    {{ field }}          {# 渲染单个字段的输入框（如<input type="text" name="username">） #}
                    {{ field.errors }}   {# 显示当前字段的验证错误（如“用户名不能为空”“密码长度不足”） #}
                {% endfor %}

                {# 注册提交按钮：使用Bootstrap样式类（btn-lg/btn-primary/btn-block）实现“大尺寸、蓝色、全屏宽度”的按钮 #}
                {# 点击后将表单数据以POST方式提交到register视图，完成用户注册逻辑 #}
                <button class="btn btn-lg btn-primary btn-block" type="submit">Create Your Account</button>

            </form>
        </div>

        {# 辅助链接：提供登录页跳转入口，方便已有账号的用户切换到登录流程 #}
        <p class="text-center">  {# 文本居中显示，提升页面整洁度 #}
            <a href="{% url "account:login" %}">Sign In</a>  {# 通过URL反向解析跳转到登录页，避免硬编码URL #}
        </p>

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