django bootstrap 테마 적용

bootstrap 테마 적용

저게 예제로 사용할 탬플릿은 

https://startbootstrap.com/template-overviews/shop-homepage/

에 있는 테마 입니다. 

다운로드 받으면 

위와 같은 내용 들이 있습니다. 

이를 Django에 적용 하려고 합니다.

먼저 저의 Django 환경은 project 이름은 Vcsite  app이름은 mainapp 으로 만들었습니다. 

먼저 Vcsite/mainapp/ 에 static 폴더를 만들고 

Vcsite/mainapp/static 에 mainapp 이라고 폴더를 만들어 줍니다. 

Vcsite/mainapp/static/mainapp 에 자신이 받은 bootstrap 파일중 index.html을 제외하고 모두  복사 붙혀 넣기 합니다.

저의 경우에 app 이름은 mainapp 으로 사용하였습니다. 

그리고 Vcsite/mainapp/ 폴더에서 templates 폴더를 생성해줍니다. 

Vcsite/mainapp/templates/ 에서 mainapp 폴더를 만들어 줍니다. 

그리고 bootstrap 의 index.html 을 붙혀 넣습니다. 

그리고 html의 파일에서 css javascript의 경로를 바꿔야 합니다. 

index.html의 파일안에 보면 

    <!-- Bootstrap core CSS -->

    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="css/shop-homepage.css" rel="stylesheet">

    <!-- Bootstrap core JavaScript -->

    <script src="vendor/jquery/jquery.min.js"></script>

    <script src="vendor/popper/popper.min.js"></script>

    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

이렇게 된부분이 있습니다. 

index.html 수정을 해줍니다. 

    <!-- Bootstrap core CSS -->

    <link href='{% static "mainapp/vendor/bootstrap/css/bootstrap.min.css" %}' rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href='{% static "mainapp/css/shop-homepage.css" %}' rel="stylesheet">

    <!-- Bootstrap core JavaScript -->

    <script src='{% static "mainapp/vendor/jquery/jquery.min.js" %}'></script>

    <script src='{% static "mainapp/vendor/popper/popper.min.js" %}'></script>

    <script src='{% static "mainapp/vendor/bootstrap/js/bootstrap.min.js" %}'></script>

그리고 index.html 최상위에 

{% load staticfiles %}

을 추가 해줍니다.

그리고 mainapp/views.py 를 수정해 view에 templates 을 연결해 줍니다. 

mainapp/views.py

from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse
from django.template import loader
 
def index(request):
    template = loader.get_template('mainapp/index.html')
    context = {
        'latest_question_list': "test",
    }
    return HttpResponse(template.render(context, request))

mainapp/urls.py

from django.conf.urls import url 
from . import views
 
urlpatterns = [
    url(r'^$',views.index,name = 'index'),
]

Vcsite/Vcsite/urls.py(프로젝트의 urls.py)

from django.conf.urls import include,url
from django.contrib import admin
urlpatterns = [
	url(r'^mainapp/',include('mainapp.urls')),
    url(r'^admin/', admin.site.urls),
]

Vcsite/Vcsite/settings.py(프로젝트의 settings.py)

#mainapp.apps.MainappConfig 추가 
INSTALLED_APPS = [
    'mainapp.apps.MainappConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

#제일 끝에 소스 추가
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

명령어 실행

./manage.py collectstatic

명령어 실행을 하면 

프로젝트 static 에 mainapp 폴더가 생성 되고

위와 같이 파일이 복사 붙혀 넣기 됩니다.