44 좌측메뉴 수정하기 - SIDE BAR

44.1 좌측메뉴 수정하기 - view.py

이전에 blogs로 만든 페이지를 좌측 메뉴로 만들겠습니다.

view페이지를 수정합니다.

PyBlog모델 전체를 조회하는 sidebarMixin 클래스를 생성합니다.

blogDetail 클래스에서 sidebarMixin 를 상속받고,
sidebarList를 템플릿으로 랜더링 합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
#myapp/blog/views.py
from django.shortcuts import render
from django.views import generic
from django.utils.functional import cached_property

from .models import PyBlog, PyBlogDetail

class sidebarMixin(object): 
    @cached_property
    def getList(self):
        return PyBlog.objects.all()

class firstIndex(sidebarMixin, generic.View):
    def __init__(self):
        self.title_nm       = "PythonBlog에 오신것을 환영합니다."
        self.ogImgUrl       = ""
        self.descript       = ""
        self.template_name  = "index.html"

    def get(self, request, *args, **kwargs):
        self.content = {"descript":self.descript,"title_nm":self.title_nm,"ogImgUrl":self.ogImgUrl,
                        "dataList":PyBlog.objects.all()}

        return render(request, self.template_name, self.content)

class blogList(generic.ListView):
    model = PyBlog

class blogDetail(sidebarMixin, generic.View):
    def __init__(self):
        self.template_name  = "blog/blogDetail.html" 

    def get_queryset(self):     
        results = PyBlog.objects.filter(id=self.kwargs['pk'])       
        results = results.values('id','title','update_dt','regist_dt',
                                'pb_detail__detail_id',
                                'pb_detail__sub_title','pb_detail__img_url','pb_detail__img_size',
                                'pb_detail__content_body')

        self.title_nm = results[0]['title']
        self.regist_dt = results[0]['regist_dt']
        self.descript = results[0]['pb_detail__content_body'][:320]
        self.ogImgUrl = results[0]['pb_detail__img_url']
        return results

    def get(self, request, *args, **kwargs):        
        self.content = {"dataList":self.get_queryset(),                     
                        "sidebarList":self.getList,
                        "descript":self.descript,"title_nm":self.title_nm,"ogImgUrl":self.ogImgUrl}

        return render(request, self.template_name, self.content)

44.2 좌측메뉴 수정하기 - sidebar.html

아래 코드와 같이 sidebar.html을 수정합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!-- templates/base/sidebar -->
<div id="layoutSidenav_nav">
    <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
        <div class="sb-sidenav-menu">
            <!-- <div class="nav"> -->
                {% for list in sidebarList %}  
                <a class="nav-link" href="{% url 'blog:blog_detail' list.id %}">
                    <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                        {{list.title}}
                </a>
                {% endfor %}            
        </div>
    </nav>
</div>

44.3 브라우저에서 확인하기 - 좌측메뉴

좌측 메뉴가 나왔네요.

좀 투박하지만 사이트 구색을 맞춰가고 있습니다.^__^