CH4
오늘 예제에서는 이전 예제인 Blog와 bookmark를 하나로 합쳐 보여줄 홈페이지를 만들것이다.
대표 홈페이지를 디자인하기위해 부트스트랩을 이용할것이다.
우선 부트스트랩을 이용하는데엔
1.직접 템플릿 파일을 다운받기
2. CDN방식(부트스트랩 홈페이지에서 링크를 복사해 내 작업환경에서 그대로 사용)
이번 예제에선 2번 방식을 이용하려한다.
우선 head부분에 css코드를 사용하기위해 복붙하고
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">body부분에 js코드를 복붙한다
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>그리고 메뉴 바를 꾸미기 위해 해당코드를 사용하였다.
base.html을 기본 화면으로, 각 메뉴별 화면을 home.html을 통해 꾸미려한다. 이 과정에서 {%blcok%}을 이용해 상속을 할 것이다.
**base.html**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Django Web Programming{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% block extra-style %}{% endblock %}
</head>
<body style="padding-top:90px;">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<span class="navbar-brand mx-5 mb-0 font-weight-bold font-italic">Django - Python Web Programming</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item mx-1 btn btn-primary">
<a class="nav-link text-white" href="{% url 'home' %}">Home</a></li>
<li class="nav-item mx-1 btn btn-primary">
<a class="nav-link text-white" href="{% url 'bookmark:index' %}">Bookmark</a></li>
<li class="nav-item mx-1 btn btn-primary">
<a class="nav-link text-white" href="{% url 'blog:index' %}">Blog</a></li>
<li class="nav-item mx-1 btn btn-primary">
<a class="nav-link text-white" href="">Photo</a></li>
<li class="nav-item dropdown mx-1 btn btn-primary">
<a class="nav-link dropdown-toggle text-white" href="#" data-toggle="dropdown">Util</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{% url 'admin:index' %}">Admin</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'blog:post_archive' %}">Archive</a>
<a class="dropdown-item" href="">Search</a>
</div>
</li>
</ul>
<form class="form-inline my-2" action="" method="post"> {% csrf_token %}
<input class="form-control mr-sm-2" type="search" placeholder="global search" name="search_word">
</form>
</div>
</nav>
<div class="container">
{% block content %}{% endblock %}
</div>
{% block footer %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/c998a172fe.js"></script>
{% block extra-script %}{% endblock %}
</body>
</html>
nav 네비게이션 바 템플릿을 이용해 작성하였다. 총 4개의 block을 통해 상속처리할것이다. nav 클래스에서 각 메뉴별 링크도 달고, 폼 메뉴를 작성해서 post 처리를 통해 서버로 보낼수있도록 method를 작성했다.
**home.html**
{% extends 'base.html' %}
{% load static %}
{% block title %}home.html{% endblock %}
{% block extra-style %}
<style type ="text/css">
.home-image {
background-image: url("{% static 'img/lion.jpg' %}");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 500px;
border-top: 10px solid #ccc;
border-bottom: 10px solid #ccc;
padding: 20px 0 0 20px;
}
.title {
color: #c80;
font-weight: bold;
}
.powered {
position: relative;
top: 77%;
color: #cc0;
font-style: italic;
}
</style>
{% endblock %}
{% block content %}
<div class="home-image">
<h2 class="title">Django - Python Web Programming</h2>
<h4 class="powered"><i class="fas fa-arrow-circle-right"></i> powered by django and bootstrap.</h4>
</div>
<hr style="margin: 10px 0;">
<div class="row text-center">
<div class="col-sm-6">
<h3>Bookmark App</h3>
<p>Bookmark is a Uniform Resource Identifier (URI)
that is stored for later retrieval in any of various storage formats.
You can store your own bookmarks by Bookmark application.
It's also possible to update or delete your bookmarks.</p>
</div>
<div class="col-sm-6">
<h3>Blog App</h3>
<p>This application makes it possible to log daily events or write your own interests
such as hobbies, techniques, etc.
A typical blog combines text, digital images, and links to other blogs, web pages,
and other media related to its topic.</p>
</div>
</div>
{% endblock content %}
{% block footer %}
<footer class="fixed-bottom bg-info">
<div class="text-white font-italic text-right mr-5">Copyright © 2019 DjangoBook by shkim</div>
</footer>
{% endblock %}
lion.jpg를 이용하기위해서는 {%static(정적이미지)%} 태그를 이용해야한다.
이를 위해 {% load static %} 또한 로딩해야한다.
{% block extra-style %}상속을 통해 <style.>을 정의한다.
{% block content%}를 상속받아 기능을 확장시킨다. 사자이미지가 표시될부분과, 어플리케이션 설명 두부분으로 구성되어 있다.
{% footer %}부분은 오버라이딩한다.
이렇게 상속을 통해 간단히 기능을 확장시킬수있다.
CH5
{% extends "base.html" %}
base.hmtl (첫화면에서) bookmark와, blog로 각각 갈수 있게 상속받는다.
{% block title %} *.html**
각 템플릿은 block title을 통해 상속처리해서 메뉴에 잘 나타나도록 한다.
{% block content %} 을 통해 기존 템플릿 파일을 실행시킨다.
상속처리를 통해 base.html에서 각 메뉴가 상단 바에 나타나도록 뿐만아니라 진입해서 실행될수 있도록 한다.
어서오세요