44< div class ="initial-content ">
55 < div id ="main " role ="main ">
66 < div class ="kb-archive ">
7- < h1 class ="page__title "> {{ page.title | default: "Knowledge Base " }}</ h1 >
7+ < h1 class ="page__title "> {{ page.title | default: "Profession Posts " }}</ h1 >
88
99 {% assign professional_posts = site.posts | where: "type", "profession" %}
1010
@@ -43,13 +43,13 @@ <h3 class="title">{{ category }}</h3>
4343 {% for category in professional_categories %}
4444 < section id ="{{ category | slugify }} " class ="kb-category-section ">
4545 < h2 class ="archive__subtitle "> {{ category }}</ h2 >
46- < div class ="kb -post-grid>
46+ < div class ="profession -post-grid>
4747 {% for post in professional_posts %}
4848 {% if post.categories contains category %}
4949 {% comment %} --- Create a string of slugified tags --- {% endcomment %}
5050 {% capture processed_tags %}{% for tag in post.tags %}{{ tag | slugify }} {% endfor %}{% endcapture %}
5151
52- < div class ="kb -post-carddata-tags ="{{ processed_tags | strip }} ">
52+ < div class ="profession -post-carddata-tags ="{{ processed_tags | strip }} ">
5353 < a href ="{{ post.url | relative_url }} ">
5454 < h4 class ="title "> {{ post.title }}</ h4 >
5555 < p class ="excerpt "> {{ post.excerpt | strip_html | truncatewords: 20 }}</ p >
@@ -68,8 +68,34 @@ <h4 class="title">{{ post.title }}</h4>
6868< script >
6969document . addEventListener ( 'DOMContentLoaded' , function ( ) {
7070 const filterContainer = document . querySelector ( '.kb-tag-filter' ) ;
71- const postCards = document . querySelectorAll ( '.kb -post-card' ) ;
71+ const postCards = document . querySelectorAll ( '.profession -post-card' ) ;
7272 const categorySections = document . querySelectorAll ( '.kb-category-section' ) ;
73+ const categoryCards = document . querySelectorAll ( '.kb-category-card' ) ;
74+
75+ // This function now hides cards with a count of 0
76+ function updateCategoryCounts ( ) {
77+ categoryCards . forEach ( card => {
78+ const targetId = card . getAttribute ( 'href' ) . substring ( 1 ) ;
79+ const section = document . getElementById ( targetId ) ;
80+ const countSpan = card . querySelector ( '.count' ) ;
81+
82+ if ( section && countSpan ) {
83+ const visiblePosts = section . querySelectorAll ( '.profession-post-card[style*="display: block"]' ) ;
84+ const count = visiblePosts . length ;
85+
86+ // --- This is the new part ---
87+ if ( count > 0 ) {
88+ // If there are posts, show the card and update the count
89+ card . style . display = 'block' ; // Or 'flex' if you use that
90+ countSpan . textContent = `${ count } ;
91+ } else {
92+ // If there are no posts, hide the card
93+ card . style . display = 'none' ;
94+ }
95+ // --- End of new part ---
96+ }
97+ } ) ;
98+ }
7399
74100 // 필터를 적용하는 함수 (재사용을 위해 분리)
75101 function applyFilter ( selectedTag ) {
@@ -95,13 +121,16 @@ <h4 class="title">{{ post.title }}</h4>
95121
96122 // 3. 비어있는 카테고리 섹션 숨기기
97123 categorySections . forEach ( section => {
98- const visibleCards = section . querySelectorAll ( '.kb -post-card[style*="display: block"]' ) ;
124+ const visibleCards = section . querySelectorAll ( '.profession -post-card[style*="display: block"]' ) ;
99125 if ( visibleCards . length > 0 ) {
100126 section . style . display = 'block' ;
101127 } else {
102128 section . style . display = 'none' ;
103129 }
104130 } ) ;
131+
132+ // 4. 카테고리별 포스트 숫자 업데이트 함수 호출
133+ updateCategoryCounts ( ) ;
105134 }
106135
107136 // 페이지 로드 시 URL 파라미터를 확인하여 필터 적용
@@ -120,10 +149,8 @@ <h4 class="title">{{ post.title }}</h4>
120149 if ( e . target . classList . contains ( 'kb-tag-pill' ) ) {
121150 const selectedTag = e . target . getAttribute ( 'data-tag' ) ;
122151
123- // 필터 함수 호출
124152 applyFilter ( selectedTag ) ;
125153
126- // URL 업데이트 (페이지 새로고침 없음)
127154 const newUrl = selectedTag === 'all'
128155 ? window . location . pathname
129156 : `${ window . location . pathname } ${ selectedTag } ;
0 commit comments