부트 스트랩으로 django 관리자를 재 설계하고 사용자 정의하는 방법
- .
다시, 왜 귀찮게합니까? -
그러나 통합을 한 단계 더 발전시켜야 할 여러 가지 유효한 이유가 있습니다. -
바이 패스 기능 : 관리자에 대한 사용자 정의 드롭 다운 메뉴를 만들고 실제로 사용하는 옵션을 표시하고 사용자 인터페이스에서 실제로 필요로하지 않는 것을 숨기고 더 나은 사용자 경험을 제공 할 수 있습니다. -
실용적인 예
이 예제에 대해서는 스스로 반복하지 않기 위해 Django 및 Vue.js 기사로 웹 앱을 프로토 타이핑하기 위해 시작한 간단한 게시 웹 응용 프로그램을 재개합니다.
간단히 말해서
:
브랜딩 : "Django Administration"대신 회사의 이름과 색상을 원할 때는 아무런 문제가 없습니다 (그리고 기록의 경우 Django의 BSD 라이센스를 준수합니다). 메인 사이트와 관리자 간의 원활한 통합 : 일반적인 내비게이션 막대를 가짐으로써 사이트를 탐색하는 동안 백 오피스 기능을 전환 할 수 있고 그 반대도 마찬가지입니다. prettifying : 관리자는 괜찮아 보이지만 V2 이후로 반응 형 웹 디자인 원칙을 구현했습니다 (모바일 및 데스크탑 모두에서 잘 작동합니다). 더 좋아 보이도록 할 수 있습니다. 두 가지 모델이있는 Django 앱 : 가있는 기사 저자 : 필드 이름과 슬러그 두 모델의 모든 레지스트리를 쿼리하는 프론트 엔드 (Frontend)라는 단일보기. 템플릿이라는 단일 템플릿 반응성 확장 가능한 인터페이스를 위해 vue 라우터 및 vuex를 사용한 vue.js 구현. 우리는이 설치에서 vue.js 통합을 특별히 신경 쓰지 않을 것이며 여기서는 수정하지 않을 것입니다. .
-
소스
소스
-
> 다음으로, 우리는 이것을 관리자에 통합하고 두 끝에서 공유 탐색 막대를 추가합니다 - 메인 사이트와 백 오피스! 기본 UI 템플릿을 admin 와 통합합니다
거의언급했듯이 템플릿을 포함하여 템플릿을 무시할 수 있습니다. 그러나 Django의 디자인과 당연히 주요 사이트와 백 오피스는 각각 자체 템플릿, 스타일 시트 및 기여 패키지가있는 두 가지 시스템입니다. 따라서 거의 동일하더라도 는 두 개의 서로 다른 템플릿을 유지해야합니다. 하나는 메인 UI와 하나는 관리자입니다. 템플릿에 대한 디렉토리를 일반적으로
.먼저, 우리는 Django에게 해킹 된 관리자 템플릿을 기본 디렉토리에 저장할 위치를 알려야합니다. se 우리는 myProject/settings.py를 편집해야합니다. 먼저, 템플릿을 일정하게 찾으십시오 해당 코드를 이것으로 변경하십시오 관리자 템플릿 포장 (admin/base hack) 우리가 사용자 정의 스타일 시트를 관리자에게 전달하거나 헤더를 제거/교체하는 것과 같이 화장품 변경을 원한다면 admin/base_site 템플릿을 편집하고 현재 단계를 건너 뛰면서 함께 얻을 수 있습니다. 그러나 우리가 모든 길로 가서 관리 섹션을 메인 사이트에 포함 된 것처럼 관리 섹션을 "랩"하고 싶다면 공통 헤더와 바닥 글을 가질 수있는 가능성이 있습니다. 우리는 Django의 admin/base.html을 템플릿/admin/base.html의 템플릿 디렉토리에 복사하여 포장지를 배치 할 수 있도록해야합니다. 우리는 컨테이너 섹션 주변의 코드를 편집하여 다음과 같이합니다. 이것에 :
그리고 그게 다야! 우리는 간단히 BodyHeader 및 BodyFooter 블록 태그를 만들어 다음 단계에서 관리자를 감싸는 코드를 주입 할 수 있습니다. 사용자 정의 관리자 템플릿 코딩 (admin/base_site hack) 그런 다음 실제 템플릿을 Templates/Admin/Base_site.html로 코딩합니다 (프로젝트의 루트에 디렉토리를 만들어야합니다) : .
고장
우리가 여기서하고있는 일을 설명해 보자 : -
우리는 Bodyclass 블록을 사용하여 Frontend 템플릿에서와 같이 Bootstrap의 BG-Light를 설정합니다.
우리는 Extrastyle 블록을 사용하여 부트 스트랩과 일부 CSS 코드를 포함합니다. 에이. 좋아요, #Header, .BreadCrumbs {디스플레이 : 없음; }는 3 번의 재조정입니다. 그러나 브랜딩 및 빵 부스러기 섹션을 두 가지 방법으로 비활성화 할 수 있다는 것을 아는 것이 유용합니다. 비. 관리자에있는 Django의 CSS와 부트 스트랩을 겹칠 때 몇 가지 문제가있을 수 있으므로 몇 가지 수정 사항입니다. .
BodyHeader 및 Bodyfooter 블록을 사용하여 관리자 컨텐츠를 감싸십시오.
-
이제 관리자 템플릿에 액세스 할 수있게되었으므로 스타일 시트를 더욱 발전 시키거나 메인 UI와 공유 스타일로 그대로 둘 수 있습니다. 경고 우리는 본질적으로 동일한 프레젠테이션을 수행하기 위해 두 개의 다른 템플릿 (메인 UI 및 관리자)을 유지하고 있습니다. 물론 소프트웨어 개발의 최대 중 하나를 명시 적으로 깨고 있기 때문에 이것은 이상적이지 않습니다. 반복하지 마십시오 (건조). 우리가 언급했듯이, 이것은 Django 관리자가 메인 UI에서 분리되도록 설계 되었기 때문입니다. 그리고 상자에서 생각하는 데 아무런 문제가없는 것처럼 그 문제는 없습니다. 그러나 그렇습니다. 그것은 거의 같은 내용을 가진 두 개의 템플릿을 사용하도록 강요합니다. - 실제로 원칙적으로 원칙적으로 우리는 메인 UI 및 관리자의 Navbar 및 기타 공통 요소를 포함하는 템플릿 패턴을 설계하고 해당 단일 소스에서 재사용 할 수 있습니다. 그러나이 시점 에서이 기사의 목적 상, 그 접근법은 약간 과잉 일 것입니다. 어쨌든, 나는 당신을 위해 아이디어를 심어 놓을 것입니다. ?
- .
다음은 Navbar의 스 니펫입니다
우리는 템플릿 엔진에 admin/base_site.html 템플릿을 "확장"하고 일부 정의의 일부를 효과적으로 무시한다고 말합니다. 우리는 제목 블록을 사용하여 관리자 페이지가 눈에 띄는 제목을 사용자 정의합니다. 우리는 실제로 필요하지 않기 때문에 브랜딩 및 빵 부스러기 블록의 내용을 비 웁니다. 공유 내비게이션 바 만들기 이제 메인 UI와 관리 사이트가 거의 동일하게 보이므로 통합에서 더 나아가 일반적인 탐색 경험을 만들 수 있습니다. 더 나아가 메인 메뉴에 몇 가지 관리자 옵션을 제시하십시오! 관리 메뉴 제시를 처리하는 드롭 다운 메뉴 섹션에 주목하십시오 (자세한 정보는 Bootstrap의 Navbar 구성 요소 참조) . 우리는 또한 user.is_authenticated %} /{ % endif %} { % if user.is_authenticated %}에서 조건부 점검을 수행하여 관리 메뉴를 표시할지 여부를 결정합니다. 마지막으로, 우리는 현재 두 개의 다른 메인 템플릿을 유지하고 있기 때문에 Navbar의 HTML 코드를 MYAPP/Templates/MyApp/tempalte.html 및 추가 : 관리자 로그인 화면 관리 사이트가 처리되었지만 그러나 -
우리는 Bodyclass 블록을 사용하여 Frontend 템플릿에서와 같이 Bootstrap의 BG-Light를 설정합니다.
- 는 여전히 느슨한 끝이 있습니다 : 로그인 화면.
이제 우리는 다음과 같은 것을 돌릴 수 있습니다 : 소스 우리는 Templtes/admin/login.html에서 다음 템플릿을 만들어 그와 더 가까운 것을 달성 할 수 있습니다. 고장
우리가 여기서하는 일 : > {{block.super}} 태그는 템플릿 엔진에 extrastyle의 내용을 무시하지 않는다고 말하기 위해 (템플릿/admin/base_site.html 템플릿에서 정의한) 컨텐츠가 추가됩니다 (자세한 내용은 템플릿 상속 참조)
브랜딩 블록을 사용하면“Django Administration”헤더를 더 흥미로운 것으로 변경할 수 있습니다. 우리는 빈 정의를 설정하여 head_title 블록을 제거합니다. 우리는 content_title 블록을 사용하여 여분의 정보를 추가합니다. <span><span><!doctype html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><!-- Required meta tags --> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span> </span> <span><!-- Bootstrap CSS --> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span> </span> <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span> class<span>="bg-light"</span>></span> </span> <span><span><span><div</span> class<span>="bg-white container"</span>></span> </span> <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span> </span> <span><!-- Content --> </span> <span><span><span></div</span>></span> </span> <span><!-- Vue.js --> </span> <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span> </span> <span><!-- jQuery first, then Popper.js, then Bootstrap JS --> </span> <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
로그인 후 복사Bootstrap과 마찬가지로 Django 관리자 사이트는 자체 jQuery 번들을 배송하지만 다행히도 Django 개발자들은이를 통해이를 통해 사용자가 공급 한 스크립트 및 라이브러리와의 충돌을 피하기 위해 Django의 jQuery는 django.jquery로 네임 스패닝됩니다. 그래서 우리는 당신의 사본을 포함시킬 수 있습니다 (우리가 한 것처럼) 안전하게. 메인 스타일 시트에서 클래스 정의에 미치게 할 때주의하십시오. 관리 사이트에도 영향을 미치지 않으므로 예상치 못한 방식으로 기능에 영향을 미칩니다. 이 경우 Chrome Devtools, Firefox Developer Tools (특히 Page Inspector) 또는 Safari Developer 도구와 같은 브라우저 디버깅 도구를 통해 항상 무슨 일이 일어나고 있는지 확인할 수 있습니다. 데모 및 전체 코드 우리가 여기서 논의한이 구현은 다음과 같이 보일 것입니다 -
당신은 내 github 저장소에서 모든 프로젝트 코드를 탐색 할 수 있습니다. Luzdealba / djangovuejs. 랩 업 일부는 Django의 관리자 외관을 변경할 필요가 없다고 주장 할 수도 있지만, 사이트의 다른 종점을 원활하게 통합하는 것은 UX - , 개선 된 미세한 해킹이라는 것도 사실입니다. 둘 사이의 원활한 전환을 제공 할 수 있고, 심지어 관리자의 더 통제 된 내비게이션을 제공 할 수 있습니다.
그렇게하는 것이 그렇게 어렵지는 않습니다. 주의를 기울여야 할 것은 관리자를 감싸는 방법과 타사 라이브러리를 자신의 JavaScript 코드 및 스타일 시트와 혼합하는 방법입니다. 다행히도 일부를 관리자에, 일부는 기본 사이트의 나머지 부분에, 일부를 둘 다에 쉽게 통합 할 수 있습니다. 희망적으로, 당신은 그 분명하지 않은 방식으로 Django를 더 커스터마이징 할 수있는 방법에 대한 아이디어가 있기를 바랍니다! Django 관리자와 함께 재생할 수 있도록 웹 앱을 구축하기 위해 변명이 필요한 경우 Django 및 Vue.js로 웹 앱을 프로토 타이핑하는 방법에 대한 지난 주 튜토리얼을 확인하십시오. 그리고 Django 기술을 더 섭취하고 싶다면 Sitepoint Premium Library에는 많은 자원이 있습니다. 부트 스트랩으로 django 관리자를 사용자 정의하는 질문 (FAQ)은 자주 묻는 질문 (FAQ) 부트 스트랩으로 django 관리자를 사용자 정의 할 때의 이점은 무엇입니까? Django Admin에 사용자 정의 작업을 추가 할 수 있습니까?
Django Admin이 허용합니다. 선택한 객체에서 수행 할 수있는 사용자 정의 작업을 추가하십시오. 사용자 정의 작업을 추가하려면 선택한 객체에서 원하는 동작을 수행하는 함수를 정의해야합니다. 이 함수는 모델 관리자, 요청 및 선택한 객체의 쿼리 세트의 세 가지 매개 변수를 가져와야합니다. 이 기능을 정의한 후에는 모델 관리자의 '조치'속성에 추가 할 수 있습니다. 이렇게하면 관리자 변경 목록 페이지의 작업 드롭 다운에서 작업을 사용할 수 있습니다.부트 스트랩을 사용하여 Django 관리자의 모양과 느낌을 사용자 정의 할 수 있습니까? 부트 스트랩을 사용하는 Django 관리자의 느낌. Bootstrap은 타이포그래피, 양식, 버튼 및 기타 인터페이스 구성 요소를위한 다양한 설계 템플릿을 제공하는 프론트 엔드 프레임 워크입니다. Django Admin과 통합하면 이러한 템플릿을 활용하여보다 시각적으로 매력적이고 기능적인 관리자 인터페이스를 만들 수 있습니다. 관리자 인터페이스의 색상, 글꼴, 레이아웃 및 기타 디자인 요소를 사용자 정의하여 브랜드 아이덴티티 또는 개인 선호도에 맞도록 할 수 있습니다.
django admin에 사용자 정의 필터를 추가하려면 어떻게해야합니까? Django Admin에서 양식 필드를 사용자 정의 할 수 있습니까?
Django admin을 사용하면 객체를 만들거나 편집하는 데 사용되는 양식 필드를 사용자 정의 할 수 있습니다. 양식 필드를 사용자 정의하려면 모델 관리자의 'formfield_for_dbfield'메소드를 무시해야합니다. 이 메소드는 지정된 데이터베이스 필드에 사용될 양식 필드 인스턴스를 반환해야합니다. 귀하의 요구에 맞게 Form Field의 속성, 위젯 및 유효성 검사 동작을 사용자 정의 할 수 있습니다.
Django Admin에 사용자 정의 뷰를 추가 할 수 있습니까?Django Admin은 객체 테이블 인 목록 디스플레이를 사용자 정의 할 수 있습니다. 관리자 변경 목록 페이지에 표시됩니다. 목록 디스플레이를 사용자 정의하려면 모델 관리자의 'List_Display'속성을 표시 할 필드 이름 목록으로 설정할 수 있습니다. 이 목록에 메소드 이름을 포함시킬 수도 있습니다.이 목록에는 각 객체의 해당 메소드를 호출하고 결과를 표시합니다.
복잡한 데이터베이스 모델에 django admin을 사용할 수 있습니까?
-
위 내용은 부트 스트랩으로 django 관리자를 재 설계하고 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

CNCF (Cloud Native Computing Foundation), Ampere Computing, Equinix Metal 및 Actuated 간의 공동 작업 인이 파일럿 프로그램은 CNCF Github 프로젝트를위한 ARM64 CI/CD를 간소화합니다. 이 이니셔티브는 보안 문제 및 성과를 다룹니다

이 튜토리얼은 AWS 서비스를 사용하여 서버리스 이미지 처리 파이프 라인을 구축함으로써 안내합니다. ECS Fargate 클러스터에 배포 된 Next.js Frontend를 만들어 API 게이트웨이, Lambda 기능, S3 버킷 및 DynamoDB와 상호 작용합니다. th

이 최고의 개발자 뉴스 레터와 함께 최신 기술 트렌드에 대해 정보를 얻으십시오! 이 선별 된 목록은 AI 애호가부터 노련한 백엔드 및 프론트 엔드 개발자에 이르기까지 모든 사람에게 무언가를 제공합니다. 즐겨 찾기를 선택하고 Rel을 검색하는 데 시간을 절약하십시오
