Back-end/Python

[Python]Django Static 파일.

cheersHena 2018. 3. 25. 19:36
반응형

Static 파일.

Web 에서는 일반적으로 java script, css, image..등의 파일들을 사용하는데 이러한 파일들을 Django에서는 Static파일이라 부름. 이러한 static파일들의 체계적 관리를 위해 장고 프로젝트 디렉토리 (settings.py의 BASE_DIR) 이하에 static서브폴더를 만들어 그곳에 static파일들(css, image...) 을 넣는다.


STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
] #생성해준 static폴더의 static 파일과 연결.


static 폴더에 파일을 넣고 사용하기위해서는 settings.py에 STATICFILES_DIRS 변수 추가.

경로가 여러개일수 있지만 여기서는 BASE_DIR/static 폴더를 지정하였다.


Django 의 static 폴더.

필요따라 각각의 장고앱마다 앱별 정적 파일을 담는 별도의 static폴더를 둘수도 있다.

이를 위해서는 settings.py파일안에 STATICFILES_FINDERS 설정하고 그 값으로 AppDirectoriesFinder추가해주어야 한다. 각 App의 static폴더는 폴더명을 static으로 지정해주어야하고 일반적으로 App명/static/App명 과같이 각 앱의 스테틱폴더안에 다시 앱명 서브폴더를 둘것을 권장한다. 동명 파일 충돌 방지 위함이다.


STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',

)


Static 파일 사용

static파일은 주로 Template에서 사용되는데, settings.py 셋팅이후, static파일 사용하기 위해서 템플릿 상단에 {% load static%} 태그를 명시해주어야 한다.

실제 static파일을 가리키기 위해서는  link태그에 "{% static 'resource명' %}" 와 같이

static 템플릿 태그 사용하여 해당 리소스를 지정한다.

리소스명에는 "static/"폴더명 다음의 경로만 지정, 'css/styles.css'


images/templates/base.html

{% load static %} <!--static파일사용위한 태그 -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>{% block title%}{% endblock%} | Helloworld!</title>

</head>
<body>
{% block content %}{% endblock%} <!--확장시 넣을내용. -->
</body>
</html>



Template extension.

Web개발 시 각 페이지마다 공통적으로 들어가는 html코드가 있다. (header, footer..)

각페이지마다 중복코드를 없애주기위해 장고에서는 공통코드를 기본 템플릿(base template)로 만들고, 각 페이지마다 변경이 필요한 부분만 코딩하게 하는 template extension(템플릿 확장 또는 상속)기능을 제공한다. 


여기서는 ./templates/base.html 이라는 Base template를 만들고 이 파일안에 각 웹페이지에서 변경 혹은 삽입할 영역을 {% block 블럭명 %} 으로 지정. (여기서는 title) *닫아주는 태그 {%endblock%} 주의.

 

 Base템플릿을 확장하는 각 장고앱의 텝플릿들은 각 앱 폴더의 templates폴더에 저장한다.

예를들어 ./images/templates/login.html에서 base.html을 확장해서 사용해보자.


base template를 확장하는 템플릿은 

1) 확장태그 {% extends %} : 어떤 base템플릿을 사용하는지 지정.

2) 블럭태그 {% block 삽입내용 %} :블럭에 삽입하고자 하는 웹페이지(<main>) 내용 작성. {%endblock%}


images/templates/login.html

{% extends "base.html" %} <!--base template 확장.-->

{% block title%} Log in {% endblock %} <!--원하는 타이틀 입력-->

{% block content %} <!--원하는 내용(contents) 입력-->
<!--main.login-->
<main class="login">
...
</main>

{% endblock %}




 

반응형