A Full Stack Develpor

https://goodthings4me.tistory.com/92

:root {
  --primary: #79aec8;
  --secondary: #417690;
  --accent: #f5dd5d;
  --primary-fg: #fff;

  --body-fg: #333;
  --body-bg: #fff;
  --body-quiet-color: #666;
  --body-loud-color: #000;

  --header-color: #ffc;
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary); -> head 배경 색
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: #c4dce8;
  --breadcrumbs-link-fg: var(--body-bg);
  --breadcrumbs-bg: var(--primary);

간단하게 

--header-bg: var(--secondary); 이 부분만 수정해서 수정에 필요한 setting이 잘 적용되어 있나 확인해보자. 

root 바로 밑에보면 기본으로 변수로 저장되어 있는 색깔들을 볼 수 있다. 

--header-bg: var(--accent); 로 바꿔보면 색깔이 바뀌는 것을 확인할 수 있다. 

바꾸고 싶은 색깔이나 css가 있다면 f12 개발자 모드를 통해 관련 css의 아이디나 클래스를 찾아서 수정하면 될 것이다.

Django admin templates의 구조를 알아보자. 

.../site-packages/django/contrib/admin/templates/
│
├── admin/
│   │
│   ├── auth/ -> 유저 인증에 관한 폴더
│   │   └── user/
│   │       ├── add_form.html
│   │       └── change_password.html
│   │
│   ├── edit_inline/ -> edit 라인 stacked이나 tabular에 관한 폴더
│   │   ├── stacked.html
│   │   └── tabular.html
│   │
│   ├── includes/ 
│   │   ├── fieldset.html
│   │   └── object_delete_summary.html
│   │
│   ├── widgets/ -> 폼의 위젯에 관한 템플릿 정의
│   │   ├── clearable_file_input.html
│   │   ├── foreign_key_raw_id.html
│   │   ├── many_to_many_raw_id.html
│   │   ├── radio.html
│   │   ├── related_widget_wrapper.html
│   │   ├── split_datetime.html
│   │   └── url.html
│   │
│   ├── 404.html
│   ├── 500.html
│   ├── actions.html
│   ├── app_index.html
│   ├── base.html -> django admin 사이트의 기본 레이아웃
│   ├── base_site.html -> 기존 레이아웃을 유지하면서 추가할 수 있다. (주로 수정할 곳)
│   ├── change_form.html
│   ├── change_form_object_tools.html
│   ├── change_list.html
│   ├── change_list_object_tools.html
│   ├── change_list_results.html
│   ├── date_hierarchy.html
│   ├── delete_confirmation.html
│   ├── delete_selected_confirmation.html
│   ├── filter.html
│   ├── index.html
│   ├── invalid_setup.html
│   ├── login.html
│   ├── object_history.html
│   ├── pagination.html
│   ├── popup_response.html
│   ├── prepopulated_fields_js.html
│   ├── search_form.html
│   └── submit_line.html
│
└── registration/
    ├── logged_out.html
    ├── password_change_done.html
    ├── password_change_form.html
    ├── password_reset_complete.html
    ├── password_reset_confirm.html
    ├── password_reset_done.html
    ├── password_reset_email.html
    └── password_reset_form.html

이런 형태로 되어 있다. 

크게 2개의 디렉토리로 되어 있다.

1. admin is for the model object pages. 
2. registration is for password changes and logging in and out.

설명에 따르면 이렇게 되어 있다. 이번에는 주로 admin 폴더만 바꿔볼 생각이다. 

html 파일의 제목을 살펴보게 되면 무슨 기능을 하는지 감이 잡힐 것이다. 

참고 (https://realpython.com/customize-django-admin-python/)

직접 css나 js를 적용하여 Django admin site를 Custom 하는 방법을 적어보려한다.

먼저 admin 관련 templates와 static 폴더는 

python3.8/site-packages/django/contrib/admin 으로 들어가면 (필자는 3.8 버전이고 각자 사용하는 python version에 맞는 python 폴더에 들어가면 된다.) 찾을 수 있다. 

templates 폴더와 static 폴더를 복사해서 Django 프로젝트 manage.py 와 같은 위치에 복사 붙여넣기 해준다.

이후에 django 프로젝트 폴더에 settings.py를 아래처럼 바꿔준다. 

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / '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',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

이러면 이제 custom 할 준비는 마쳤다. 

(사실 저렇게 모든 파일을 가져와서 저장하고 수정하는건 낭비다. 필요한 html이나 css등을 가져와서 위에 기술한 방법으로 저장하고 수정해주면 된다. 하지만 지금은 공부를 위해 전부 가져왔다.)

이제 하나하나씩 보면서 수정해보자. 

참고 (https://www.youtube.com/watch?v=eosXCVcgtPw)

https://www.slideshare.net/bbayoung7849/djangoadminsitecustomexample

verbose_name_plural = "admin 목록 이름" -> 장고 admin 에서 보통 모델명을 복수로 표현해주는데 s만 붙여서 표현해줌. 그럴 때 목록이름을 바꿀 수 있는 방법. model에서 정의

admin.py

class MemberAdmin(admin.ModelAdmin):

  list_per_page = 5 -> pagenated 같은 기능. 페이지에 몇개의 목록을 표시할 것인지 설정

  list_display = ('id','email','username','permission',...,'post_count',) -> 테이블의 thead에 들어갈 내용

  list_editable = ('permission',) -> editable 데이터를 수정할 수 있게 해줌 (select 태그의 option처럼)

  list_filter = ('permission',) -> 필터로 관련 목록을 관리할 수 있게 해준다. 

  search_fields = ('username',) -> 괄호안의 값으로 검색할 수 있게 해준다. 

  odering = ('-id', 'email', 'permission',) -> 정렬 기능 

  def post_count(self, obj):

      return Post.objects.filter(member=obj).count()

  post_count.short_description = '작성한 글 수 ' -> orm을 통해 member별 post 갯 수를 가져온 다음 몇개를 작성했는지 옆에 표시해준다. 위에 display에 추가해서 표시 

  fields = ('member', 'category', 'title') -> 작성할 form의 종류를 조절할 수 있다. 

  fieldsets = ('기본정보', {'fields':('member','category',)}) -> 작성할 form 종류를 나눠줄 수 있다.

form.py(form에서 customize 한다음 admin.py 에 추가해주면 form관련 custom도 detail하게 해줄 수 있다.)

https://docs.djangoproject.com/ko/3.0/intro/tutorial07/

https://ldgeao99.tistory.com/102

https://developer.mozilla.org/ko/docs/Learn/Server-side/Django/Admin_site

웹 페이지를 구축하고 기능을 추가하면 추가할 수록 데이터 통신의 필요성이 극대화 되었다. 

공부를 하다보니 왜 REST_API가 필요하고 편리한지 느끼게 된다. 

https://wisdom-990629.tistory.com/entry/Django-Django-REST-Framework-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0?category=982234 

설명이 정말 잘 나와 있어서 추가해본다.