장고 부트스트랩

이 간단한 설명의 주요 목표는 Django에서 프로젝트에 부트스트랩을 추가하는 방법을 배우는 것이며 정적 주장에 대한 몇 가지 구성도 살펴봅니다.

Django에서 부트스트랩 설정

시작하자. demosite라는 프로젝트와 blog라는 단일 앱이 있지만 단일 프로젝트에 여러 앱이 있을 수 있습니다. 이제 정적 자산을 프로젝트에 연결하는 방법을 살펴보고 앱별 정적 자산을 추가합니다.

blog 앱에 static 디렉토리를 추가하여 이 앱에서만 볼 수 있고 액세스할 수 있습니다. 때로는 모든 앱에서 액세스할 수 있어야 하는 글로벌 스타일이나 글로벌 자산, 사진을 추가하고 싶을 때가 있습니다.

첫 번째 단계는 blog 애플리케이션에 부트스트랩을 추가하는 것입니다. 브라우저를 열고 Bootstrap 5 문서로 이동한 다음 다운로드 버튼을 누르십시오. 다운로드 후 파일을 추출하고 추출된 폴더에서 이러한 JS 및 CSS 폴더를 복사해야 합니다.

앱 내부에 static 폴더를 만들었으며 이 static 폴더 내에 blog라는 다른 폴더를 추가합니다. /static/blog 디렉토리가 있으며 파일을 static에 직접 넣을 필요가 없습니다. 내부에 추가 폴더를 추가하는 것이 좋습니다.

이것이 기술적으로는 다른 blog 폴더를 만드는 대신 이 static 폴더 바로 아래에 모든 스타일을 넣을 수 있지만 이것이 왜 그런지 궁금하다면 나쁜 생각이 될 것입니다. Django는 첫 번째 정적 파일을 선택합니다.

이제 blog 폴더 안에 복사한 폴더를 붙여넣습니다. 이름이 일치하는 사람을 찾고 다른 응용 프로그램에 같은 이름의 정적 파일이 있는 경우 Django는 해당 파일을 구별할 수 없습니다.

간단히 말해서 스타일 CSS와 같은 파일이 있고 이것을 static 아래에 두고 다른 앱이나 프로젝트에도 이 파일을 가지고 있다면 Django는 로드하려는 스타일 CSS를 인식할 수 없습니다. 로드할 이름을 구별하기 위해 추가 이름을 추가하는 것이 좋습니다.

앱 내부에 template이라는 폴더를 만들고 이 폴더 안에 index.html 파일을 생성해 보겠습니다. 이 파일에서 우리는 Django에게 이 Jinja 코드 {% load static %}를 사용하여 정적 변수를 로드하도록 지시해야 하고 <link/> 태그를 사용하여 Bootstrap에서 CSS 파일을 연결하고 다음 코드를 작성해 보겠습니다.

프로젝트를 실행하기 전에 인덱스 페이지에 대한 함수를 생성하고 urls.py 파일에 URL을 설정했는지 확인하십시오. 이 코드는 데모용이며 프로젝트에서 코드가 변경될 수 있습니다.

서버를 실행해 봅시다. 개발자 도구를 열고 네트워크로 이동하여 CSS를 선택하고 페이지를 새로 고치면 부트스트랩이 로드된 것을 볼 수 있습니다.

card 구성 요소를 추가하고 Bootstrap에서 해당 코드를 복사하여 index.html 파일에 붙여넣습니다.

여기에 card가 있고 이미지가 누락되었으므로 이제 이 이미지를 추가하지만 이번에는 전역 정적 자산을 추가하는 방법을 보여 드리겠습니다.

다른 앱에서 이미지를 사용할 수 있도록 하려면 root 디렉토리에 static 폴더를 만들고 static 폴더 안에 image 폴더를 만듭니다. image 폴더 안에 이미지를 저장해 봅시다.

이제 settings.py 파일로 이동하여 아래로 스크롤하여 STATIC_URL이 이미 있는지 확인하고 STATICFILES_DIRS라는 변수를 하나 더 추가해야 합니다. 이 명령을 사용하면 더 많은 static 디렉토리를 지정할 수 있습니다. 우리는 하나만 사용하고 있지만 더 많이 갖고 싶을 때가 있습니다.

index.html 파일 내부의 src 속성에 이미지 경로를 전달합니다.

페이지를 새로고침하면 이미지가 로드된 것을 볼 수 있습니다. 이 이미지는 root static 폴더에서 로드되며 애플리케이션에서 로드된 CSS 스타일이 있습니다.