1. 사용하는 툴에 맞는 템플릿 구글링
본인은 vscode, django, html 키워드 활용
https://www.mooz.reviews/renda-clean-blog-bootstrap-theme/
Renda - Clean Blog Bootstrap Template by MOOZ Reviews
With the minimalistic, elegant and stunning design bootstrap blog template Renda gives you a gorgeous base to present your favourite articles and images. Beautiful social sharing buttons, elegant slider, carefully crafted elements create a perfect and harm
www.mooz.reviews
2. 템플릿의 소스를 가져온다.
project 아래에 templates 폴더를 생성하고 템플릿의 html 파일을 가져온다.
project 아래의 app 폴더에 static 파일을 생성하고 템플릿의 css, fonts, images, js 파일을 가져온다.
3. settings.py 수정
static 파일 생성 후 static 사용 코드를 작성해야 한다.
import os #os를 import해오는 코드를 상단에 추가한다.
STATIC_URL = '/static/' #기존에 있던 코드이며 이 아래에 밑의 코드를 추가한다.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]import os 코드가 빠질 경우 "NameError: name 'os' is not defined" - os가 정의되지 않는 오류가 발생한다.
4. runserver 에서 보기 위해 views.py 함수 & urls.py 경로 등록
views.py
def index(request):
return render(request, "index.html")
def about(request):
return render(request, "about.html")
def post(request):
return render(request, "post.html")
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name="index"),
path('about/', views.about, name="about"),
path('post/', views.about, name="post"),
]
#index, about, post html에 대한 경로 등록현재로는 runserver를 돌려도 적용이 안된 모습을 볼 수 있다. 5번 과정 이어서 진행
5. html 코드를 수정한다.
html 소스들을 가져온 뒤, runserver 을 돌려보면 css, fonts 등 적용이 안된 모습을 볼 수 있다.
static 아래의 css, js, images 등을 불러오기 위해
"css/bootstrap.min.css" - 이러했던 기존 코드에서
"{% static 'css/bootstrap.min.css' %}" - 다음과 같이 수정한다.
<!DOCTYPE html>
{% load static %} <!--static을 불러오는 코드 추가-->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="{% static 'css/jquery.bxslider.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.bxslider.js' %}"></script>
<script src="{% static 'js/mooz.scripts.min.js' %}"></script>
위의 코드 이외에도 모든 html에서 css, js, fonts, images 경로를 살펴보며 수정한다. runsever를 돌려서 주소창에 "post/", "about/"를 작성해서 적용된 모습을 확인한다.
reference)
'Project > [장고&파이썬] 블로그 프로젝트' 카테고리의 다른 글
| 2. 템플릿 상속_반복되는 html을 base.html에 담기 (0) | 2021.08.02 |
|---|---|
| 0. 블로그 프로젝트 기술 구상, 장고 기본환경 세팅 (0) | 2021.08.01 |