[Django Recipe] 디자인 부담을 덜어주는 django-adminlte3 part-2

웹 디자인 부담을 덜어주는 django-adminlte3 part-2

base.html 살펴보기.

base.html 아래 링크를 참고하여 템플릿에서 사용할 수 있는 블럭의 이름을 알 수 있다.
https://github.com/d-demirci/django-adminlte3/blob/master/adminlte3/templates/adminlte/base.html

먼저, 간단히 사이트 이름과 페이지 제목을 변경하고 싶다면, block title_outer를 설정한다.

project/templates/index.html 에 title을 설정하면 index.html을 상속받는 모든 페이지에 적용되며, test.html에 설정하면 test.html을 사용하는 페이지에만 적용된다.

index.html에 적용하는 경우

test.html에도 적용된다.

이제 http://localhost:8000/test 에 접속하면 페이지 제목이 보인다.

만약 test.html의 제목만 바꾸고 싶다면, 아래와 같이 작성하면 적용된다. 즉, 기존의 title 블럭의 내용이 새로운 title 블록으로 대치된다.

base.html을 살펴 보면, _styles.html, _main_header.html, _main_sidebar.html, _messages.html, _main_footer.html, _scripts.html 로 구성되는 것을 볼 수 있다.

사용자 css나 javascript가 있다면, project/templates/adminlte/lib/ 디렉토리 아래에, _styles.html, _scripts.html 파일을 만들고 해당 css나 javascript를 넣어주면 된다.
adminlte3 는 기본적으로 bootstrap을 사용한다. 사용자가 작성한 css나 스크립트를 사용하려면
먼저, project/templates/index.html 에 아래 내용을 추가한다.

이제, project/templates/adminlte/lib/ 에 _styles.html을 만들고, 아무 내용없이 그냥 놓아둔다. 그러면, css 스타일이 없으므로 페이지는 아래처럼 보이게 된다.

이제, _style.html에 아래 내용을 추가해주면 원래 스타일이 적용되며, 만약, 직접 작성한 css 파일이 있다면 이 파일에 해당 내용을 추가해 주면 적용된다.
아래에서 {{block.super}}는 기존 내용을 상속받은 상태에서 추가적으로 css를 적용하는 경우이며, 이것이 없다면 기존 css대신 추가한 css가 적용된다.

즉, adminlte3의 css만 사용하려면, extends 하여 사용하고, 새로운 스타일을 사용하려면, block styles에 새로 작성한 내용을 사용, adminlte3의 css와 새로운 css를 동시에 사용하려면 block.super를 사용하면 된다.

위 링크의 base.html을 보면, 6개의 html 파일이 include된 것을 볼수 있다. 따라서, 프로젝트에서 사용할 index.html 은 아래와 같이 작성할 수 있다.

다른것은 복잡하니, 일단 footer의 내용중 버전을 바꿔보며 part-2를 마무리하겠다. 수정전의 version은 아래 그림처럼 0.1이다.

project/templates/adminlte/lib 디렉토리에 해당 파일이 없으면 base.html의 내용이 상속된다.

project/templates/adminlte/lib/_main_footer.html 파일을 만들고 아래 내용을 작성한다.

copyright를 변경하려면, block footer_left 의 내용을 변경해야한다. (이것은 django-adminlte2 문서를 참조하거나 소스파일 https://github.com/d-demirci/django-adminlte3/blob/master/adminlte3/templates/adminlte/lib/_main_footer.html 을 참고한다.

이제 확인해보면 버전만 0.02로 바뀐 것을 볼 수 있다.

part-3 에서는 django-mptt 와 django-adminlte3 을 이용하여 sidebar tree 메뉴를 만들어 보도록 한다.

댓글 남기기

Your email address will not be published.

%d 블로거가 이것을 좋아합니다: