ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 초간단 Django 게시판 14. base.html 수정
    Python/초간단 장고 Django 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>

     

     

    반응형
Designed by Tistory.