Doctris base template 개발자용 사용 설명서

본 문서는 doctris web base template 을 쉽고 빠르게 django 웹 프로그램에 적용하기 위해 개발되었습니다.
[git page : layouts](https://github.com/pai-seocho/django-tutorial/tree/master/layouts)

0. 들어가기 전에

⚠️ 해당 문서는 doctris base template 을 사용해 개발을 하는 개발자용 문서입니다
⚠️ 시작하기에 앞서 doctris_base 을 적용하고자 하는 django 프로젝트가 준비되어 있어야 합니다. (해당 문서에서는 doctris_base 을 적용하고자 하는 프로젝트 명을 my_project 라 명명합니다.)
해당 문서를 읽고 적용하기 위해서는 Django 에 대한 기본 지식이 필요합니다. (만약 해당 지식이 없다면 django-tutorial git wiki > 1.Start 단원을 참조해주세요)
해당 문서를 통해 얻을수 있는 지식은 아래와 같습니다.
- doctris base template 을 활용해 개발을 시작 할 수 있습니다.
- base template 내 아래와 같은 항복들을 사용자 목적에 맞게 변경할수 있습니다.
  - Top navigation
    - dropdown menu 변경
    - 이외 기능 추가 방법
  - Side nvaigation
    - side menu 변경
    - logo 변경
    - side navi content 변경
  - footer
    - footer 변경 방법
  - content
    - content 추가 방법

1. 시작하기

1.1 Clone git repo

https://github.com/pai-seocho/django-tutorial

1.2 `doctris_base` app 등록하기

django-tutorial > layouts > doctris_base 폴더를 my_project 에 복사합니다. (프로젝트 레벨에 복사합니다.)
```
 mv django-tutorial/layouts/doctris_base .
 rm -rf django-tutorial
```

Settings.py INSTALLED_APPS에 app 을 등록합니다.

INSTALLED_APPS = [
	...    
	'doctris_base',
]

project url 에 doctors_base url 을 등록합니다.

urlpatterns = [
		...
    path('doctris_base/', include('doctris_base.urls'), name='doctris_base'),
]

서버 시작하기
```
python manage.py runserver 
```

2. 변경하기

2.0 폴더 구조

{my_project}
   |- doctris_base 
   	|- templates 
   		|- doctris_base
   			|- base.html
   			|- footer.html
   			|- side_navi.html
   			|- top_navi.html

2.1 Top navigation

{my_project}
	|- doctris_base 
		|- templates 
			|- doctris_base
				|- top_navi.html <--

Top navigation 은 left side 또는 right side 에 여러 기능을 추가 할 수 있다.
left side
- close sidebar
- Search bar
right side
- close sidebar
- Search bar

2.1.1 Left side

2.1.1.1 close sidebar 변경

{# close sidebar start #} 검색

{# close sidebar start #}
<a id="close-sidebar" class="btn btn-icon btn-pills btn-soft-primary ms-2" href="#">
    <i class="uil uil-bars"></i>
</a>
{# close sidebar end #}

2.1.1.2 Search bar 변경

{# search bar start #} 검색

{# search bar start #}
<div class="search-bar p-0 d-none d-lg-block ms-2">
    <div id="search" class="menu-search mb-0">
        <form role="search" method="get" id="searchform" class="searchform">
            <div>
                <input type="text" class="form-control border rounded-pill" name="s" id="s"
                       placeholder="Search Keywords...">
                <input type="submit" id="searchsubmit" value="Search">
            </div>
        </form>
    </div>
</div>
{# search bar end  #}

2.1.1.3 left Side 에 기능 추가하기

{# left side start #} 검색

<div class="d-flex align-items-center">
    {# left side start #}
    <li class="list-inline-item mb-0 ms-1">
        <div>홍길동</div>
    </li>
    {# left side End #}
</div>

2.1.2 Right Side

2.1.2.1 dropdown menu 변경

{# dropdown profile start #} 검색

{# dropdown profile start #} 검색해 아래 코드에서 변경, fix_me 변경

  {# dropdown profile start #}
  <a class="dropdown-item d-flex align-items-center text-dark" href="profile.html">
      {# 프로필 이미지 #}
      <img src="<fix_me>" 
           class="avatar avatar-md-sm rounded-circle border shadow" alt=""> 
      {# 프로필 정보 #}
      <div class="flex-1 ms-2">
          <span class="d-block mb-1">fix_me</span>  <!-- 변경 -->
          <small class="text-muted">fix_me</small>  <!-- 변경 -->
      </div>
  </a>
	{# dropdown profile end #}

2.1.1.2 Right Side 에 기능 추가하기

{# Right side start #} 검색

<ul class="list-unstyled mb-0">
{# Right side start #}
{# Right side end #}
</ul>

2.2 Side navigation

{my_project}
	|- doctris_base 
		|- templates 
			|- doctris_base
				|- side_navi.html <--

2.2.1 로고 변경 부분

{# Logo start #} ~ {# Logo end #} 변경

{# Logo start #}
<div class="sidebar-brand">
    <a href="{% url '{fixme}' %}"> <!-- 로고 클릭시 이동되는 페이지 -->
        <img src="{% static '{fixme}' %}" height="28" class="logo-light-mode" alt=""> <!-- 로고 이미지 경로  -->
    </a>
</div>
{# Logo end #}

2.2.2 메뉴 변경 부분

 ~  사이를 변경
- 메뉴는 nested mene와 single menu로 구성

<!-- sidebar-menu Start -->
<ul class="sidebar-menu pt-3">
    {# 접히는 메뉴 #}
    <li class="sidebar-dropdown">
        <a href="javascript:void(0)"><i class="uil uil-user me-2 d-inline-block"></i>fixme_메뉴이름</a>
        <div class="sidebar-submenu">
            <ul>
                <li><a href="fixme">fixme_서브메뉴이름1</a></li>
                <li><a href="fixme">fixme_서브메뉴이름2</a></li>
            </ul>
        </div>
    </li>
    {# 단일 메뉴 #}
    <li>
        <a href="fixme">
            <i class="uil uil-apps me-2 d-inline-block"></i>
            fixme_메뉴설명
        </a>
    </li>
</ul>
<!-- sidebar-menu End -->

2.2.3 Side navi content

<li>tag 을 활용해 기능 추가 가능

<!-- sidebar-content Start -->
    <ul class="sidebar-footer list-unstyled mb-0">
        {# Chatting start #}
        <li class="list-inline-item mb-0 ms-1">
            <a href="#" class="btn btn-icon btn-pills btn-soft-primary">
                <i class="uil uil-comment icons"></i>
            </a>
        </li>
        {# Chatting end #}
				{# 기능 추가 시작 #}
	      {# 기능 추가 끝 #}
    </ul>
<!-- sidebar-content end -->

2.3 footer

{my_project}
	|- doctris_base 
		|- templates 
			|- doctris_base
				|- footer.html <--

2.3.1 footer 변경 방법

{# Footer message start #} ~ {# Footer message end #} 내 태그 변경

{% load static %}
<!-- Footer Start -->
<footer class="bg-white shadow py-3">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col">
                {# Footer message start  #}
                <div class="copyright">© Copyrights <a href="https://publicai.co.kr/">PublicAI</a> 2022. All rights
            reserved. Designed by <a
                    href="https://publicai.co.kr/">PublicAI</a></div>
                {# Footer message End  #}
            </div><!--end col-->
        </div><!--end row-->
    </div><!--end container-->
</footer><!--end footer-->

2.4 content

content 영역 은 base.html 내 정의되어 있음.

<div class="container-fluid">
    <!-- Start Contnet -->
    {% block contents %}
    {% endblock %}
    <!-- End Contnet -->
</div>

2.4.1 content 추가 방법

doctris_base/base.html 을 확장

myapp 에 sample.html 에

{proejct}
	|-doctris_base
	|-myapp
		|-templates
			|-myapp
				|-sample.html  <--- 해당 파일에 아래 코드 추가

{% extends 'doctris_base/base.html' %}
{% load static %}

{% block contents %}
<!-- 여기에 알맞은 내용을 추가  -->
    "Extended Complete!"
{% endblock %}

{% block js %}
{% endblock %}

실행 결과

doctris base template - pai-plznw4me/django-initializer GitHub Wiki

Doctris base template 개발자용 사용 설명서

0. 들어가기 전에

1. 시작하기

1.1 Clone git repo

1.2 `doctris_base` app 등록하기

2. 변경하기

2.0 폴더 구조

2.1 Top navigation

2.1.1 Left side

2.1.1.1 close sidebar 변경

2.1.1.2 Search bar 변경

2.1.1.3 left Side 에 기능 추가하기

2.1.2 Right Side

2.1.2.1 dropdown menu 변경

2.1.1.2 Right Side 에 기능 추가하기

2.2 Side navigation

2.2.1 로고 변경 부분

2.2.2 메뉴 변경 부분

2.2.3 Side navi content

2.3 footer

2.3.1 footer 변경 방법

2.4 content

2.4.1 content 추가 방법

⚠️ GitHub.com Fallback ⚠️

doctris base template - pai-plznw4me/django-initializer GitHub Wiki

Doctris base template 개발자용 사용 설명서

0. 들어가기 전에

1. 시작하기

1.1 Clone git repo

1.2 doctris_base app 등록하기

2. 변경하기

2.0 폴더 구조

2.1 Top navigation

2.1.1 Left side

2.1.1.1 close sidebar 변경

2.1.1.2 Search bar 변경

2.1.1.3 left Side 에 기능 추가하기

2.1.2 Right Side

2.1.2.1 dropdown menu 변경

2.1.1.2 Right Side 에 기능 추가하기

2.2 Side navigation

2.2.1 로고 변경 부분

2.2.2 메뉴 변경 부분

2.2.3 Side navi content

2.3 footer

2.3.1 footer 변경 방법

2.4 content

2.4.1 content 추가 방법

⚠️ **GitHub.com Fallback** ⚠️

1.2 `doctris_base` app 등록하기

⚠️ GitHub.com Fallback ⚠️