017 히든메뉴|사이드 박스

이번에는 웹 사이트를 열었을 때 사이즈를 줄이면 히든 메뉴가 나옵니다. 히든 메뉴에는 표시된 내용은 팔로잉(내가 팔로우를 누른) 사람들이 표시가 됩니다.

그리고 사이드 박스에 보시면 팔로잉 한 사람이 새로운 글을 올리면 그 글을 순서대로 뿌려주는 공간을 만들었습니다.

회원님을 위한 추천은 팔로우, 팔로잉과 상관없이 최근에 올라온 글 중 몇 번째 글을 표시해줍니다.

post_list.html에서 hidden 메뉴를 작성합니다.

파일명 : post/templates/post/post_list.html


{% block content %}

<!-- hidden -->
{% if user.profile.get_following %}
<div class="hidden_menu">
    <div class="scroll_inner">
        {% for following in user.profile.get_following %}

        <div class="user">
            <div class="thumb_img">
                {% if following.picture %}
                <img src="{{ following.picture.url }}" alt="{{ following.nickname }}의 프로필 이미지">
                {% else %}
                <img src="{% static 'imgs/thumb.jpeg'%}" alt="{{ following.nickname }}의 프로필 이미지">
                {% endif %}
            </div>
            <div class="id">{{ following.nickname }}</div>
        </div>

        {% endfor %}
    </div>
</div>

{% else %}

<div class="hidden_menu">
    <div class="scroll_inner">
        <div class="notic">
            팔로우한 유저가 없습니다 팔로우를 해주세요
        </div>
    </div>
</div>

{% endif %}

<!-- main -->
<section id="main_container">
    ...
</section>

{% include "post/script_ajax.html" %}
{% endblock %}

이제 팔로우한 유저들이 히든 메뉴에 잘 보입니다.

이제 스토리 부분을 수정하도록 하겠습니다.

post/views.py 팔로잉한 사람들의 피드를 받기 위해서 수정하도록 하겠습니다.

post_list 함수에 내용을 추가하도록 하겠습니다. if문을 이용하여 return 값을 분기를 해 놓았는데요. 인증된 사용자라면 하는 부분에 수정을 넣도록 하겠습니다.

파일명 : post/views.py


post_list = Post.objects.all()

if request.user.is_authenticated:
    username = request.user 
    user = get_object_or_404 (get_user_model(), username=username) 
    user profile = user.profile
		
    following set = request.user.profile.get_following 
    following_post_list = Post.objects. filter(author__profile__in=following_set)
		
    return render (request, 'post/post_list.html', {
        'user_profile': user_profile,
        'posts': post_list,
        'following_post_list': following_post_list,
    }) 
else: 
    return render (request, 'post/post_list.html', {
        'posts': post_list,
    })

이제 following_post_list를 post_list.html에서 사용할 수 있게 됩니다. post_list.html에서 article.story 태그 내부를 수정합니다.

파일명 : post/templates/post/post_list.html


<article class="story">
    <header class="story_header">
        <div>스토리</div>
        <div class="more">모두 보기</div>
    </header>

    <div class="scroll_inner">
        {% if following_post_list %}
        {% for post in following_post_list %}
        <div class="thumb_user">
            <div class="profile_thumb">
                <img src="{{ post.photo.url }}" alt="프로필사진">
            </div>
            <div class="detail">
                <div class="id">{{ post.content }}</div>
                <div class="time">{{ post.updated_at | timesince }}</div>
            </div>
        </div>

        {% endfor %}
        {% endif %}
    </div>
</article>

실행시키시면 프로필 사진과 컨텐츠 내용, 몇 시간 전에 작성했는지 나오게 됩니다.

회원님을 위한 추천 부분도 수정하겠습니다.

파일명 : post/templates/post/post_list.html


<article class="recommend">
    <header class="reco_header">
        <div>회원님을 위한 추천</div>
        <div class="more">모두 보기</div>
    </header>

    {% for post in posts %}

    <div class="thumb_user">
        <div class="profile_thumb">
            <img src="{{ post.photo.url }}" alt="프로필사진">
        </div>
        <div class="detail">
            <div class="id">{{ post.content }}</div>
            <div class="time">{{ post.updated_at|timesince }}</div>
        </div>
    </div>

    {% endfor %}
</article>

확인해 보시면 모든 포스트가 출력되는 것을 확인하실 수 있습니다.

하나만 나오게 하려면 slice 필터를 적용합니다.

파일명 : post/templates/post/post_list.html


{% for post in posts|slice:"2:3" %}

한개만 출력된 것을 확인하실 수 있습니다. 슬라이스 부분에 난수를 발생한다면 무작위로 추천글이 바뀝니다.