참고 사이트
템플릿 상속, url 관리하기
https://integer-ji.tistory.com/95
static 파일 설정
https://integer-ji.tistory.com/109
media 파일 설정 이미지 파일 저장하기
https://integer-ji.tistory.com/110
오늘 사용한 App
myApp
사용한 명령어
python manage.py collectstatic
생성한 파일 & 폴더
myApp/static - 폴더 생성
myApp/static/default.png - 파일 추가
myApp/static/delete.png - 파일 추가
myApp/static/detail.png - 파일 추가
myApp/static/like_after.png - 파일 추가
myApp/static/like_before.png - 파일 추가
myApp/static/update.png - 파일 추가
myApp/forms.py - 파일 생성
myProject/templates - 폴더 생성
myProject/templates/base.html - 파일 생성
포인트
static, media 경로 설정
템플릿 상속을 이용한 base.html 사용
사용한 이미지
완성된 git ( 2020.06.18 키 노출로 인한 git 비공개 )
https://github.com/integerJI/int_1
aws key 노출되다.
https://integer-ji.tistory.com/200
aws key 생성시 주의 할점
https://integer-ji.tistory.com/208
사용한 디렉터리 계층구조 및 파일
myProject
<!-- myProject/myProject/templates/base.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.6">
<title>Eomu Hae</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/blog/">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.4/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.4/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.4/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.hidden {
display: none
}
</style>
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
</head>
<body>
<a class="hidden"><span id="user_name">{{ user.username }}</span></a>
<div class="container">
<header class="blog-header py-3">
<div
class="container d-flex flex-column flex-md-row justify-content-between bg-white border-bottom p-2 mb-6">
<h4 class="my-0 font-weight-normal"><a class="text-muted" href="{% url 'index' %}">Eomu Hae</a></h4>
<form class="form-inline my-2 my-lg-0" action="#" method="post">
{% csrf_token %}
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q"
value="{{q}}">
</form>
<div class="btn-group">
<a class="dropdown-item" href="{% url 'signout'%}">Sign Out</a>
</div>
</div>
</header>
<br>
{% block content %}
{% endblock %}
</div>
</body>
</html># myProject/myProject/settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['myProject/templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
myApp
<!-- myProject/myApp/templates/index.html -->
{% extends 'base.html' %}
{% block content %}
<h1>index</h1>
{% endblock %}
myProject
# myproject/myProject/settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'myApp', 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'# myProject/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
import myMember.views
urlpatterns = [
path('admin/', admin.site.urls),
path('', myMember.views.signin, name="signin"),
path('myApp/', include('myApp.urls')),
path('myMember/', include('myMember.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)마무리
'코딩공부 > 홈페이지 만들기' 카테고리의 다른 글
| Django로 홈페이지 만들기 - #5 글 수정, 글 삭제 (0) | 2020.05.04 |
|---|---|
| Django로 홈페이지 만들기 - #4 글 목록, 글 쓰기 (0) | 2020.05.04 |
| Django로 홈페이지 만들기 - #2 회원가입, 로그인, 로그아웃 (0) | 2020.05.03 |
| Django로 홈페이지 만들기 - #1 기본설정 (0) | 2020.05.03 |
| Django로 홈페이지 만들기 - 인스타그램 벤치마킹하기 (0) | 2020.05.03 |