태그별로 분류하기(Sort by tag)

Posted by Eun JongHyeok on June 01, 2022
  1. 스크립트 추가
  2. 동작 확인

저번에는 검색기능을 이용하여 게시물을 찾아보았는데요 이번에는 태그를 이용하여 게시물을 분류하는 작업을 진행해보려 합니다.

사실 말이 분류작업이지 실상은 리스트들을 미리 생성해놓고 숨겨놨다가 다시 띄워주려합니다. 웹개발을 해본적도 없기도하고 잘 아는 것도 아니라 그냥 이곳 저곳 코드보고 저한테 맞게 조금 수정한거라 그점 이해해 주시면 감사하겠습니다.

참고한 블로그

제가 원하던 방식이 딱 이런 느낌이었습니다. 태그가 표시되어 있고 태그 클릭하면 태그에 맞는 글만 보이도록 하고 싶었습니다.
하지면 별도로 tag만을 위한 페이지를 만들고 싶지는 않았고 저의 카테고리 페이지 내에서만 동작시키고 싶었습니다.

스크립트 추가

그래서 다음과 같이 함수를 추가해보았습니다.



1
2
3
4
5
6
7
8
9
10
11
12



<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
    function showTag(selector) {
        $('.default').hide();
        $('.hidden_tag').hide();
        $(selector).show();
    }
    function showDefault() {
        $('.default').show();
        $('.hidden_tag').hide();
    }
</script>

기존 카테고리로 출력해주던건 default로 클래스 분류해주고 새로 각 태그 클래스를 hidden_tag와 해당 태그로 클래스를 분류하여 새로 만들었습니다.



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



<ul class="mdc-list mdc-list--two-line">
{% for post in paginator.posts %}
<li class="mdc-list-item default"><a href="{{ site.baseurl }}{{ post.url }}" style="text-decoration:none">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">{{ post.title }}</span>
      <span class="mdc-list-item__secondary-text" >{{ post.date | date: '%m/%d/%Y' }},
        {% for tag in post.tags %}
        {% assign refined_tag = tag | replace: ".", "_" | replace: " ", "_"%}
        <div class="tag-class"><i class="fa fa-tag"></i>{{ refined_tag }}</div>
        {% endfor %}
      </span>
    </span>
</a></li>
<hr class ="default">

{% for tag in post.tags %}
{% assign refined_tag = tag | replace: ".", "_" | replace: " ", "_"%}
<li class="mdc-list-item hidden_tag {{refined_tag}}" style="display:none"><a href="{{ site.baseurl }}{{ post.url }}" style="text-decoration:none">
  <span class="mdc-list-item__ripple"></span>
  <span class="mdc-list-item__text">
    <span class="mdc-list-item__primary-text">{{ post.title }}</span>
    <span class="mdc-list-item__secondary-text" >{{ post.date | date: '%m/%d/%Y' }},
      {% for tag2 in post.tags %}
      {% assign refined_tag2 = tag2 | replace: ".", "_" | replace: " ", "_"%}
      <div class="tag-class"><i class="fa fa-tag"></i>{{ refined_tag2 }}</div>
      {% endfor %}  
    </span>
  </span>
</a></li>
<hr class ="hidden_tag {{refined_tag}}" style="display:none">
{% endfor %}

{% endfor %}
</ul>

이후에는 카테고리내에 있는 모든 태그를 Liquid 문법을 이용하여 다 처리해준 뒤 jquery 함수에 연결하였습니다.



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



<!-- Category Post List -->
{% assign all = "" %}
{% for post in paginator.posts %}
  {% if all == "" %}
    {% capture var %}{{ post.tags | join: ", " }}{% endcapture %}
  {% else %}
    {% capture var %}{{ all }}, {{ post.tags | join: ", " }}{% endcapture %}
  {% endif %}
  {% assign all = var %}
{% endfor %}

<!-- 모든 블로그 태그를 모은 뒤 중복 제거 -->
{% assign tagset = all | split: ", " | uniq %}
<h4>
  전체 보기
</h4>
<a class = "tag-link" onclick="showDefault()">
  <span class="mdc-list-item__primary-text"><i class="fa fa-tag"></i>All</span>
</a>
<hr>
<h4>
  태그별 보기
</h4>
{% for tag in tagset %}
{% assign refined_tag = tag | downcase | replace: ".", "_" | replace: " ", "_"%}
<a class = "tag-link" onclick="showTag('.{{refined_tag}}')">
<span class="mdc-list-item__primary-text"><i class="fa fa-tag"></i>{{ refined_tag }}</span>
</a>
{% endfor %}
<hr>

동작 확인

tags.gif

잘 동작하네요.😆

tag
jquery
sort
← Previous Post