블로그 글을 정리하여 보여주기!

정돈이 필요할까?

블로그 글들을 종류대로 차례로 정리하면 어떨까? 생각해 봤습니다.

가령, 우리 집 앞에 새로 생긴 맛있는 피자가게가 있다고 생각해보세요. 피자가게에서 사람들이 번호표를 뽑고, 번호 순서대로 피자를 받아가면 깔끔하게 정리되겠죠? 그런데 만약 번호표가 없어서 사람들이 아무 순서 없이 줄을 선다면, 누가 먼저인지 헷갈릴 거예요. 😅

이것처럼 블로그 글도 번호표를 붙여서 순서대로 정리하면, 사람들이 읽기가 더 쉽지 않을까요. 오늘은 블로그에 글을 올릴 때 번호를 붙여서 순서대로 정리하는 방법을 알아봅니다.

왜 블로그 글에 번호를 붙일까?

블로그 글을 쓸 때, 각 글마다 번호를 붙여서 "순서대로 정렬" 할 수 있어요. 마치 도서관에서 책을 번호 순서로 정리해 놓는 것처럼 말이죠! 📚 이렇게 하면 블로그에 글이 많아져도 "어떤 글이 먼저 나와야 하는지" 쉽게 정리할 수 있답니다.

어떻게 번호를 붙일 수 있을까?

먼저, 블로그 글을 올릴 때 **URL(주소)**에 9자리 숫자로 된 분류번호를 붙일 거예요. 예를 들어, 블로그 글 주소를 이렇게 만들 수 있어요:

• https://myblog.com/123456789-apple-story
• https://myblog.com/234567890-banana-story
• https://myblog.com/345678901-cherry-story

이 주소들을 보면, 앞에 9자리 숫자가 붙어 있는 게 보이죠? 이 숫자들이 바로 글의 번호표예요!

이제 번호표로 줄을 세워볼까요?

자, 이제 블로그 글들이 분류번호 순서대로 차례차례 나올 수 있게 도와줄 거예요. 이때 우리가 사용할 마법 같은 방법은 **slug(슬러그)**라는 것이에요. 이건 블로그 글의 주소 끝부분을 말하는데, 여기서 숫자를 보고 글을 정렬할 수 있어요!

어떻게 코드를 바꿀까?

블로그를 운영하는 사람들은 코드라는 특별한 도구를 사용해서 글을 정리해요. 이 도구를 사용하면, 블로그 글을 번호표 순서대로 정렬할 수 있답니다. 지금부터는 코드를 살짝 바꾸는 방법을 알려줄게요!

첫 번째: 블로그 메인 페이지 정리하기

블로그 글을 모아놓은 메인 페이지에서 글들을 번호 순서대로 정렬하려면, 아래처럼 코드를 바꿀 거예요:

{{#get "posts" limit="all" order="slug asc"}}
  {{#foreach posts}}
    <a href="{{url}}">
      <h2>{{title}}</h2>
    </a>
  {{/foreach}}
{{/get}}

여기서 **order="slug asc"**는 글을 번호표 순서대로 (작은 번호부터 큰 번호) 정리하라는 뜻이에요! 👍

두 번째: 태그별 페이지 정리하기

또, 블로그에서 특정 태그가 붙은 글들을 볼 수 있는 페이지도 있어요. 예를 들어, '여행' 태그를 클릭하면, '여행'에 대한 글들이 모여 나오겠죠? 이 글들도 번호표 순서대로 정리할 수 있어요!

{{#get "posts" filter="tag:{{tag.slug}}" limit="all" order="slug asc"}}
  {{#foreach posts}}
    <a href="{{url}}">
      <h2>{{title}}</h2>
    </a>
  {{/foreach}}
{{/get}}

여기서도 똑같이 **order="slug asc"**를 사용해서 슬러그(번호표) 순서대로 정리해줍니다. 이렇게 하면, 태그별로 글을 볼 때도 정리정돈이 잘 되어 있어요!

이렇게 되어있는 부분을 tag.hbs에서 찾아서 (원래 코드)

{{#foreach posts}}
    {{> "post-card"}}
{{/foreach}}

이렇게 바꾸어 주시면 됩니다. 아주 쉽조잉 (order="slug asc" 추가)

{{!-- 태그별 포스트를 슬러그 순서로 오름차순 정렬하여 가져옵니다 --}}
{{#get "posts" filter="tag:{{tag.slug}}" limit="all" order="slug asc"}}
    {{#foreach posts}}
        {{> "post-card"}}
    {{/foreach}}
{{/get}}

작업을 마치고 확인해보세요!

이제 다 끝났다면, 블로그에 가서 새로고침을 해보세요. 🖥️✨

• 메인 페이지에서도, 태그 페이지에서도 모든 글이 분류번호 순서대로 나와야 해요.
• 번호표가 작은 글부터 큰 글 순서로 줄을 서 있는 걸 볼 수 있을 거예요.