[Django #11] Dynamic sidebar

이번장에서는  tutorial 페이지에서 side nav bar을 추가할것이다.

views.py내에서 single_slug funtion에 다음과 같은 코드를 추가하자

    tutorials = [t.tutorial_slug for t in Tutorial.objects.all()]

    if single_slug in tutorials:
        this_tutorial = Tutorial.objects.get(tutorial_slug=single_slug)

        return render(request = request,
                      template_name='main/tutorial.html',
                      context = {"tutorial":this_tutorial})

이제 튜토리얼 페이지를 만들어보자.

{% extends 'main/header.html' %}

{% block content %}

    <div class="row">
        <div class="col s12, m8, l8">
            <h3>{{tutorial.tutorial_title}}</h3>
            <p style="font-size:70%">Published {{tutorial.tutorial_published}}</p>
            {{tutorial.tutorial_content|safe}}
        </div>
    </div>

{% endblock %}

이러면 tutorial card를 클릭하면 이 페이지로 올것이다.

그러고나면 tutorial series을 볼수있게 옆에 navbar기능으로 제공해주려한다.

views.py

    tutorials = [t.tutorial_slug for t in Tutorial.objects.all()]

    if single_slug in tutorials:
        this_tutorial = Tutorial.objects.get(tutorial_slug=single_slug)
        tutorials_from_series = Tutorial.objects.filter(tutorial_series__tutorial_series=this_tutorial.tutorial_series).order_by('tutorial_published')
        this_tutorial_idx = list(tutorials_from_series).index(this_tutorial)

        return render(request=request,
                      template_name='main/tutorial.html',
                      context={"tutorial: "this_tutorial,
                               "sidebar": tutorials_from_series,
                               "this_tut_idx": this_tutorial_idx})

그러면 새로전달되는 정보를 tutorial.html에서 보여지게끔할수있다.

side bar을 추가하자

        <div class="col s12 m4 l4">
            <ul class="collapsible popout">
                {% for tutorial in sidebar %}
                    {% if forloop.counter0 == this_tut_idx %}
                        <li class="active">
                            <div class="collapsible-header">{{tutorial.tutorial_title}}<br>(currently viewing)</div>
                        </li>
                    {% else %}
                        <li>
                            <div class="collapsible-header">{{tutorial.tutorial_title}}</div>
                            <div class="collapsible-body">
                                <p><a href="/{{tutorial.tutorial_slug}}"><button class="btn waves-effect waves-light right-align" style="background-color:yellow; color:black">Go</button></a></p>

                            </div>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>

전체코드는 다음과 같은것이다:

{% extends 'main/header.html' %}

{% block content %}

    <div class="row">

        <div class="col s12, m8, l8">
            <h3>{{tutorial.tutorial_title}}</h3>
            <p style="font-size:70%">Published {{tutorial.tutorial_published}}</p>
            {{tutorial.tutorial_content|safe}}
        </div>

        <div class="col s12 m4 l4">
            <ul class="collapsible popout">
                {% for tutorial in sidebar %}
                    {% if forloop.counter0 == this_tut_idx %}
                        <li class="active">
                            <div class="collapsible-header">{{tutorial.tutorial_title}}<br>(currently viewing)</div>
                        </li>
                    {% else %}
                        <li>
                            <div class="collapsible-header">{{tutorial.tutorial_title}}</div>
                            <div class="collapsible-body">
                                <p><a href="/{{tutorial.tutorial_slug}}"><button class="btn waves-effect waves-light right-align" style="background-color:yellow; color:black">Go</button></a></p>

                            </div>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>

    </div>

{% endblock %}

tutorail 페이지가 다음처럼 바뀔것이다.:

나중에 더 작업하겠지만 지금은 navbar에 있는 item에 javascript를 입히지 못하니까 임시방편으로 아래와 같은 코드를 삽입하자. 

<script>
  M.AutoInit();
</script>

우리의 head에 삽입하자.

header.html

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="{% static "main/css/materialize.css" %}">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
  <nav>
    <div class="nav-wrapper"
      <a href="/" class="brand-logo">Tutorials</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        {% include 'main/includes/navbaritems.html' %}
      </ul>
    </div>
  </nav>

  {% include 'main/includes/messaging.html' %}

  <div class="container">
    {% block content %}
    {% endblock %}
  </div>
</body>

<script src="{% static "tinymce/js/prism.js" %}"></script>
<script>M.AutoInit();</script>

일단 이러면 navbar을 클릭해도 에러가 없을것이다.