Python/초간단 장고 Django

초간단 Django 게시판 14. base.html 수정

컴닥 2021. 5. 30. 13:28
반응형

 

일단 위가 상당히 허전하다. 
nav 바를 만들고, 
그 아래 로그인 부분을 가져오자. 

navbar

부트스트랩의 네비게이션 바를 참고하자. 
https://getbootstrap.com/docs/5.0/components/navbar/

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container"> <!-- '-fluid'를 지워주자 -->
        <a class="navbar-brand" href="{% url 'index' %}">Simple Django BBS</a>
    </div>
</nav>

nav바의 컬러는 이런 식으로 조절한다. 
https://getbootstrap.com/docs/5.0/components/navbar/#color-schemes

 

log in

로그인 부분은 <div class="container"></div> 사이에 넣어두자. 

    <div style="margin: .9rem 0 0 0">
        <p style="text-align:right">
            {% if user.is_authenticated %}
            <span>Hi '{{ user.username }}'!
            <a href="{% url 'logout' %}">Log Out</a>
            / <a href="{% url 'password_change' %}">Password Change</a></span>
            {% else %}
            <span class="text-info">You are not logged in.
            <a href="{% url 'login' %}">Log In</a> or <a
                        href="{% url 'signup' %}">Sign Up</a></span>
            {% endif %}
        </p>
    </div>

 

전체 코드

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <!-- viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>{% block title %}{% endblock %} - Simple Django BBS</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="{% url 'index' %}">Simple Django BBS</a>
    </div>
</nav>
<div class="container">
    <div style="margin: .9rem 0 0 0">
        <p style="text-align:right">
            {% if user.is_authenticated %}
            <span>Hi '{{ user.username }}'!
            <a href="{% url 'logout' %}">Log Out</a>
            / <a href="{% url 'password_change' %}">Password Change</a></span>
            {% else %}
            <span class="text-info">You are not logged in.
            <a href="{% url 'login' %}">Log In</a> or <a
                        href="{% url 'signup' %}">Sign Up</a></span>
            {% endif %}
        </p>
    </div>
    {% block content %}
    {% endblock %}
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>
</body>
</html>

 

 

반응형