0. bootstrap 페이지 가져와 적용 하기 위한 배경설명
1. setting.py 파일의 구성
2. 경로 구성 및 bootstrap의 파일 복사
3. html이 잘보이는지 확인. 이를 위해 urls.py 구성. (1차확인)
4. static 파일들(css,vender)들을 static 경로 밑에 복사
(django framework에 의해 static 파일이 알맞은 경로로 자동 변경 된다) (2차확인)
5. 실제 template 파일의 static 파일 경로들을 django 프레임웍에 맞게 바꾼다. (3차확인)
관련 페이지
- https://stackoverflow.com/questions/21020472/order-of-finding-static-files-and-templates-in-django-apps
- http://blog.hannal.com/2015/04/start_with_django_webframework_06/ (pystagram)
- http://bcho.tistory.com/821
- http://blog.daum.net/elther2/134
- https://docs.djangoproject.com/en/1.10/howto/static-files/
- https://nachwon.github.io/django-deploy-4-static/
0. bootstrap 페이지 가져와 적용 하기 위한 배경설명
부트스트랩에서 페이지를 가져와서 적용을 하고 싶을때가 있는데, 생각 보다 잘 되지 않는다. static 파일과 template파일을 적절히 구성해야 제대로 된 페이지를 장고 프레임 웍에서 볼수 있다.
구성의 최종 형태는, 아래와 같다.
static경로와 templates 의 경로에 s를 붙여 준것을 주의 하고, bbs 라는 앱에서 static 폴더를 만들고 그안에 다시 bbs를 만들어 static 파일을 위치 시켜준것을 유의 해야 한다.
이렇게 하는 이유는 나중에 서버에 release 할때는 bbs 앱뿐만 아니라 다른 A, B 앱등이 한꺼번에 올라 갈텐데 그때 다 따로 static 파일을 찾을수 없어 그걸 django에서는 한경로에 다 모아서 올리게 되단. 이때 사용 하는 명령어는
collectstatic , 이 명령어를 통해 모든 관리되고 있는 static 파일들을 한 경로에 복사 되게 된다.
그때 static파일을 사용한 html에서 경로의 코드 변경없이 사용 하기 위해 static 파일의 위치의 독립성을 유지 하기 위해 다음과 같은 형태로 구성하는것이 가이드 이다. 안하면 나중에 static 파일을 모으는 과정에서 중복된 이름이 있을경우 overwrite 되어 원하는 css 파일들을 이용 못하는 경우가 생길수 있다.
그러므로, 한곳으로 모을것을 가정하고 경로의 형태는 static / template 모두 위와 같은 형태로 구성하고 static 파일의 링크들을 장고 프레임웍에 맞는 형태로 바꾸는 작업을 하면 bootstrap에 있던 화면을 바로 django로 확인 할수 있다.
1. setting.py 파일의 구성
setting.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder', # 앱에 있는 static을 다 뒤져준다.
)
STATIC_ROOT = os.path.join(BASE_DIR, "static_root")
| cs |
4가지 설정이 반드시 필요.
STATICFILES_DIRS 은 workspace에서 (앱 아닌) static 파일의 경로를 지정하는것 --> 여기에 static 파일이 존재 할수 있다는것
STATICFILES_FINDERS 에 위와 같이 설정 하면 , 각각의 앱에 static 파일들을 뒤진다는 의미 (위처럼 경로를 구성해야 한다)
STATIC_URL 은 나중에 웹상에 접근 할때, STATIC_URL 의 url로 접근 가능 하다는 의미 e.g., localhost:8000/static/a.jpg
STATIC_ROOT 모든 static 파일이 모일 장소
2. 경로 구성 및 bootstrap의 파일 복사
BASE_DIR/bbs/templates/bbs에 bootstrap의 파일들을 그대로 복사한다.
3. html이 잘보이는지 확인. 이를 위해 urls.py 구성. (1차확인)
URL의 구성은 아래와 같이 한다. (실제 경로는 BASE_DIR/bbs/templates/bbs 지만, 아래와 같이 bbs/templates 밑 부터 경로를 적어 준다)
url(r'^test$', TemplateView.as_view(template_name='bbs/post_index.html'), name='test'),
| cs |
4. static 파일들(css,vender)들을 static 경로 밑에 복사
bootstrap에 의 파일들 copy했을때 있었던 static 관련 파일 경로들을 BASE_DIS/bbs/static/bbs 밑으로 복사 한다. (pycharm의 경우 자동으로 경로가 상대경오로 바뀌어서 (refactory기능) 들어가게 된다. 화면이 깨지지 않고 잘 구성 되는지 확인 (2차확인)
5. 실제 template 파일의 static 파일 경로들을 django 프레임웍에 맞게 바꾼다. (3차확인)
{% load static %}
<link href="{% static 'bbs/css/blog-post.css'%}" rel="stylesheet">
| cs |
template 파일(html)등을 위와 같이 변경 한다. static 파일의 실제 위치는 BASE_DIR/bbs/static/bbs 가 될것 이고 href 에 저는 내용은 BASE_DIR/bbs/static 이후의 경로를 적어 준다.
댓글 없음:
댓글 쓰기