지금까지는 로컬 주소로 접속을 시도하면 아무 화면도 뜨지않았다.
첫 페이지는 루트(/)인데 첫 페이지에 아무것도 입히지 않았기 때문이다.
지금부터 이 첫 페이지를 만드는 작업을 하겠다.
작업에 앞서 템플릿은 부트스트랩에서 가져와서 쓰겠다.
Bootstrap
세계에서 가장 인기있는 HTML, CSS, JS 라이브러리.
getbootstrap.kr
첫페이지를 설계할때 앱을 신규로 만드는 것이 아니므로 뼈대작업은 필요가 없다.
또한 테이블 생성은 없으므로 models.py또한 필요없다.
바로 URLconf를 정의 하는 urls.py를 수정하는 작업부터 진행하겠다.
urls.py 수정
애플리케이션의 URL이 아닌 프로젝트의 URL이므로 임포트 문장 및 루트 URL 두줄만 추가하면 된다.
from django.contrib import admin
from django.urls import path, include
from mysite.views import HomeView # 추가
urlpatterns = [
path('admin/', admin.site.urls),
path('', HomeView.as_view(), name='home'), # 추가
path('bookmark/', include('bookmark.urls')),
path('blog/', include('blog.urls')),
]
views.py 수정
앞서 URLconf ( urls.py)에서 지정한 HomeView를 코딩 할 차례이다.
HomeView는 특별한 처리 로직 없이 단 순히 템플릿만 보여주는 로직이다.
따라서 TemplateView 제네릭 뷰를 상속받아 코딩을 진행한다.
from django.views.generic import TemplateView
#--- TemplateView
class HomeView(TemplateView):
template_name = 'home.html'
Templates 수정하기
여기서 알아야할 부분은 상속의 개념이다.
base.html에 자주쓰는 코드나 공통인 메인 메뉴를 base.html에 코딩하고, 재활용 하기 위함이다.
코드에 { %block% } { %endblock%}가 많이 등장하는데 쉽게 이해할려면 다음 글을 참고하기 바란다.
https://tutorial.djangogirls.org/ko/template_extending/
템플릿 확장하기 · HonKit
장고의 또 다른 멋진 기능은 템플릿 확장(template extending) 입니다. 무슨 뜻일까요? 바로 여러분의 웹사이트 안의 서로 다른 페이지에서 HTML의 일부를 동일하게 재사용 할 수 있다는 뜻이에요. 이
tutorial.djangogirls.org
#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># 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 %}
'Django' 카테고리의 다른 글
| [Django] Blog 앱 확장 - Tag 달기 (0) | 2022.07.30 |
|---|---|
| [Django] Bookmark 앱, Blog 앱 개선하기 (0) | 2022.07.22 |
| [Django] Blog 앱 개발 (0) | 2022.07.22 |
| [Django] 가상환경 설정, Bookmark 앱 개발 (0) | 2022.07.20 |
| [Django] 장고 파헤쳐보기 (0) | 2022.07.20 |
