1+ ---
2+ layout: default
3+ ---
4+ < div class ="initial-content ">
5+ < div id ="main " role ="main ">
6+ < div class ="kb-archive ">
7+ < h1 class ="page__title "> {{ page.title | default: "Knowledge Base" }}</ h1 >
8+
9+ {% assign professional_posts = site.posts | where: "type", "profession" %}
10+
11+ {% assign all_tags_list = "" | split: "," %}
12+ {% for post in professional_posts %}
13+ {% if post.tags %}
14+ {% assign all_tags_list = all_tags_list | concat: post.tags %}
15+ {% endif %}
16+ {% endfor %}
17+ {% assign professional_tags = all_tags_list | uniq | sort %}
18+
19+ {% assign professional_categories = "" | split: "," %}
20+ {% for post in professional_posts %}
21+ {% assign professional_categories = professional_categories | concat: post.categories | uniq %}
22+ {% endfor %}
23+ {% assign professional_categories = professional_categories | sort %}
24+
25+ < div class ="kb-tag-filter ">
26+ < button class ="kb-tag-pill active " data-tag ="all "> All</ button >
27+ {% for tag in professional_tags %}
28+ < button class ="kb-tag-pill " data-tag ="{{ tag | slugify }} "> {{ tag }}</ button >
29+ {% endfor %}
30+ </ div >
31+
32+ < div class ="kb-category-grid ">
33+ {% for category in professional_categories %}
34+ < a href ="#{{ category | slugify }} " class ="kb-category-card ">
35+ < h3 class ="title "> {{ category }}</ h3 >
36+ {% assign count = 0 %}
37+ {% for post in professional_posts %}{% if post.categories contains category %}{% assign count = count | plus: 1 %}{% endif %}{% endfor %}
38+ < span class ="count "> {{ count }} Posts</ span >
39+ </ a >
40+ {% endfor %}
41+ </ div >
42+
43+ {% for category in professional_categories %}
44+ < section id ="{{ category | slugify }} " class ="kb-category-section ">
45+ < h2 class ="archive__subtitle "> {{ category }}</ h2 >
46+ < div class ="kb-post-grid ">
47+ {% for post in professional_posts %}
48+ {% if post.categories contains category %}
49+ {% comment %} --- Create a string of slugified tags --- {% endcomment %}
50+ {% capture processed_tags %}{% for tag in post.tags %}{{ tag | slugify }} {% endfor %}{% endcapture %}
51+
52+ < div class ="kb-post-card " data-tags ="{{ processed_tags | strip }} ">
53+ < a href ="{{ post.url | relative_url }} ">
54+ < h4 class ="title "> {{ post.title }}</ h4 >
55+ < p class ="excerpt "> {{ post.excerpt | strip_html | truncatewords: 20 }}</ p >
56+ < time class ="date "> {{ post.date | date: "%B %d, %Y" }}</ time >
57+ </ a >
58+ </ div >
59+ {% endif %}
60+ {% endfor %}
61+ </ div >
62+ </ section >
63+ {% endfor %}
64+ </ div >
65+ </ div >
66+ </ div >
67+
68+ < script >
69+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
70+ const filterContainer = document . querySelector ( '.kb-tag-filter' ) ;
71+ const postCards = document . querySelectorAll ( '.kb-post-card' ) ;
72+ const categorySections = document . querySelectorAll ( '.kb-category-section' ) ;
73+
74+ // 필터를 적용하는 함수 (재사용을 위해 분리)
75+ function applyFilter ( selectedTag ) {
76+ // 1. 버튼 활성 상태 업데이트
77+ const allPills = filterContainer . querySelectorAll ( '.kb-tag-pill' ) ;
78+ allPills . forEach ( pill => {
79+ if ( pill . getAttribute ( 'data-tag' ) === selectedTag ) {
80+ pill . classList . add ( 'active' ) ;
81+ } else {
82+ pill . classList . remove ( 'active' ) ;
83+ }
84+ } ) ;
85+
86+ // 2. 포스트 카드 필터링
87+ postCards . forEach ( card => {
88+ const cardTags = card . getAttribute ( 'data-tags' ) ;
89+ if ( selectedTag === 'all' || ( cardTags && cardTags . includes ( selectedTag ) ) ) {
90+ card . style . display = 'block' ;
91+ } else {
92+ card . style . display = 'none' ;
93+ }
94+ } ) ;
95+
96+ // 3. 비어있는 카테고리 섹션 숨기기
97+ categorySections . forEach ( section => {
98+ const visibleCards = section . querySelectorAll ( '.kb-post-card[style*="display: block"]' ) ;
99+ if ( visibleCards . length > 0 ) {
100+ section . style . display = 'block' ;
101+ } else {
102+ section . style . display = 'none' ;
103+ }
104+ } ) ;
105+ }
106+
107+ // 페이지 로드 시 URL 파라미터를 확인하여 필터 적용
108+ const urlParams = new URLSearchParams ( window . location . search ) ;
109+ const tagFromUrl = urlParams . get ( 'tag' ) ;
110+
111+ if ( tagFromUrl ) {
112+ applyFilter ( tagFromUrl ) ;
113+ } else {
114+ applyFilter ( 'all' ) ; // 파라미터 없으면 'All' 상태로
115+ }
116+
117+ // 태그 버튼 클릭 이벤트
118+ if ( filterContainer ) {
119+ filterContainer . addEventListener ( 'click' , function ( e ) {
120+ if ( e . target . classList . contains ( 'kb-tag-pill' ) ) {
121+ const selectedTag = e . target . getAttribute ( 'data-tag' ) ;
122+
123+ // 필터 함수 호출
124+ applyFilter ( selectedTag ) ;
125+
126+ // URL 업데이트 (페이지 새로고침 없음)
127+ const newUrl = selectedTag === 'all'
128+ ? window . location . pathname
129+ : `${ window . location . pathname } ${ selectedTag } ;
130+
131+ history . pushState ( { tag : selectedTag } , '' , newUrl ) ;
132+ }
133+ } ) ;
134+ }
135+ } ) ;
136+ </ script >
0 commit comments