[Django Homepage] Project Setup
[App 구조]
project
homepage # APP
[Homepage관련 Django APP 설치]
django-filer
django-ckeditor
django-sass-processor
django-user-agents
django-crum
django-next-prev
django-bootstrap-modal-forms
django-widget-tweaks
geoip2
celery
[Homepage App 생성]
project
homepage # APP
[Homepage관련 Django APP 설치]
django-filer
django-ckeditor
django-sass-processor
django-user-agents
django-crum
django-next-prev
django-bootstrap-modal-forms
django-widget-tweaks
geoip2
celery
cd
cd [project]
python manage.py startapp homepage
[Homepage App 설정]
project/project/settings.py에 아래 내용 추가
--- 시작 ---
INSTALLED_APPS = [
'homepage.apps.HomepageConfig',
]
--- 끝 ---
--- 끝 ---
[App Directory 구조]
homepage
__init__.py
migrations
templates (신규생성 필요)
homepage (신규생성 필요)
static (신규생성 필요)
homepage (신규생성 필요)
admin.py
apps.py
models.py
tests.py
views.py
urls.py (신규생성 필요 - 추후)
[models.py 생성]
project/homepage/models.py 에 아래 링크의 내용을 복사하여 저장
Homepage models.py
python manage.py makemigrations homepage
python manage.py migrate homepage
models.py 수정 시 마다 makemigrations, migrate 수행 필요
[admins.py 생성]
Homepage models.py
python manage.py makemigrations homepage
python manage.py migrate homepage
models.py 수정 시 마다 makemigrations, migrate 수행 필요
[admins.py 생성]
[admin에서 기초 코드 데이터 생성]
admin으로 로그인하여 code에 아래 코드 데이터를 등록한다.
--- 아래 시작 ---
content_type
- site content
- main_banner : 메인배너
- menu_main : 메인메뉴
- menu_top_left : 상단왼쪽메뉴
- menu_top_right : 상단오른쪽메뉴
- menu_bottom : 하단메뉴
- footer_menu : 꼬리말메뉴
- footer_address : 꼬리말주소
- related_site : 관련사이트
- sns : 소셜네트워크
- main_popup : 메인팝업
- service content
- board : 공지사항
-
content_style
- title_home : 홈표시 제목
- title_list : 목록표시 제목
- message : 컨텐츠
content_category : 내용에 따라 상이함
url_type
- internal : 내부 url
- external : 외부 url
- section : 특정페이지의 섹션
- class : 특정클래스
- modal : 모달팝업
- page : 특정페이지 (url : url, url_parameter : 컨텐츠 id)
--- 아래 끝 ---
--- 아래 시작 ---
content_type
- site content
- main_banner : 메인배너
- menu_main : 메인메뉴
- menu_top_left : 상단왼쪽메뉴
- menu_top_right : 상단오른쪽메뉴
- menu_bottom : 하단메뉴
- footer_menu : 꼬리말메뉴
- footer_address : 꼬리말주소
- related_site : 관련사이트
- sns : 소셜네트워크
- main_popup : 메인팝업
- service content
- board : 공지사항
-
content_style
- title_home : 홈표시 제목
- title_list : 목록표시 제목
- message : 컨텐츠
content_category : 내용에 따라 상이함
url_type
- internal : 내부 url
- external : 외부 url
- section : 특정페이지의 섹션
- class : 특정클래스
- modal : 모달팝업
- page : 특정페이지 (url : url, url_parameter : 컨텐츠 id)
--- 아래 끝 ---
1. bootstrap4 template의 파일들을 아래의 디렉토리에 복사한다.
project/app/static/app/
css
scss
images
js
font
project/app/tempates/app/template/
*.html
2. site.scss 파일을 아래의 디렉토리에 생성한다.
project/app/static/app/scss/theme/
site.scss
3. project/app/static/app/scss/main.scss 에 아래의 내용을 추가한다.
// Site Scss
@import "theme/site";
4. site.js 파일을 아래의 디렉토리에 생성한다.
project/app/static/app/js/
site.js
5. project/app/static/app/templates/app/base.html 에 아래의 내용을 추가한다.
project/app/static/app/js/
site.js
5. project/app/static/app/templates/app/base.html 에 아래의 내용을 추가한다.
<!-- Start Site js -->
<script src="{% static 'app/js/site.js' %}"></script>
<!-- End Site js -->
[Template 구조 만들기]
Template은 공통 내용을 포함하는 base.html과 이를 include하여 화면을 구현하는 *.html로 나누어진다.
base.html파일을 아래의 디렉토리에 생성한다.
-- bsae.html 구조 시작 ---
{% load static %}
{% load sass_tags %}
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
meta tags
include css
</head>
<body>
{% block content %}
다른 template 구현
{% endblock %}
include javascript library
</body>
</html>
-- bsae.html 구조 끝 ---
*.html파일을 아래의 디렉토리에 생성한다.
project/app/templates/app/
-- *.html 구조 시작 ---
{% extends 'homepage/base.html' %}
{% block content %}
필요한 tag 로딩
화면 구현 로직 추가
{% endblock %}
-- *.html 구조 끝 ---
댓글
댓글 쓰기